From cc66532adeb49e48339c4615b63af6d024dc8eb8 Mon Sep 17 00:00:00 2001
From: "docs-examples-cross-repo-dispatch[bot]"
 <318227308+docs-examples-cross-repo-dispatch[bot]@users.noreply.github.com>
Date: Fri, 2 Oct 2026 12:40:55 +0000
Subject: [PATCH] chore(docs): update versioned docs examples

---
 ...__accessibility__angular__example1.ts.json |   2 +-
 ...ccessibility__javascript__example1.js.json |   2 +-
 ...ccessibility__javascript__example1.ts.json |   2 +-
 ...y__accessibility__react__example2.tsx.json |   2 +-
 ...ity__accessibility__vue__example2.vue.json |   2 +-
 ...us__column-menu__angular__example1.ts.json |   2 +-
 ...us__column-menu__angular__example2.ts.json |   2 +-
 ..._column-menu__javascript__example1.js.json |   2 +-
 ..._column-menu__javascript__example1.ts.json |   2 +-
 ..._column-menu__javascript__example2.js.json |   2 +-
 ..._column-menu__javascript__example2.ts.json |   2 +-
 ...nus__column-menu__react__example1.tsx.json |   2 +-
 ...nus__column-menu__react__example2.tsx.json |   2 +-
 ...menus__column-menu__vue__example1.vue.json |   2 +-
 ...menus__column-menu__vue__example2.vue.json |   2 +-
 ...s__context-menu__angular__example1.ts.json |   2 +-
 ...s__context-menu__angular__example2.ts.json |   2 +-
 ...s__context-menu__angular__example3.ts.json |   2 +-
 ...context-menu__javascript__example1.js.json |   2 +-
 ...context-menu__javascript__example1.ts.json |   2 +-
 ...context-menu__javascript__example2.js.json |   2 +-
 ...context-menu__javascript__example2.ts.json |   2 +-
 ...context-menu__javascript__example3.js.json |   2 +-
 ...context-menu__javascript__example3.ts.json |   2 +-
 ...us__context-menu__react__example1.tsx.json |   2 +-
 ...us__context-menu__react__example2.tsx.json |   2 +-
 ...us__context-menu__react__example3.tsx.json |   2 +-
 ...us__context-menu__react__example4.tsx.json |   2 +-
 ...enus__context-menu__vue__example1.vue.json |   2 +-
 ...enus__context-menu__vue__example2.vue.json |   2 +-
 ...enus__context-menu__vue__example3.vue.json |   2 +-
 ...enus__context-menu__vue__example4.vue.json |   2 +-
 ..._drag-to-scroll__angular__example1.ts.json |   2 +-
 ..._drag-to-scroll__angular__example2.ts.json |   2 +-
 ...ag-to-scroll__javascript__example1.js.json |   2 +-
 ...ag-to-scroll__javascript__example1.ts.json |   2 +-
 ...ag-to-scroll__javascript__example2.js.json |   2 +-
 ...ag-to-scroll__javascript__example2.ts.json |   2 +-
 ...__drag-to-scroll__react__example1.tsx.json |   2 +-
 ...__drag-to-scroll__react__example2.tsx.json |   2 +-
 ...us__drag-to-scroll__vue__example1.vue.json |   2 +-
 ...us__drag-to-scroll__vue__example2.vue.json |   2 +-
 ...mpty-data-state__angular__example1.ts.json |   2 +-
 ...mpty-data-state__angular__example2.ts.json |   2 +-
 ...mpty-data-state__angular__example3.ts.json |   2 +-
 ...y-data-state__javascript__example1.js.json |   2 +-
 ...y-data-state__javascript__example1.ts.json |   2 +-
 ...y-data-state__javascript__example2.js.json |   2 +-
 ...y-data-state__javascript__example2.ts.json |   2 +-
 ...y-data-state__javascript__example3.js.json |   2 +-
 ...y-data-state__javascript__example3.ts.json |   2 +-
 ...empty-data-state__react__example1.tsx.json |   2 +-
 ...empty-data-state__react__example2.tsx.json |   2 +-
 ...empty-data-state__react__example3.tsx.json |   2 +-
 ...__empty-data-state__vue__example1.vue.json |   2 +-
 ...__empty-data-state__vue__example2.vue.json |   2 +-
 ...__empty-data-state__vue__example3.vue.json |   2 +-
 ...__export-to-csv__angular__example1.ts.json |   2 +-
 ...__export-to-csv__angular__example2.ts.json |   2 +-
 ...__export-to-csv__angular__example3.ts.json |   2 +-
 ...__export-to-csv__angular__example4.ts.json |   2 +-
 ...xport-to-csv__javascript__example1.js.json |   2 +-
 ...xport-to-csv__javascript__example1.ts.json |   2 +-
 ...xport-to-csv__javascript__example2.js.json |   2 +-
 ...xport-to-csv__javascript__example2.ts.json |   2 +-
 ...xport-to-csv__javascript__example3.js.json |   2 +-
 ...xport-to-csv__javascript__example3.ts.json |   2 +-
 ...xport-to-csv__javascript__example4.js.json |   2 +-
 ...xport-to-csv__javascript__example4.ts.json |   2 +-
 ...s__export-to-csv__react__example1.tsx.json |   2 +-
 ...s__export-to-csv__react__example2.tsx.json |   2 +-
 ...s__export-to-csv__react__example3.tsx.json |   2 +-
 ...s__export-to-csv__react__example4.tsx.json |   2 +-
 ...nus__export-to-csv__vue__example1.vue.json |   2 +-
 ...nus__export-to-csv__vue__example2.vue.json |   2 +-
 ...nus__export-to-csv__vue__example3.vue.json |   2 +-
 ...nus__export-to-csv__vue__example4.vue.json |   2 +-
 ...export-to-excel__angular__example1.ts.json |   2 +-
 ...export-to-excel__angular__example2.ts.json |   2 +-
 ...export-to-excel__angular__example3.ts.json |   2 +-
 ...ort-to-excel__javascript__example1.js.json |   2 +-
 ...ort-to-excel__javascript__example1.ts.json |   2 +-
 ...ort-to-excel__javascript__example2.js.json |   2 +-
 ...ort-to-excel__javascript__example2.ts.json |   2 +-
 ...ort-to-excel__javascript__example3.js.json |   2 +-
 ...ort-to-excel__javascript__example3.ts.json |   2 +-
 ..._export-to-excel__react__example1.tsx.json |   2 +-
 ..._export-to-excel__react__example2.tsx.json |   2 +-
 ..._export-to-excel__react__example3.tsx.json |   2 +-
 ...s__export-to-excel__vue__example1.vue.json |   2 +-
 ...s__export-to-excel__vue__example2.vue.json |   2 +-
 ...s__export-to-excel__vue__example3.vue.json |   2 +-
 ...port-from-excel__angular__example1.ts.json |   2 +-
 ...t-from-excel__javascript__example1.js.json |   2 +-
 ...t-from-excel__javascript__example1.ts.json |   2 +-
 ...mport-from-excel__react__example1.tsx.json |   2 +-
 ..._import-from-excel__vue__example1.vue.json |   2 +-
 ...nus__sheets-bar__angular__example1.ts.json |   2 +-
 ...nus__sheets-bar__angular__example2.ts.json |   2 +-
 ...s__sheets-bar__javascript__example.js.json |   2 +-
 ...s__sheets-bar__javascript__example.ts.json |   2 +-
 ...__sheets-bar__javascript__example2.js.json |   2 +-
 ...__sheets-bar__javascript__example2.ts.json |   2 +-
 ...menus__sheets-bar__react__example.tsx.json |   2 +-
 ...enus__sheets-bar__react__example2.tsx.json |   2 +-
 ...d-menus__sheets-bar__vue__example.vue.json |   2 +-
 ...-menus__sheets-bar__vue__example2.vue.json |   2 +-
 ...enus__undo-redo__angular__example1.ts.json |   2 +-
 ...us__undo-redo__javascript__example.js.json |   2 +-
 ...us__undo-redo__javascript__example.ts.json |   2 +-
 ...-menus__undo-redo__react__example.tsx.json |   2 +-
 ...nd-menus__undo-redo__vue__example.vue.json |   2 +-
 ...-icons-in-cells__angular__example1.ts.json |   2 +-
 ...-icons-in-cells__angular__example2.ts.json |   2 +-
 ...ons-in-cells__javascript__example1.js.json |   2 +-
 ...ons-in-cells__javascript__example1.ts.json |   2 +-
 ...ons-in-cells__javascript__example2.js.json |   2 +-
 ...ons-in-cells__javascript__example2.ts.json |   2 +-
 ...e-icons-in-cells__react__example1.tsx.json |   2 +-
 ...e-icons-in-cells__react__example2.tsx.json |   2 +-
 ...use-icons-in-cells__vue__example1.vue.json |   2 +-
 ...use-icons-in-cells__vue__example2.vue.json |   2 +-
 ...autofill-values__angular__example1.ts.json |   2 +-
 ...autofill-values__angular__example2.ts.json |   2 +-
 ...autofill-values__angular__example3.ts.json |   2 +-
 ...ofill-values__javascript__example1.js.json |   2 +-
 ...ofill-values__javascript__example1.ts.json |   2 +-
 ...ofill-values__javascript__example2.js.json |   2 +-
 ...ofill-values__javascript__example2.ts.json |   2 +-
 ...ofill-values__javascript__example3.js.json |   2 +-
 ...ofill-values__javascript__example3.ts.json |   2 +-
 ..._autofill-values__react__example1.tsx.json |   2 +-
 ..._autofill-values__react__example2.tsx.json |   2 +-
 ..._autofill-values__react__example3.tsx.json |   2 +-
 ...s__autofill-values__vue__example1.vue.json |   2 +-
 ...s__autofill-values__vue__example2.vue.json |   2 +-
 ...s__autofill-values__vue__example3.vue.json |   2 +-
 ...clickable-links__angular__example1.ts.json |   2 +-
 ...clickable-links__angular__example2.ts.json |   2 +-
 ...ckable-links__javascript__example1.js.json |   2 +-
 ...ckable-links__javascript__example1.ts.json |   2 +-
 ...ckable-links__javascript__example2.js.json |   2 +-
 ...ckable-links__javascript__example2.ts.json |   2 +-
 ..._clickable-links__react__example1.tsx.json |   2 +-
 ..._clickable-links__react__example2.tsx.json |   2 +-
 ...s__clickable-links__vue__example1.vue.json |   2 +-
 ...s__clickable-links__vue__example2.vue.json |   2 +-
 ...ures__clipboard__angular__example1.ts.json |   2 +-
 ...ures__clipboard__angular__example2.ts.json |   2 +-
 ...ures__clipboard__angular__example3.ts.json |   2 +-
 ...ures__clipboard__angular__example4.ts.json |   2 +-
 ...ures__clipboard__angular__example5.ts.json |   2 +-
 ...ures__clipboard__angular__example6.ts.json |   1 +
 ...s__clipboard__javascript__example1.js.json |   2 +-
 ...s__clipboard__javascript__example1.ts.json |   2 +-
 ...s__clipboard__javascript__example2.js.json |   2 +-
 ...s__clipboard__javascript__example2.ts.json |   2 +-
 ...s__clipboard__javascript__example3.js.json |   2 +-
 ...s__clipboard__javascript__example3.ts.json |   2 +-
 ...s__clipboard__javascript__example4.js.json |   2 +-
 ...s__clipboard__javascript__example4.ts.json |   2 +-
 ...s__clipboard__javascript__example5.js.json |   2 +-
 ...s__clipboard__javascript__example5.ts.json |   2 +-
 ...s__clipboard__javascript__example6.js.json |   1 +
 ...s__clipboard__javascript__example6.ts.json |   1 +
 ...tures__clipboard__react__example1.tsx.json |   2 +-
 ...tures__clipboard__react__example2.tsx.json |   2 +-
 ...tures__clipboard__react__example3.tsx.json |   2 +-
 ...tures__clipboard__react__example4.tsx.json |   2 +-
 ...tures__clipboard__react__example5.tsx.json |   2 +-
 ...tures__clipboard__react__example6.tsx.json |   1 +
 ...eatures__clipboard__vue__example1.vue.json |   2 +-
 ...eatures__clipboard__vue__example2.vue.json |   2 +-
 ...eatures__clipboard__vue__example3.vue.json |   2 +-
 ...eatures__clipboard__vue__example4.vue.json |   2 +-
 ...eatures__clipboard__vue__example5.vue.json |   2 +-
 ...eatures__clipboard__vue__example6.vue.json |   1 +
 ...tures__comments__angular__example1.ts.json |   2 +-
 ...tures__comments__angular__example2.ts.json |   2 +-
 ...tures__comments__angular__example3.ts.json |   2 +-
 ...tures__comments__angular__example4.ts.json |   2 +-
 ...tures__comments__angular__example5.ts.json |   2 +-
 ...tures__comments__angular__example6.ts.json |   2 +-
 ...es__comments__javascript__example1.js.json |   2 +-
 ...es__comments__javascript__example1.ts.json |   2 +-
 ...es__comments__javascript__example2.js.json |   2 +-
 ...es__comments__javascript__example2.ts.json |   2 +-
 ...es__comments__javascript__example3.js.json |   2 +-
 ...es__comments__javascript__example3.ts.json |   2 +-
 ...es__comments__javascript__example4.js.json |   2 +-
 ...es__comments__javascript__example4.ts.json |   2 +-
 ...es__comments__javascript__example5.js.json |   2 +-
 ...es__comments__javascript__example5.ts.json |   2 +-
 ...es__comments__javascript__example6.js.json |   2 +-
 ...es__comments__javascript__example6.ts.json |   2 +-
 ...atures__comments__react__example1.tsx.json |   2 +-
 ...atures__comments__react__example2.tsx.json |   2 +-
 ...atures__comments__react__example3.tsx.json |   2 +-
 ...atures__comments__react__example4.tsx.json |   2 +-
 ...atures__comments__react__example5.tsx.json |   2 +-
 ...atures__comments__react__example6.tsx.json |   2 +-
 ...features__comments__vue__example1.vue.json |   2 +-
 ...features__comments__vue__example2.vue.json |   2 +-
 ...features__comments__vue__example3.vue.json |   2 +-
 ...features__comments__vue__example4.vue.json |   2 +-
 ...features__comments__vue__example5.vue.json |   2 +-
 ...features__comments__vue__example6.vue.json |   2 +-
 ...onal-formatting__angular__example1.ts.json |   2 +-
 ...onal-formatting__angular__example2.ts.json |   2 +-
 ...onal-formatting__angular__example3.ts.json |   2 +-
 ...l-formatting__javascript__example1.js.json |   2 +-
 ...l-formatting__javascript__example1.ts.json |   2 +-
 ...l-formatting__javascript__example2.js.json |   2 +-
 ...l-formatting__javascript__example2.ts.json |   2 +-
 ...l-formatting__javascript__example3.js.json |   2 +-
 ...l-formatting__javascript__example3.ts.json |   2 +-
 ...ional-formatting__react__example1.tsx.json |   2 +-
 ...ional-formatting__react__example2.tsx.json |   2 +-
 ...ional-formatting__react__example3.tsx.json |   2 +-
 ...itional-formatting__vue__example1.vue.json |   2 +-
 ...itional-formatting__vue__example2.vue.json |   2 +-
 ...itional-formatting__vue__example3.vue.json |   2 +-
 ...ormatting-cells__angular__example1.ts.json |   2 +-
 ...ormatting-cells__angular__example2.ts.json |   2 +-
 ...ormatting-cells__angular__example3.ts.json |   2 +-
 ...atting-cells__javascript__example1.js.json |   2 +-
 ...atting-cells__javascript__example1.ts.json |   2 +-
 ...atting-cells__javascript__example2.js.json |   2 +-
 ...atting-cells__javascript__example2.ts.json |   2 +-
 ...atting-cells__javascript__example3.js.json |   2 +-
 ...atting-cells__javascript__example3.ts.json |   2 +-
 ...formatting-cells__react__example1.tsx.json |   2 +-
 ...formatting-cells__react__example2.tsx.json |   2 +-
 ...formatting-cells__react__example3.tsx.json |   2 +-
 ...__formatting-cells__vue__example1.vue.json |   2 +-
 ...__formatting-cells__vue__example2.vue.json |   2 +-
 ...__formatting-cells__vue__example3.vue.json |   2 +-
 ...es__merge-cells__angular__example1.ts.json |   2 +-
 ...es__merge-cells__angular__example2.ts.json |   2 +-
 ...es__merge-cells__angular__example3.ts.json |   2 +-
 ...es__merge-cells__angular__example4.ts.json |   2 +-
 ..._merge-cells__javascript__example1.js.json |   2 +-
 ..._merge-cells__javascript__example1.ts.json |   2 +-
 ..._merge-cells__javascript__example2.js.json |   2 +-
 ..._merge-cells__javascript__example2.ts.json |   2 +-
 ..._merge-cells__javascript__example3.js.json |   2 +-
 ..._merge-cells__javascript__example3.ts.json |   2 +-
 ..._merge-cells__javascript__example4.js.json |   2 +-
 ..._merge-cells__javascript__example4.ts.json |   2 +-
 ...res__merge-cells__react__example1.tsx.json |   2 +-
 ...res__merge-cells__react__example2.tsx.json |   2 +-
 ...res__merge-cells__react__example3.tsx.json |   2 +-
 ...res__merge-cells__react__example4.tsx.json |   2 +-
 ...tures__merge-cells__vue__example1.vue.json |   2 +-
 ...tures__merge-cells__vue__example2.vue.json |   2 +-
 ...tures__merge-cells__vue__example3.vue.json |   2 +-
 ...tures__merge-cells__vue__example4.vue.json |   2 +-
 ...res__move-cells__angular__example1.ts.json |   2 +-
 ...__move-cells__javascript__example1.js.json |   2 +-
 ...__move-cells__javascript__example1.ts.json |   2 +-
 ...ures__move-cells__react__example1.tsx.json |   2 +-
 ...atures__move-cells__vue__example1.vue.json |   2 +-
 ...read-only-cells__angular__example1.ts.json |   2 +-
 ...read-only-cells__angular__example2.ts.json |   2 +-
 ...read-only-cells__angular__example3.ts.json |   2 +-
 ...read-only-cells__angular__example4.ts.json |   2 +-
 ...read-only-cells__angular__example5.ts.json |   2 +-
 ...ells__angular__exampleReadOnlyGrid.ts.json |   2 +-
 ...d-only-cells__javascript__example1.js.json |   2 +-
 ...d-only-cells__javascript__example1.ts.json |   2 +-
 ...d-only-cells__javascript__example2.js.json |   2 +-
 ...d-only-cells__javascript__example2.ts.json |   2 +-
 ...d-only-cells__javascript__example3.js.json |   2 +-
 ...d-only-cells__javascript__example3.ts.json |   2 +-
 ...d-only-cells__javascript__example4.js.json |   2 +-
 ...d-only-cells__javascript__example4.ts.json |   2 +-
 ...d-only-cells__javascript__example5.js.json |   2 +-
 ...d-only-cells__javascript__example5.ts.json |   2 +-
 ...s__javascript__exampleReadOnlyGrid.js.json |   2 +-
 ...s__javascript__exampleReadOnlyGrid.ts.json |   2 +-
 ..._read-only-cells__react__example1.tsx.json |   2 +-
 ..._read-only-cells__react__example2.tsx.json |   2 +-
 ..._read-only-cells__react__example3.tsx.json |   2 +-
 ..._read-only-cells__react__example4.tsx.json |   2 +-
 ..._read-only-cells__react__example5.tsx.json |   2 +-
 ...cells__react__exampleReadOnlyGrid.tsx.json |   2 +-
 ...s__read-only-cells__vue__example1.vue.json |   2 +-
 ...s__read-only-cells__vue__example2.vue.json |   2 +-
 ...s__read-only-cells__vue__example3.vue.json |   2 +-
 ...s__read-only-cells__vue__example4.vue.json |   2 +-
 ...s__read-only-cells__vue__example5.vue.json |   2 +-
 ...y-cells__vue__exampleReadOnlyGrid.vue.json |   2 +-
 ...ures__selection__angular__example1.ts.json |   2 +-
 ...ures__selection__angular__example2.ts.json |   2 +-
 ...ures__selection__angular__example3.ts.json |   2 +-
 ...ures__selection__angular__example4.ts.json |   2 +-
 ...ures__selection__angular__example5.ts.json |   2 +-
 ...ures__selection__angular__example6.ts.json |   2 +-
 ...ures__selection__angular__example7.ts.json |   2 +-
 ...s__selection__javascript__example1.js.json |   2 +-
 ...s__selection__javascript__example1.ts.json |   2 +-
 ...s__selection__javascript__example2.js.json |   2 +-
 ...s__selection__javascript__example2.ts.json |   2 +-
 ...s__selection__javascript__example3.js.json |   2 +-
 ...s__selection__javascript__example3.ts.json |   2 +-
 ...s__selection__javascript__example4.js.json |   2 +-
 ...s__selection__javascript__example4.ts.json |   2 +-
 ...s__selection__javascript__example5.js.json |   2 +-
 ...s__selection__javascript__example5.ts.json |   2 +-
 ...s__selection__javascript__example6.js.json |   2 +-
 ...s__selection__javascript__example6.ts.json |   2 +-
 ...s__selection__javascript__example7.js.json |   2 +-
 ...s__selection__javascript__example7.ts.json |   2 +-
 ...tures__selection__react__example1.tsx.json |   2 +-
 ...tures__selection__react__example2.tsx.json |   2 +-
 ...tures__selection__react__example3.tsx.json |   2 +-
 ...tures__selection__react__example4.tsx.json |   2 +-
 ...tures__selection__react__example5.tsx.json |   2 +-
 ...tures__selection__react__example6.tsx.json |   2 +-
 ...tures__selection__react__example7.tsx.json |   2 +-
 ...eatures__selection__vue__example1.vue.json |   2 +-
 ...eatures__selection__vue__example2.vue.json |   2 +-
 ...eatures__selection__vue__example3.vue.json |   2 +-
 ...eatures__selection__vue__example4.vue.json |   2 +-
 ...eatures__selection__vue__example5.vue.json |   2 +-
 ...eatures__selection__vue__example6.vue.json |   2 +-
 ...eatures__selection__vue__example7.vue.json |   2 +-
 ..._text-alignment__angular__example1.ts.json |   2 +-
 ...xt-alignment__javascript__example1.js.json |   2 +-
 ...xt-alignment__javascript__example1.ts.json |   2 +-
 ...__text-alignment__react__example1.tsx.json |   2 +-
 ...es__text-alignment__vue__example1.vue.json |   2 +-
 ...ns__cell-editor__angular__example1.ts.json |   2 +-
 ...ns__cell-editor__angular__example2.ts.json |   2 +-
 ...ns__cell-editor__angular__example3.ts.json |   2 +-
 ..._cell-editor__javascript__example1.js.json |   2 +-
 ..._cell-editor__javascript__example1.ts.json |   2 +-
 ..._cell-editor__javascript__example2.js.json |   2 +-
 ..._cell-editor__javascript__example2.ts.json |   2 +-
 ...ons__cell-editor__react__example1.tsx.json |   2 +-
 ...ons__cell-editor__react__example2.tsx.json |   2 +-
 ...ons__cell-editor__react__example3.tsx.json |   2 +-
 ...tions__cell-editor__vue__example1.vue.json |   2 +-
 ...tions__cell-editor__vue__example2.vue.json |   2 +-
 ...__cell-function__angular__example1.ts.json |   2 +-
 ...ell-function__javascript__example1.js.json |   2 +-
 ...ell-function__javascript__example1.ts.json |   2 +-
 ...s__cell-function__react__example1.tsx.json |   2 +-
 ...ons__cell-function__vue__example1.vue.json |   2 +-
 ...__cell-renderer__angular__example1.ts.json |   2 +-
 ...__cell-renderer__angular__example2.ts.json |   2 +-
 ...__cell-renderer__angular__example3.ts.json |   2 +-
 ...__cell-renderer__angular__example4.ts.json |   2 +-
 ...__cell-renderer__angular__example5.ts.json |   2 +-
 ...__cell-renderer__angular__example6.ts.json |   2 +-
 ...__cell-renderer__angular__example7.ts.json |   2 +-
 ...ell-renderer__javascript__example4.js.json |   2 +-
 ...ell-renderer__javascript__example4.ts.json |   2 +-
 ...ell-renderer__javascript__example5.js.json |   2 +-
 ...ell-renderer__javascript__example5.ts.json |   2 +-
 ...ell-renderer__javascript__example6.js.json |   2 +-
 ...ell-renderer__javascript__example6.ts.json |   2 +-
 ...s__cell-renderer__react__example1.tsx.json |   2 +-
 ...s__cell-renderer__react__example2.tsx.json |   2 +-
 ...s__cell-renderer__react__example3.tsx.json |   2 +-
 ...s__cell-renderer__react__example4.tsx.json |   2 +-
 ...s__cell-renderer__react__example5.tsx.json |   2 +-
 ...s__cell-renderer__react__example6.tsx.json |   2 +-
 ...ons__cell-renderer__vue__example1.vue.json |   2 +-
 ...ons__cell-renderer__vue__example2.vue.json |   2 +-
 ...ons__cell-renderer__vue__example4.vue.json |   2 +-
 ...ons__cell-renderer__vue__example5.vue.json |   2 +-
 ...ons__cell-renderer__vue__example6.vue.json |   2 +-
 ..._cell-validator__angular__example1.ts.json |   2 +-
 ..._cell-validator__angular__example2.ts.json |   2 +-
 ...ll-validator__javascript__example1.js.json |   2 +-
 ...ll-validator__javascript__example1.ts.json |   2 +-
 ...ll-validator__javascript__example2.js.json |   2 +-
 ...ll-validator__javascript__example2.ts.json |   2 +-
 ...__cell-validator__react__example1.tsx.json |   2 +-
 ...__cell-validator__react__example2.tsx.json |   2 +-
 ...ns__cell-validator__vue__example1.vue.json |   2 +-
 ...ns__cell-validator__vue__example2.vue.json |   2 +-
 ...ions__custom-cells__vue__example1.vue.json |   2 +-
 ...ions__custom-cells__vue__example2.vue.json |   2 +-
 ...ions__custom-cells__vue__example3.vue.json |   2 +-
 ...plete-cell-type__angular__example1.ts.json |   2 +-
 ...plete-cell-type__angular__example2.ts.json |   2 +-
 ...plete-cell-type__angular__example3.ts.json |   2 +-
 ...plete-cell-type__angular__example4.ts.json |   2 +-
 ...plete-cell-type__angular__example5.ts.json |   2 +-
 ...plete-cell-type__angular__example6.ts.json |   2 +-
 ...plete-cell-type__angular__example7.ts.json |   2 +-
 ...plete-cell-type__angular__example8.ts.json |   2 +-
 ...plete-cell-type__angular__example9.ts.json |   2 +-
 ...te-cell-type__javascript__example1.js.json |   2 +-
 ...te-cell-type__javascript__example1.ts.json |   2 +-
 ...te-cell-type__javascript__example2.js.json |   2 +-
 ...te-cell-type__javascript__example2.ts.json |   2 +-
 ...te-cell-type__javascript__example3.js.json |   2 +-
 ...te-cell-type__javascript__example3.ts.json |   2 +-
 ...te-cell-type__javascript__example4.js.json |   2 +-
 ...te-cell-type__javascript__example4.ts.json |   2 +-
 ...te-cell-type__javascript__example5.js.json |   2 +-
 ...te-cell-type__javascript__example5.ts.json |   2 +-
 ...te-cell-type__javascript__example6.js.json |   2 +-
 ...te-cell-type__javascript__example6.ts.json |   2 +-
 ...te-cell-type__javascript__example7.js.json |   2 +-
 ...te-cell-type__javascript__example7.ts.json |   2 +-
 ...te-cell-type__javascript__example8.js.json |   2 +-
 ...te-cell-type__javascript__example8.ts.json |   2 +-
 ...te-cell-type__javascript__example9.js.json |   2 +-
 ...te-cell-type__javascript__example9.ts.json |   2 +-
 ...mplete-cell-type__react__example1.tsx.json |   2 +-
 ...mplete-cell-type__react__example2.tsx.json |   2 +-
 ...mplete-cell-type__react__example3.tsx.json |   2 +-
 ...mplete-cell-type__react__example4.tsx.json |   2 +-
 ...mplete-cell-type__react__example5.tsx.json |   2 +-
 ...mplete-cell-type__react__example6.tsx.json |   2 +-
 ...mplete-cell-type__react__example7.tsx.json |   2 +-
 ...mplete-cell-type__react__example8.tsx.json |   2 +-
 ...mplete-cell-type__react__example9.tsx.json |   2 +-
 ...complete-cell-type__vue__example1.vue.json |   2 +-
 ...complete-cell-type__vue__example2.vue.json |   2 +-
 ...complete-cell-type__vue__example3.vue.json |   2 +-
 ...complete-cell-type__vue__example4.vue.json |   2 +-
 ...complete-cell-type__vue__example5.vue.json |   2 +-
 ...complete-cell-type__vue__example6.vue.json |   2 +-
 ...complete-cell-type__vue__example7.vue.json |   2 +-
 ...complete-cell-type__vue__example8.vue.json |   2 +-
 ...complete-cell-type__vue__example9.vue.json |   2 +-
 ...ypes__cell-type__angular__example1.ts.json |   2 +-
 ...ypes__cell-type__angular__example2.ts.json |   2 +-
 ...ypes__cell-type__angular__example3.ts.json |   2 +-
 ...s__cell-type__javascript__example1.js.json |   2 +-
 ...s__cell-type__javascript__example1.ts.json |   2 +-
 ...s__cell-type__javascript__example2.js.json |   2 +-
 ...s__cell-type__javascript__example2.ts.json |   2 +-
 ...s__cell-type__javascript__example3.js.json |   2 +-
 ...s__cell-type__javascript__example3.ts.json |   2 +-
 ...types__cell-type__react__example1.tsx.json |   2 +-
 ...types__cell-type__react__example2.tsx.json |   2 +-
 ...types__cell-type__react__example3.tsx.json |   2 +-
 ...l-types__cell-type__vue__example1.vue.json |   2 +-
 ...l-types__cell-type__vue__example2.vue.json |   2 +-
 ...l-types__cell-type__vue__example3.vue.json |   2 +-
 ...ckbox-cell-type__angular__example1.ts.json |   2 +-
 ...ckbox-cell-type__angular__example2.ts.json |   2 +-
 ...ckbox-cell-type__angular__example3.ts.json |   2 +-
 ...ckbox-cell-type__angular__example4.ts.json |   2 +-
 ...ox-cell-type__javascript__example1.js.json |   2 +-
 ...ox-cell-type__javascript__example1.ts.json |   2 +-
 ...ox-cell-type__javascript__example2.js.json |   2 +-
 ...ox-cell-type__javascript__example2.ts.json |   2 +-
 ...ox-cell-type__javascript__example3.js.json |   2 +-
 ...ox-cell-type__javascript__example3.ts.json |   2 +-
 ...ox-cell-type__javascript__example4.js.json |   2 +-
 ...ox-cell-type__javascript__example4.ts.json |   2 +-
 ...eckbox-cell-type__react__example1.tsx.json |   2 +-
 ...eckbox-cell-type__react__example2.tsx.json |   2 +-
 ...eckbox-cell-type__react__example3.tsx.json |   2 +-
 ...eckbox-cell-type__react__example4.tsx.json |   2 +-
 ...checkbox-cell-type__vue__example1.vue.json |   2 +-
 ...checkbox-cell-type__vue__example2.vue.json |   2 +-
 ...checkbox-cell-type__vue__example3.vue.json |   2 +-
 ...checkbox-cell-type__vue__example4.vue.json |   2 +-
 ..._date-cell-type__angular__example1.ts.json |   2 +-
 ...te-cell-type__javascript__example1.js.json |   2 +-
 ...te-cell-type__javascript__example1.ts.json |   2 +-
 ...__date-cell-type__react__example1.tsx.json |   2 +-
 ...es__date-cell-type__vue__example1.vue.json |   2 +-
 ...etime-cell-type__angular__example1.ts.json |   2 +-
 ...me-cell-type__javascript__example1.js.json |   2 +-
 ...me-cell-type__javascript__example1.ts.json |   2 +-
 ...tetime-cell-type__react__example1.tsx.json |   2 +-
 ...datetime-cell-type__vue__example1.vue.json |   2 +-
 ...pdown-cell-type__angular__example1.ts.json |   2 +-
 ...pdown-cell-type__angular__example2.ts.json |   2 +-
 ...pdown-cell-type__angular__example3.ts.json |   2 +-
 ...pdown-cell-type__angular__example4.ts.json |   2 +-
 ...pdown-cell-type__angular__example5.ts.json |   2 +-
 ...wn-cell-type__javascript__example1.js.json |   2 +-
 ...wn-cell-type__javascript__example1.ts.json |   2 +-
 ...wn-cell-type__javascript__example2.js.json |   2 +-
 ...wn-cell-type__javascript__example2.ts.json |   2 +-
 ...wn-cell-type__javascript__example3.js.json |   2 +-
 ...wn-cell-type__javascript__example3.ts.json |   2 +-
 ...wn-cell-type__javascript__example4.js.json |   2 +-
 ...wn-cell-type__javascript__example4.ts.json |   2 +-
 ...wn-cell-type__javascript__example5.js.json |   2 +-
 ...wn-cell-type__javascript__example5.ts.json |   2 +-
 ...opdown-cell-type__react__example1.tsx.json |   2 +-
 ...opdown-cell-type__react__example2.tsx.json |   2 +-
 ...opdown-cell-type__react__example3.tsx.json |   2 +-
 ...opdown-cell-type__react__example4.tsx.json |   2 +-
 ...opdown-cell-type__react__example5.tsx.json |   2 +-
 ...dropdown-cell-type__vue__example1.vue.json |   2 +-
 ...dropdown-cell-type__vue__example2.vue.json |   2 +-
 ...dropdown-cell-type__vue__example3.vue.json |   2 +-
 ...dropdown-cell-type__vue__example4.vue.json |   2 +-
 ...dropdown-cell-type__vue__example5.vue.json |   2 +-
 ...table-cell-type__angular__example1.ts.json |   2 +-
 ...le-cell-type__javascript__example1.js.json |   2 +-
 ...le-cell-type__javascript__example1.ts.json |   2 +-
 ...ntable-cell-type__react__example1.tsx.json |   2 +-
 ...sontable-cell-type__vue__example1.vue.json |   2 +-
 ...elect-cell-type__angular__example1.ts.json |   2 +-
 ...elect-cell-type__angular__example2.ts.json |   2 +-
 ...elect-cell-type__angular__example3.ts.json |   2 +-
 ...ct-cell-type__javascript__example1.js.json |   2 +-
 ...ct-cell-type__javascript__example1.ts.json |   2 +-
 ...ct-cell-type__javascript__example2.js.json |   2 +-
 ...ct-cell-type__javascript__example2.ts.json |   2 +-
 ...ct-cell-type__javascript__example3.js.json |   2 +-
 ...ct-cell-type__javascript__example3.ts.json |   2 +-
 ...select-cell-type__react__example1.tsx.json |   2 +-
 ...select-cell-type__react__example2.tsx.json |   2 +-
 ...select-cell-type__react__example3.tsx.json |   2 +-
 ...tiselect-cell-type__vue__example1.vue.json |   2 +-
 ...tiselect-cell-type__vue__example2.vue.json |   2 +-
 ...tiselect-cell-type__vue__example3.vue.json |   2 +-
 ...meric-cell-type__angular__example1.ts.json |   2 +-
 ...ic-cell-type__javascript__example1.js.json |   2 +-
 ...ic-cell-type__javascript__example1.ts.json |   2 +-
 ...umeric-cell-type__react__example1.tsx.json |   2 +-
 ..._numeric-cell-type__vue__example1.vue.json |   2 +-
 ...sword-cell-type__angular__example1.ts.json |   2 +-
 ...sword-cell-type__angular__example2.ts.json |   2 +-
 ...sword-cell-type__angular__example3.ts.json |   2 +-
 ...sword-cell-type__angular__example4.ts.json |   2 +-
 ...rd-cell-type__javascript__example1.js.json |   2 +-
 ...rd-cell-type__javascript__example1.ts.json |   2 +-
 ...rd-cell-type__javascript__example2.js.json |   2 +-
 ...rd-cell-type__javascript__example2.ts.json |   2 +-
 ...rd-cell-type__javascript__example3.js.json |   2 +-
 ...rd-cell-type__javascript__example3.ts.json |   2 +-
 ...rd-cell-type__javascript__example4.js.json |   2 +-
 ...rd-cell-type__javascript__example4.ts.json |   2 +-
 ...ssword-cell-type__react__example1.tsx.json |   2 +-
 ...ssword-cell-type__react__example2.tsx.json |   2 +-
 ...ssword-cell-type__react__example3.tsx.json |   2 +-
 ...ssword-cell-type__react__example4.tsx.json |   2 +-
 ...password-cell-type__vue__example1.vue.json |   2 +-
 ...password-cell-type__vue__example2.vue.json |   2 +-
 ...password-cell-type__vue__example3.vue.json |   2 +-
 ...password-cell-type__vue__example4.vue.json |   2 +-
 ...elect-cell-type__angular__example1.ts.json |   2 +-
 ...ct-cell-type__javascript__example1.js.json |   2 +-
 ...ct-cell-type__javascript__example1.ts.json |   2 +-
 ...select-cell-type__react__example1.tsx.json |   2 +-
 ...__select-cell-type__vue__example1.vue.json |   2 +-
 ..._text-cell-type__angular__example1.ts.json |   2 +-
 ..._text-cell-type__angular__example2.ts.json |   2 +-
 ...xt-cell-type__javascript__example1.js.json |   2 +-
 ...xt-cell-type__javascript__example1.ts.json |   2 +-
 ...xt-cell-type__javascript__example2.js.json |   2 +-
 ...xt-cell-type__javascript__example2.ts.json |   2 +-
 ...__text-cell-type__react__example1.tsx.json |   2 +-
 ...__text-cell-type__react__example2.tsx.json |   2 +-
 ...es__text-cell-type__vue__example1.vue.json |   2 +-
 ...es__text-cell-type__vue__example2.vue.json |   2 +-
 ..._time-cell-type__angular__example1.ts.json |   2 +-
 ...me-cell-type__javascript__example1.js.json |   2 +-
 ...me-cell-type__javascript__example1.ts.json |   2 +-
 ...__time-cell-type__react__example1.tsx.json |   2 +-
 ...es__time-cell-type__vue__example1.vue.json |   2 +-
 ...__column-adding__angular__example1.ts.json |   2 +-
 ...__column-adding__angular__example2.ts.json |   2 +-
 ...olumn-adding__javascript__example1.js.json |   2 +-
 ...olumn-adding__javascript__example1.ts.json |   2 +-
 ...olumn-adding__javascript__example2.js.json |   2 +-
 ...olumn-adding__javascript__example2.ts.json |   2 +-
 ...s__column-adding__react__example1.tsx.json |   2 +-
 ...s__column-adding__react__example2.tsx.json |   2 +-
 ...mns__column-adding__vue__example1.vue.json |   2 +-
 ...mns__column-adding__vue__example2.vue.json |   2 +-
 ...__column-filter__angular__example1.ts.json |   2 +-
 ..._column-filter__angular__example10.ts.json |   2 +-
 ..._column-filter__angular__example11.ts.json |   2 +-
 ..._column-filter__angular__example12.ts.json |   2 +-
 ..._column-filter__angular__example13.ts.json |   2 +-
 ..._column-filter__angular__example14.ts.json |   2 +-
 ..._column-filter__angular__example15.ts.json |   2 +-
 ..._column-filter__angular__example16.ts.json |   2 +-
 ..._column-filter__angular__example17.ts.json |   2 +-
 ..._column-filter__angular__example18.ts.json |   2 +-
 ...__column-filter__angular__example2.ts.json |   2 +-
 ...__column-filter__angular__example3.ts.json |   2 +-
 ...__column-filter__angular__example4.ts.json |   2 +-
 ...__column-filter__angular__example5.ts.json |   2 +-
 ...__column-filter__angular__example6.ts.json |   2 +-
 ...__column-filter__angular__example7.ts.json |   2 +-
 ...__column-filter__angular__example8.ts.json |   2 +-
 ...__column-filter__angular__example9.ts.json |   2 +-
 ...script__exampleAvailableConditions.js.json |   2 +-
 ...script__exampleAvailableConditions.ts.json |   2 +-
 ...ascript__exampleCustomFilterButton.js.json |   2 +-
 ...ascript__exampleCustomFilterButton.ts.json |   2 +-
 ...script__exampleCustomFilterButton2.js.json |   2 +-
 ...script__exampleCustomFilterButton2.ts.json |   2 +-
 ...ipt__exampleDisableFilterForColumn.js.json |   2 +-
 ...ipt__exampleDisableFilterForColumn.ts.json |   2 +-
 ...ript__exampleEnableFilterInColumns.js.json |   2 +-
 ...ript__exampleEnableFilterInColumns.ts.json |   2 +-
 ...t__exampleExcludeRowsFromFiltering.js.json |   2 +-
 ...t__exampleExcludeRowsFromFiltering.ts.json |   2 +-
 ...javascript__exampleFilterBasicDemo.js.json |   2 +-
 ...javascript__exampleFilterBasicDemo.ts.json |   2 +-
 ...cript__exampleFilterDifferentTypes.js.json |   2 +-
 ...cript__exampleFilterDifferentTypes.ts.json |   2 +-
 ...script__exampleFilterNestedHeaders.js.json |   2 +-
 ...script__exampleFilterNestedHeaders.ts.json |   2 +-
 ...ipt__exampleFilterOnInitialization.js.json |   2 +-
 ...ipt__exampleFilterOnInitialization.ts.json |   2 +-
 ...vascript__exampleFilterThroughAPI1.js.json |   2 +-
 ...vascript__exampleFilterThroughAPI1.ts.json |   2 +-
 ...avascript__exampleFilterValueOrder.js.json |   2 +-
 ...avascript__exampleFilterValueOrder.ts.json |   2 +-
 ...javascript__exampleGetFilteredData.js.json |   2 +-
 ...javascript__exampleGetFilteredData.ts.json |   2 +-
 ...er__javascript__exampleQuickFilter.js.json |   2 +-
 ...er__javascript__exampleQuickFilter.ts.json |   2 +-
 ...ascript__exampleSaveRestoreFilters.js.json |   2 +-
 ...ascript__exampleSaveRestoreFilters.ts.json |   2 +-
 ...ter__javascript__exampleSearchMode.js.json |   2 +-
 ...ter__javascript__exampleSearchMode.ts.json |   2 +-
 ...avascript__exampleServerSideFilter.js.json |   2 +-
 ...avascript__exampleServerSideFilter.ts.json |   2 +-
 ...script__exampleShowFilterItemsOnly.js.json |   2 +-
 ...script__exampleShowFilterItemsOnly.ts.json |   2 +-
 ...react__exampleAvailableConditions.tsx.json |   2 +-
 ..._react__exampleCustomFilterButton.tsx.json |   2 +-
 ...react__exampleCustomFilterButton2.tsx.json |   2 +-
 ...ct__exampleDisableFilterForColumn.tsx.json |   2 +-
 ...act__exampleEnableFilterInColumns.tsx.json |   2 +-
 ...__exampleExcludeRowsFromFiltering.tsx.json |   2 +-
 ...er__react__exampleFilterBasicDemo.tsx.json |   2 +-
 ...eact__exampleFilterDifferentTypes.tsx.json |   2 +-
 ...react__exampleFilterNestedHeaders.tsx.json |   2 +-
 ...ct__exampleFilterOnInitialization.tsx.json |   2 +-
 ...__react__exampleFilterThroughAPI1.tsx.json |   2 +-
 ...r__react__exampleFilterValueOrder.tsx.json |   2 +-
 ...er__react__exampleGetFilteredData.tsx.json |   2 +-
 ...filter__react__exampleQuickFilter.tsx.json |   2 +-
 ..._react__exampleSaveRestoreFilters.tsx.json |   2 +-
 ...-filter__react__exampleSearchMode.tsx.json |   2 +-
 ...r__react__exampleServerSideFilter.tsx.json |   2 +-
 ...react__exampleShowFilterItemsOnly.tsx.json |   2 +-
 ...__vue__exampleAvailableConditions.vue.json |   2 +-
 ...r__vue__exampleCustomFilterButton.vue.json |   2 +-
 ...__vue__exampleCustomFilterButton2.vue.json |   2 +-
 ...ue__exampleDisableFilterForColumn.vue.json |   2 +-
 ...vue__exampleEnableFilterInColumns.vue.json |   2 +-
 ...__exampleExcludeRowsFromFiltering.vue.json |   2 +-
 ...lter__vue__exampleFilterBasicDemo.vue.json |   2 +-
 ..._vue__exampleFilterDifferentTypes.vue.json |   2 +-
 ...__vue__exampleFilterNestedHeaders.vue.json |   2 +-
 ...ue__exampleFilterOnInitialization.vue.json |   2 +-
 ...er__vue__exampleFilterThroughAPI1.vue.json |   2 +-
 ...ter__vue__exampleFilterValueOrder.vue.json |   2 +-
 ...lter__vue__exampleGetFilteredData.vue.json |   2 +-
 ...n-filter__vue__exampleQuickFilter.vue.json |   2 +-
 ...r__vue__exampleSaveRestoreFilters.vue.json |   2 +-
 ...mn-filter__vue__exampleSearchMode.vue.json |   2 +-
 ...ter__vue__exampleServerSideFilter.vue.json |   2 +-
 ...__vue__exampleShowFilterItemsOnly.vue.json |   2 +-
 ...column-freezing__angular__example1.ts.json |   2 +-
 ...column-freezing__angular__example2.ts.json |   2 +-
 ...umn-freezing__javascript__example1.js.json |   2 +-
 ...umn-freezing__javascript__example1.ts.json |   2 +-
 ...umn-freezing__javascript__example2.js.json |   2 +-
 ...umn-freezing__javascript__example2.ts.json |   2 +-
 ..._column-freezing__react__example1.tsx.json |   2 +-
 ..._column-freezing__react__example2.tsx.json |   2 +-
 ...s__column-freezing__vue__example1.vue.json |   2 +-
 ...s__column-freezing__vue__example2.vue.json |   2 +-
 ...__column-groups__angular__example1.ts.json |   2 +-
 ...__column-groups__angular__example2.ts.json |   2 +-
 ...__column-groups__angular__example3.ts.json |   2 +-
 ...__column-groups__angular__example4.ts.json |   2 +-
 ...olumn-groups__javascript__example1.js.json |   2 +-
 ...olumn-groups__javascript__example1.ts.json |   2 +-
 ...olumn-groups__javascript__example2.js.json |   2 +-
 ...olumn-groups__javascript__example2.ts.json |   2 +-
 ...olumn-groups__javascript__example3.js.json |   2 +-
 ...olumn-groups__javascript__example3.ts.json |   2 +-
 ...olumn-groups__javascript__example4.js.json |   2 +-
 ...olumn-groups__javascript__example4.ts.json |   2 +-
 ...s__column-groups__react__example1.tsx.json |   2 +-
 ...s__column-groups__react__example2.tsx.json |   2 +-
 ...s__column-groups__react__example3.tsx.json |   2 +-
 ...s__column-groups__react__example4.tsx.json |   2 +-
 ...mns__column-groups__vue__example1.vue.json |   2 +-
 ...mns__column-groups__vue__example2.vue.json |   2 +-
 ...mns__column-groups__vue__example3.vue.json |   2 +-
 ...mns__column-groups__vue__example4.vue.json |   2 +-
 ...__column-header__angular__example1.ts.json |   2 +-
 ...__column-header__angular__example2.ts.json |   2 +-
 ...__column-header__angular__example3.ts.json |   2 +-
 ...__column-header__angular__example4.ts.json |   2 +-
 ...__column-header__angular__example5.ts.json |   2 +-
 ...__column-header__angular__example6.ts.json |   2 +-
 ...__column-header__angular__example7.ts.json |   2 +-
 ...olumn-header__javascript__example1.js.json |   2 +-
 ...olumn-header__javascript__example1.ts.json |   2 +-
 ...olumn-header__javascript__example2.js.json |   2 +-
 ...olumn-header__javascript__example2.ts.json |   2 +-
 ...olumn-header__javascript__example3.js.json |   2 +-
 ...olumn-header__javascript__example3.ts.json |   2 +-
 ...olumn-header__javascript__example4.js.json |   2 +-
 ...olumn-header__javascript__example4.ts.json |   2 +-
 ...olumn-header__javascript__example5.js.json |   2 +-
 ...olumn-header__javascript__example5.ts.json |   2 +-
 ...olumn-header__javascript__example6.js.json |   2 +-
 ...olumn-header__javascript__example6.ts.json |   2 +-
 ...olumn-header__javascript__example7.js.json |   2 +-
 ...olumn-header__javascript__example7.ts.json |   2 +-
 ...s__column-header__react__example1.tsx.json |   2 +-
 ...s__column-header__react__example2.tsx.json |   2 +-
 ...s__column-header__react__example3.tsx.json |   2 +-
 ...s__column-header__react__example4.tsx.json |   2 +-
 ...s__column-header__react__example5.tsx.json |   2 +-
 ...s__column-header__react__example6.tsx.json |   2 +-
 ...s__column-header__react__example7.tsx.json |   2 +-
 ...mns__column-header__vue__example1.vue.json |   2 +-
 ...mns__column-header__vue__example2.vue.json |   2 +-
 ...mns__column-header__vue__example3.vue.json |   2 +-
 ...mns__column-header__vue__example4.vue.json |   2 +-
 ...mns__column-header__vue__example5.vue.json |   2 +-
 ...mns__column-header__vue__example6.vue.json |   2 +-
 ...mns__column-header__vue__example7.vue.json |   2 +-
 ...__column-hiding__angular__example1.ts.json |   2 +-
 ...__column-hiding__angular__example2.ts.json |   2 +-
 ...__column-hiding__angular__example3.ts.json |   2 +-
 ...__column-hiding__angular__example4.ts.json |   2 +-
 ...__column-hiding__angular__example5.ts.json |   2 +-
 ...__column-hiding__angular__example6.ts.json |   2 +-
 ...olumn-hiding__javascript__example1.js.json |   2 +-
 ...olumn-hiding__javascript__example1.ts.json |   2 +-
 ...olumn-hiding__javascript__example2.js.json |   2 +-
 ...olumn-hiding__javascript__example2.ts.json |   2 +-
 ...olumn-hiding__javascript__example3.js.json |   2 +-
 ...olumn-hiding__javascript__example3.ts.json |   2 +-
 ...olumn-hiding__javascript__example4.js.json |   2 +-
 ...olumn-hiding__javascript__example4.ts.json |   2 +-
 ...olumn-hiding__javascript__example5.js.json |   2 +-
 ...olumn-hiding__javascript__example5.ts.json |   2 +-
 ...olumn-hiding__javascript__example6.js.json |   2 +-
 ...olumn-hiding__javascript__example6.ts.json |   2 +-
 ...s__column-hiding__react__example1.tsx.json |   2 +-
 ...s__column-hiding__react__example2.tsx.json |   2 +-
 ...s__column-hiding__react__example3.tsx.json |   2 +-
 ...s__column-hiding__react__example4.tsx.json |   2 +-
 ...s__column-hiding__react__example5.tsx.json |   2 +-
 ...s__column-hiding__react__example6.tsx.json |   2 +-
 ...mns__column-hiding__vue__example1.vue.json |   2 +-
 ...mns__column-hiding__vue__example2.vue.json |   2 +-
 ...mns__column-hiding__vue__example3.vue.json |   2 +-
 ...mns__column-hiding__vue__example4.vue.json |   2 +-
 ...mns__column-hiding__vue__example5.vue.json |   2 +-
 ...mns__column-hiding__vue__example6.vue.json |   2 +-
 ...__column-moving__angular__example1.ts.json |   2 +-
 ...__column-moving__angular__example2.ts.json |   2 +-
 ...__column-moving__angular__example3.ts.json |   2 +-
 ...__column-moving__angular__example4.ts.json |   2 +-
 ...olumn-moving__javascript__example1.js.json |   2 +-
 ...olumn-moving__javascript__example1.ts.json |   2 +-
 ...olumn-moving__javascript__example2.js.json |   2 +-
 ...olumn-moving__javascript__example2.ts.json |   2 +-
 ...olumn-moving__javascript__example3.js.json |   2 +-
 ...olumn-moving__javascript__example3.ts.json |   2 +-
 ...olumn-moving__javascript__example4.js.json |   2 +-
 ...olumn-moving__javascript__example4.ts.json |   2 +-
 ...s__column-moving__react__example1.tsx.json |   2 +-
 ...s__column-moving__react__example2.tsx.json |   2 +-
 ...s__column-moving__react__example3.tsx.json |   2 +-
 ...s__column-moving__react__example4.tsx.json |   2 +-
 ...mns__column-moving__vue__example1.vue.json |   2 +-
 ...mns__column-moving__vue__example2.vue.json |   2 +-
 ...mns__column-moving__vue__example3.vue.json |   2 +-
 ...mns__column-moving__vue__example4.vue.json |   2 +-
 ..._column-summary__angular__example1.ts.json |   2 +-
 ..._column-summary__angular__example2.ts.json |   2 +-
 ..._column-summary__angular__example3.ts.json |   2 +-
 ..._column-summary__angular__example4.ts.json |   2 +-
 ..._column-summary__angular__example5.ts.json |   2 +-
 ..._column-summary__angular__example6.ts.json |   2 +-
 ..._column-summary__angular__example7.ts.json |   2 +-
 ..._column-summary__angular__example8.ts.json |   2 +-
 ...lumn-summary__javascript__example1.js.json |   2 +-
 ...lumn-summary__javascript__example1.ts.json |   2 +-
 ...umn-summary__javascript__example10.js.json |   2 +-
 ...umn-summary__javascript__example10.ts.json |   2 +-
 ...umn-summary__javascript__example11.js.json |   2 +-
 ...umn-summary__javascript__example11.ts.json |   2 +-
 ...umn-summary__javascript__example12.js.json |   2 +-
 ...umn-summary__javascript__example12.ts.json |   2 +-
 ...lumn-summary__javascript__example2.js.json |   2 +-
 ...lumn-summary__javascript__example2.ts.json |   2 +-
 ...lumn-summary__javascript__example7.js.json |   2 +-
 ...lumn-summary__javascript__example7.ts.json |   2 +-
 ...lumn-summary__javascript__example8.js.json |   2 +-
 ...lumn-summary__javascript__example8.ts.json |   2 +-
 ...lumn-summary__javascript__example9.js.json |   2 +-
 ...lumn-summary__javascript__example9.ts.json |   2 +-
 ...__column-summary__react__example1.tsx.json |   2 +-
 ..._column-summary__react__example10.tsx.json |   2 +-
 ..._column-summary__react__example11.tsx.json |   2 +-
 ..._column-summary__react__example12.tsx.json |   2 +-
 ...__column-summary__react__example2.tsx.json |   2 +-
 ...__column-summary__react__example7.tsx.json |   2 +-
 ...__column-summary__react__example8.tsx.json |   2 +-
 ...__column-summary__react__example9.tsx.json |   2 +-
 ...ns__column-summary__vue__example1.vue.json |   2 +-
 ...s__column-summary__vue__example10.vue.json |   2 +-
 ...s__column-summary__vue__example11.vue.json |   2 +-
 ...s__column-summary__vue__example12.vue.json |   2 +-
 ...ns__column-summary__vue__example2.vue.json |   2 +-
 ...ns__column-summary__vue__example7.vue.json |   2 +-
 ...ns__column-summary__vue__example8.vue.json |   2 +-
 ...ns__column-summary__vue__example9.vue.json |   2 +-
 ...-virtualization__angular__example1.ts.json |   2 +-
 ...rtualization__javascript__example1.js.json |   2 +-
 ...rtualization__javascript__example1.ts.json |   2 +-
 ...n-virtualization__react__example1.tsx.json |   2 +-
 ...umn-virtualization__vue__example1.vue.json |   2 +-
 ...s__column-width__angular__example1.ts.json |   2 +-
 ...s__column-width__angular__example2.ts.json |   2 +-
 ...s__column-width__angular__example3.ts.json |   2 +-
 ...s__column-width__angular__example4.ts.json |   2 +-
 ...s__column-width__angular__example5.ts.json |   2 +-
 ...s__column-width__angular__example6.ts.json |   2 +-
 ...s__column-width__angular__example7.ts.json |   2 +-
 ...column-width__javascript__example1.js.json |   2 +-
 ...column-width__javascript__example1.ts.json |   2 +-
 ...column-width__javascript__example2.js.json |   2 +-
 ...column-width__javascript__example2.ts.json |   2 +-
 ...column-width__javascript__example3.js.json |   2 +-
 ...column-width__javascript__example3.ts.json |   2 +-
 ...column-width__javascript__example4.js.json |   2 +-
 ...column-width__javascript__example4.ts.json |   2 +-
 ...column-width__javascript__example5.js.json |   2 +-
 ...column-width__javascript__example5.ts.json |   2 +-
 ...column-width__javascript__example6.js.json |   2 +-
 ...column-width__javascript__example6.ts.json |   2 +-
 ...column-width__javascript__example7.js.json |   2 +-
 ...column-width__javascript__example7.ts.json |   2 +-
 ...ns__column-width__react__example1.tsx.json |   2 +-
 ...ns__column-width__react__example2.tsx.json |   2 +-
 ...ns__column-width__react__example3.tsx.json |   2 +-
 ...ns__column-width__react__example4.tsx.json |   2 +-
 ...ns__column-width__react__example5.tsx.json |   2 +-
 ...ns__column-width__react__example6.tsx.json |   2 +-
 ...ns__column-width__react__example7.tsx.json |   2 +-
 ...umns__column-width__vue__example1.vue.json |   2 +-
 ...umns__column-width__vue__example2.vue.json |   2 +-
 ...umns__column-width__vue__example3.vue.json |   2 +-
 ...umns__column-width__vue__example4.vue.json |   2 +-
 ...umns__column-width__vue__example5.vue.json |   2 +-
 ...umns__column-width__vue__example6.vue.json |   2 +-
 ...umns__column-width__vue__example7.vue.json |   2 +-
 ...react-hot-column__react__example1.tsx.json |   2 +-
 ...react-hot-column__react__example3.tsx.json |   2 +-
 ...uration-options__angular__example1.ts.json |   2 +-
 ...uration-options__angular__example2.ts.json |   2 +-
 ...uration-options__angular__example3.ts.json |   2 +-
 ...uration-options__angular__example4.ts.json |   2 +-
 ...uration-options__angular__example6.ts.json |   2 +-
 ...tion-options__javascript__example1.js.json |   2 +-
 ...tion-options__javascript__example1.ts.json |   2 +-
 ...tion-options__javascript__example2.js.json |   2 +-
 ...tion-options__javascript__example2.ts.json |   2 +-
 ...tion-options__javascript__example3.js.json |   2 +-
 ...tion-options__javascript__example3.ts.json |   2 +-
 ...tion-options__javascript__example4.js.json |   2 +-
 ...tion-options__javascript__example4.ts.json |   2 +-
 ...tion-options__javascript__example5.js.json |   2 +-
 ...tion-options__javascript__example5.ts.json |   2 +-
 ...tion-options__javascript__example6.js.json |   2 +-
 ...tion-options__javascript__example6.ts.json |   2 +-
 ...guration-options__react__example1.tsx.json |   2 +-
 ...guration-options__react__example2.tsx.json |   2 +-
 ...guration-options__react__example3.tsx.json |   2 +-
 ...guration-options__react__example4.tsx.json |   2 +-
 ...guration-options__react__example6.tsx.json |   2 +-
 ...figuration-options__vue__example1.vue.json |   2 +-
 ...figuration-options__vue__example2.vue.json |   2 +-
 ...figuration-options__vue__example3.vue.json |   2 +-
 ...figuration-options__vue__example4.vue.json |   2 +-
 ...figuration-options__vue__example6.vue.json |   2 +-
 ...__collaboration__angular__example1.ts.json |   2 +-
 ...ollaboration__javascript__example1.js.json |   2 +-
 ...ollaboration__javascript__example1.ts.json |   2 +-
 ...t__collaboration__react__example1.tsx.json |   2 +-
 ...ent__collaboration__vue__example1.vue.json |   2 +-
 ..._dialog__dialog__angular__example1.ts.json |   2 +-
 ..._dialog__dialog__angular__example2.ts.json |   2 +-
 ..._dialog__dialog__angular__example3.ts.json |   2 +-
 ..._dialog__dialog__angular__example4.ts.json |   2 +-
 ..._dialog__dialog__angular__example5.ts.json |   2 +-
 ..._dialog__dialog__angular__example6.ts.json |   2 +-
 ..._dialog__dialog__angular__example7.ts.json |   2 +-
 ..._dialog__dialog__angular__example8.ts.json |   2 +-
 ...alog__dialog__javascript__example1.js.json |   2 +-
 ...alog__dialog__javascript__example1.ts.json |   2 +-
 ...alog__dialog__javascript__example2.js.json |   2 +-
 ...alog__dialog__javascript__example2.ts.json |   2 +-
 ...alog__dialog__javascript__example3.js.json |   2 +-
 ...alog__dialog__javascript__example3.ts.json |   2 +-
 ...alog__dialog__javascript__example4.js.json |   2 +-
 ...alog__dialog__javascript__example4.ts.json |   2 +-
 ...alog__dialog__javascript__example5.js.json |   2 +-
 ...alog__dialog__javascript__example5.ts.json |   2 +-
 ...alog__dialog__javascript__example6.js.json |   2 +-
 ...alog__dialog__javascript__example6.ts.json |   2 +-
 ...alog__dialog__javascript__example7.js.json |   2 +-
 ...alog__dialog__javascript__example7.ts.json |   2 +-
 ...alog__dialog__javascript__example8.js.json |   2 +-
 ...alog__dialog__javascript__example8.ts.json |   2 +-
 ...__dialog__dialog__react__example1.tsx.json |   2 +-
 ...__dialog__dialog__react__example2.tsx.json |   2 +-
 ...__dialog__dialog__react__example3.tsx.json |   2 +-
 ...__dialog__dialog__react__example4.tsx.json |   2 +-
 ...__dialog__dialog__react__example5.tsx.json |   2 +-
 ...__dialog__dialog__react__example6.tsx.json |   2 +-
 ...__dialog__dialog__react__example7.tsx.json |   2 +-
 ...__dialog__dialog__react__example8.tsx.json |   2 +-
 ...es__dialog__dialog__vue__example1.vue.json |   2 +-
 ...es__dialog__dialog__vue__example2.vue.json |   2 +-
 ...es__dialog__dialog__vue__example3.vue.json |   2 +-
 ...es__dialog__dialog__vue__example4.vue.json |   2 +-
 ...es__dialog__dialog__vue__example5.vue.json |   2 +-
 ...es__dialog__dialog__vue__example6.vue.json |   2 +-
 ...es__dialog__dialog__vue__example7.vue.json |   2 +-
 ...es__dialog__dialog__vue__example8.vue.json |   2 +-
 ...dialog__loading__angular__example1.ts.json |   2 +-
 ...dialog__loading__angular__example2.ts.json |   2 +-
 ...dialog__loading__angular__example3.ts.json |   2 +-
 ...dialog__loading__angular__example4.ts.json |   2 +-
 ...log__loading__javascript__example1.js.json |   2 +-
 ...log__loading__javascript__example1.ts.json |   2 +-
 ...log__loading__javascript__example2.js.json |   2 +-
 ...log__loading__javascript__example2.ts.json |   2 +-
 ...log__loading__javascript__example3.js.json |   2 +-
 ...log__loading__javascript__example3.ts.json |   2 +-
 ...log__loading__javascript__example4.js.json |   2 +-
 ...log__loading__javascript__example4.ts.json |   2 +-
 ..._dialog__loading__react__example1.tsx.json |   2 +-
 ..._dialog__loading__react__example2.tsx.json |   2 +-
 ..._dialog__loading__react__example3.tsx.json |   2 +-
 ..._dialog__loading__react__example4.tsx.json |   2 +-
 ...s__dialog__loading__vue__example1.vue.json |   2 +-
 ...s__dialog__loading__vue__example2.vue.json |   2 +-
 ...s__dialog__loading__vue__example3.vue.json |   2 +-
 ...s__dialog__loading__vue__example4.vue.json |   2 +-
 ...g__notification__angular__example1.ts.json |   2 +-
 ...g__notification__angular__example2.ts.json |   2 +-
 ...notification__javascript__example1.js.json |   2 +-
 ...notification__javascript__example1.ts.json |   2 +-
 ...notification__javascript__example2.js.json |   2 +-
 ...notification__javascript__example2.ts.json |   2 +-
 ...og__notification__react__example1.tsx.json |   2 +-
 ...og__notification__react__example2.tsx.json |   2 +-
 ...alog__notification__vue__example1.vue.json |   2 +-
 ...alog__notification__vue__example2.vue.json |   2 +-
 ..._angular__example-custom-functions.ts.json |   2 +-
 ...ula-calculation__angular__example1.ts.json |   2 +-
 ...ula-calculation__angular__example2.ts.json |   2 +-
 ...ula-calculation__angular__example3.ts.json |   2 +-
 ...ula-calculation__angular__example4.ts.json |   2 +-
 ...vascript__example-custom-functions.js.json |   2 +-
 ...vascript__example-custom-functions.ts.json |   2 +-
 ...ion__javascript__example-data-grid.js.json |   2 +-
 ...ion__javascript__example-data-grid.ts.json |   2 +-
 ...script__example-named-expressions1.js.json |   2 +-
 ...script__example-named-expressions1.ts.json |   2 +-
 ...script__example-named-expressions2.js.json |   2 +-
 ...script__example-named-expressions2.ts.json |   2 +-
 ...-calculation__javascript__example1.js.json |   2 +-
 ...-calculation__javascript__example1.ts.json |   2 +-
 ...__react__example-custom-functions.tsx.json |   2 +-
 ...ulation__react__example-data-grid.tsx.json |   2 +-
 ...react__example-named-expressions1.tsx.json |   2 +-
 ...react__example-named-expressions2.tsx.json |   2 +-
 ...mula-calculation__react__example1.tsx.json |   2 +-
 ...on__vue__example-custom-functions.vue.json |   2 +-
 ...lculation__vue__example-data-grid.vue.json |   2 +-
 ...__vue__example-named-expressions1.vue.json |   2 +-
 ...__vue__example-named-expressions2.vue.json |   2 +-
 ...ormula-calculation__vue__example1.vue.json |   2 +-
 ...ar-hot-instance__angular__example1.ts.json |   2 +-
 ...binding-to-data__angular__example1.ts.json |   2 +-
 ...inding-to-data__angular__example10.ts.json |   2 +-
 ...inding-to-data__angular__example11.ts.json |   2 +-
 ...binding-to-data__angular__example2.ts.json |   2 +-
 ...binding-to-data__angular__example3.ts.json |   2 +-
 ...binding-to-data__angular__example4.ts.json |   2 +-
 ...binding-to-data__angular__example5.ts.json |   2 +-
 ...binding-to-data__angular__example6.ts.json |   2 +-
 ...binding-to-data__angular__example7.ts.json |   2 +-
 ...binding-to-data__angular__example9.ts.json |   2 +-
 ...ding-to-data__javascript__example1.js.json |   2 +-
 ...ding-to-data__javascript__example1.ts.json |   2 +-
 ...ing-to-data__javascript__example10.js.json |   2 +-
 ...ing-to-data__javascript__example10.ts.json |   2 +-
 ...ing-to-data__javascript__example11.js.json |   2 +-
 ...ing-to-data__javascript__example11.ts.json |   2 +-
 ...ding-to-data__javascript__example2.js.json |   2 +-
 ...ding-to-data__javascript__example2.ts.json |   2 +-
 ...ding-to-data__javascript__example3.js.json |   2 +-
 ...ding-to-data__javascript__example3.ts.json |   2 +-
 ...ding-to-data__javascript__example4.js.json |   2 +-
 ...ding-to-data__javascript__example4.ts.json |   2 +-
 ...ding-to-data__javascript__example5.js.json |   2 +-
 ...ding-to-data__javascript__example5.ts.json |   2 +-
 ...ding-to-data__javascript__example6.js.json |   2 +-
 ...ding-to-data__javascript__example6.ts.json |   2 +-
 ...ding-to-data__javascript__example7.js.json |   2 +-
 ...ding-to-data__javascript__example7.ts.json |   2 +-
 ...ding-to-data__javascript__example9.js.json |   2 +-
 ...ding-to-data__javascript__example9.ts.json |   2 +-
 ..._binding-to-data__react__example1.tsx.json |   2 +-
 ...binding-to-data__react__example10.tsx.json |   2 +-
 ...binding-to-data__react__example11.tsx.json |   2 +-
 ..._binding-to-data__react__example2.tsx.json |   2 +-
 ..._binding-to-data__react__example3.tsx.json |   2 +-
 ..._binding-to-data__react__example4.tsx.json |   2 +-
 ..._binding-to-data__react__example5.tsx.json |   2 +-
 ..._binding-to-data__react__example6.tsx.json |   2 +-
 ..._binding-to-data__react__example7.tsx.json |   2 +-
 ..._binding-to-data__react__example9.tsx.json |   2 +-
 ...d__binding-to-data__vue__example1.vue.json |   2 +-
 ...__binding-to-data__vue__example10.vue.json |   2 +-
 ...__binding-to-data__vue__example11.vue.json |   2 +-
 ...d__binding-to-data__vue__example2.vue.json |   2 +-
 ...d__binding-to-data__vue__example3.vue.json |   2 +-
 ...d__binding-to-data__vue__example4.vue.json |   2 +-
 ...d__binding-to-data__vue__example5.vue.json |   2 +-
 ...d__binding-to-data__vue__example6.vue.json |   2 +-
 ...d__binding-to-data__vue__example7.vue.json |   2 +-
 ...d__binding-to-data__vue__example9.vue.json |   2 +-
 ...-id-class-style__angular__example1.ts.json |   2 +-
 ...-class-style__javascript__example1.js.json |   2 +-
 ...-class-style__javascript__example1.ts.json |   2 +-
 ...m-id-class-style__react__example1.tsx.json |   2 +-
 ...tom-id-class-style__vue__example1.vue.json |   2 +-
 ...g-started__demo__angular__example1.ts.json |   2 +-
 ...started__demo__javascript__example.js.json |   2 +-
 ...ng-started__demo__react__example2.tsx.json |   2 +-
 ...ting-started__demo__vue__example3.vue.json |   2 +-
 ...vents-and-hooks__angular__example2.ts.json |   2 +-
 ...vents-and-hooks__angular__example3.ts.json |   2 +-
 ...ts-and-hooks__javascript__example1.js.json |   2 +-
 ...ts-and-hooks__javascript__example2.js.json |   2 +-
 ...ts-and-hooks__javascript__example2.ts.json |   2 +-
 ...events-and-hooks__react__example2.tsx.json |   2 +-
 ...events-and-hooks__react__example3.tsx.json |   2 +-
 ...__events-and-hooks__vue__example2.vue.json |   2 +-
 ...__events-and-hooks__vue__example3.vue.json |   2 +-
 ...arted__grid-size__angular__example.ts.json |   2 +-
 ...rted__grid-size__angular__example2.ts.json |   2 +-
 ...ed__grid-size__javascript__example.js.json |   2 +-
 ...ed__grid-size__javascript__example.ts.json |   2 +-
 ...d__grid-size__javascript__example2.js.json |   2 +-
 ...d__grid-size__javascript__example2.ts.json |   2 +-
 ...tarted__grid-size__react__example.tsx.json |   2 +-
 ...arted__grid-size__react__example2.tsx.json |   2 +-
 ...-started__grid-size__vue__example.vue.json |   2 +-
 ...started__grid-size__vue__example2.vue.json |   2 +-
 ...d__installation__angular__example1.ts.json |   2 +-
 ...installation__javascript__example1.js.json |   2 +-
 ...installation__javascript__example1.ts.json |   2 +-
 ...ed__installation__react__example1.tsx.json |   2 +-
 ...rted__installation__vue__example1.vue.json |   2 +-
 ...d__react-methods__react__example1.tsx.json |   2 +-
 ...ted__react-redux__react__example1.tsx.json |   2 +-
 ...ted__react-redux__react__example6.tsx.json |   2 +-
 ...ed__saving-data__angular__example1.ts.json |   2 +-
 ..._saving-data__javascript__example1.js.json |   2 +-
 ..._saving-data__javascript__example1.ts.json |   2 +-
 ...ted__saving-data__react__example1.tsx.json |   2 +-
 ...arted__saving-data__vue__example1.vue.json |   2 +-
 ...erver-side-data__angular__example1.ts.json |   2 +-
 ...er-side-data__javascript__example1.js.json |   2 +-
 ...er-side-data__javascript__example1.ts.json |   2 +-
 ...server-side-data__react__example1.tsx.json |   2 +-
 ...__server-side-data__vue__example1.vue.json |   2 +-
 ...d__vue3-hot-column__vue__example1.vue.json |   2 +-
 ...d__vue3-hot-column__vue__example2.vue.json |   2 +-
 ...d__vue3-hot-column__vue__example3.vue.json |   2 +-
 ...d__vue3-hot-column__vue__example4.vue.json |   2 +-
 ...d__vue3-hot-column__vue__example5.vue.json |   2 +-
 ...vue3-hot-reference__vue__example1.vue.json |   2 +-
 ...tarted__vue3-pinia__vue__example1.vue.json |   2 +-
 ...started__vue3-vuex__vue__example1.vue.json |   2 +-
 ...ation__language__angular__example1.ts.json |   2 +-
 ...on__language__javascript__example1.js.json |   2 +-
 ...on__language__javascript__example1.ts.json |   2 +-
 ...zation__language__react__example1.tsx.json |   2 +-
 ...lization__language__vue__example1.vue.json |   2 +-
 ...ayout-direction__angular__example1.ts.json |   2 +-
 ...ayout-direction__angular__example2.ts.json |   2 +-
 ...ayout-direction__angular__example3.ts.json |   2 +-
 ...ayout-direction__angular__example4.ts.json |   2 +-
 ...ayout-direction__angular__example5.ts.json |   2 +-
 ...ut-direction__javascript__example1.js.json |   2 +-
 ...ut-direction__javascript__example1.ts.json |   2 +-
 ...ut-direction__javascript__example2.js.json |   2 +-
 ...ut-direction__javascript__example2.ts.json |   2 +-
 ...ut-direction__javascript__example3.js.json |   2 +-
 ...ut-direction__javascript__example3.ts.json |   2 +-
 ...ut-direction__javascript__example4.js.json |   2 +-
 ...ut-direction__javascript__example4.ts.json |   2 +-
 ...ut-direction__javascript__example5.js.json |   2 +-
 ...ut-direction__javascript__example5.ts.json |   2 +-
 ...layout-direction__react__example1.tsx.json |   2 +-
 ...layout-direction__react__example2.tsx.json |   2 +-
 ...layout-direction__react__example3.tsx.json |   2 +-
 ...layout-direction__react__example4.tsx.json |   2 +-
 ...layout-direction__react__example5.tsx.json |   2 +-
 ...__layout-direction__vue__example1.vue.json |   2 +-
 ...__layout-direction__vue__example2.vue.json |   2 +-
 ...__layout-direction__vue__example3.vue.json |   2 +-
 ...__layout-direction__vue__example4.vue.json |   2 +-
 ...__layout-direction__vue__example5.vue.json |   2 +-
 ...ustom-shortcuts__angular__example1.ts.json |   2 +-
 ...om-shortcuts__javascript__example1.js.json |   2 +-
 ...om-shortcuts__javascript__example1.ts.json |   2 +-
 ...custom-shortcuts__react__example1.tsx.json |   2 +-
 ...__custom-shortcuts__vue__example1.vue.json |   2 +-
 ...n__focus-scopes__angular__example1.ts.json |   2 +-
 ...n__focus-scopes__angular__example2.ts.json |   2 +-
 ...focus-scopes__javascript__example1.js.json |   2 +-
 ...focus-scopes__javascript__example1.ts.json |   2 +-
 ...focus-scopes__javascript__example2.js.json |   2 +-
 ...focus-scopes__javascript__example2.ts.json |   2 +-
 ...on__focus-scopes__react__example1.tsx.json |   2 +-
 ...on__focus-scopes__react__example2.tsx.json |   2 +-
 ...tion__focus-scopes__vue__example1.vue.json |   2 +-
 ...tion__focus-scopes__vue__example2.vue.json |   2 +-
 ...earching-values__angular__example1.ts.json |   2 +-
 ...earching-values__angular__example2.ts.json |   2 +-
 ...earching-values__angular__example3.ts.json |   2 +-
 ...earching-values__angular__example4.ts.json |   2 +-
 ...ching-values__javascript__example1.js.json |   2 +-
 ...ching-values__javascript__example1.ts.json |   2 +-
 ...ching-values__javascript__example2.js.json |   2 +-
 ...ching-values__javascript__example2.ts.json |   2 +-
 ...ching-values__javascript__example3.js.json |   2 +-
 ...ching-values__javascript__example3.ts.json |   2 +-
 ...ching-values__javascript__example4.js.json |   2 +-
 ...ching-values__javascript__example4.ts.json |   2 +-
 ...searching-values__react__example1.tsx.json |   2 +-
 ...searching-values__react__example2.tsx.json |   2 +-
 ...searching-values__react__example3.tsx.json |   2 +-
 ...searching-values__react__example4.tsx.json |   2 +-
 ...__searching-values__vue__example1.vue.json |   2 +-
 ...__searching-values__vue__example2.vue.json |   2 +-
 ...__searching-values__vue__example3.vue.json |   2 +-
 ...__searching-values__vue__example4.vue.json |   2 +-
 ...atch-operations__angular__example1.ts.json |   2 +-
 ...h-operations__javascript__example1.js.json |   2 +-
 ...h-operations__javascript__example1.ts.json |   2 +-
 ...batch-operations__react__example1.tsx.json |   2 +-
 ...__batch-operations__vue__example1.vue.json |   2 +-
 ...s__row-freezing__angular__example1.ts.json |   2 +-
 ...row-freezing__javascript__example1.js.json |   2 +-
 ...row-freezing__javascript__example1.ts.json |   2 +-
 ...ws__row-freezing__react__example1.tsx.json |   2 +-
 ...rows__row-freezing__vue__example1.vue.json |   2 +-
 ...ows__row-header__angular__example1.ts.json |   2 +-
 ...ows__row-header__angular__example2.ts.json |   2 +-
 ...ows__row-header__angular__example3.ts.json |   2 +-
 ...ows__row-header__angular__example4.ts.json |   2 +-
 ...ows__row-header__angular__example5.ts.json |   2 +-
 ...__row-header__javascript__example1.js.json |   2 +-
 ...__row-header__javascript__example1.ts.json |   2 +-
 ...__row-header__javascript__example2.js.json |   2 +-
 ...__row-header__javascript__example2.ts.json |   2 +-
 ...__row-header__javascript__example3.js.json |   2 +-
 ...__row-header__javascript__example3.ts.json |   2 +-
 ...__row-header__javascript__example4.js.json |   2 +-
 ...__row-header__javascript__example4.ts.json |   2 +-
 ...__row-header__javascript__example5.js.json |   2 +-
 ...__row-header__javascript__example5.ts.json |   2 +-
 ...rows__row-header__react__example1.tsx.json |   2 +-
 ...rows__row-header__react__example2.tsx.json |   2 +-
 ...rows__row-header__react__example3.tsx.json |   2 +-
 ...rows__row-header__react__example4.tsx.json |   2 +-
 ...rows__row-header__react__example5.tsx.json |   2 +-
 ...__rows__row-header__vue__example1.vue.json |   2 +-
 ...__rows__row-header__vue__example2.vue.json |   2 +-
 ...__rows__row-header__vue__example3.vue.json |   2 +-
 ...__rows__row-header__vue__example4.vue.json |   2 +-
 ...__rows__row-header__vue__example5.vue.json |   2 +-
 ...ows__row-height__angular__example1.ts.json |   2 +-
 ...ows__row-height__angular__example2.ts.json |   2 +-
 ...ows__row-height__angular__example3.ts.json |   2 +-
 ...ows__row-height__angular__example4.ts.json |   2 +-
 ...ows__row-height__angular__example5.ts.json |   1 +
 ...__row-height__javascript__example1.js.json |   2 +-
 ...__row-height__javascript__example1.ts.json |   2 +-
 ...__row-height__javascript__example2.js.json |   2 +-
 ...__row-height__javascript__example2.ts.json |   2 +-
 ...__row-height__javascript__example3.js.json |   2 +-
 ...__row-height__javascript__example3.ts.json |   2 +-
 ...__row-height__javascript__example4.js.json |   2 +-
 ...__row-height__javascript__example4.ts.json |   2 +-
 ...__row-height__javascript__example5.js.json |   1 +
 ...__row-height__javascript__example5.ts.json |   1 +
 ...rows__row-height__react__example1.tsx.json |   2 +-
 ...rows__row-height__react__example2.tsx.json |   2 +-
 ...rows__row-height__react__example3.tsx.json |   2 +-
 ...rows__row-height__react__example4.tsx.json |   2 +-
 ...rows__row-height__react__example5.tsx.json |   1 +
 ...__rows__row-height__vue__example1.vue.json |   2 +-
 ...__rows__row-height__vue__example2.vue.json |   2 +-
 ...__rows__row-height__vue__example3.vue.json |   2 +-
 ...__rows__row-height__vue__example4.vue.json |   2 +-
 ...__rows__row-height__vue__example5.vue.json |   1 +
 ...ows__row-hiding__angular__example1.ts.json |   2 +-
 ...ows__row-hiding__angular__example2.ts.json |   2 +-
 ...ows__row-hiding__angular__example3.ts.json |   2 +-
 ...ows__row-hiding__angular__example4.ts.json |   2 +-
 ...ows__row-hiding__angular__example5.ts.json |   2 +-
 ...ows__row-hiding__angular__example6.ts.json |   2 +-
 ...__row-hiding__javascript__example1.js.json |   2 +-
 ...__row-hiding__javascript__example1.ts.json |   2 +-
 ...__row-hiding__javascript__example2.js.json |   2 +-
 ...__row-hiding__javascript__example2.ts.json |   2 +-
 ...__row-hiding__javascript__example3.js.json |   2 +-
 ...__row-hiding__javascript__example3.ts.json |   2 +-
 ...__row-hiding__javascript__example4.js.json |   2 +-
 ...__row-hiding__javascript__example4.ts.json |   2 +-
 ...__row-hiding__javascript__example5.js.json |   2 +-
 ...__row-hiding__javascript__example5.ts.json |   2 +-
 ...__row-hiding__javascript__example6.js.json |   2 +-
 ...__row-hiding__javascript__example6.ts.json |   2 +-
 ...rows__row-hiding__react__example1.tsx.json |   2 +-
 ...rows__row-hiding__react__example2.tsx.json |   2 +-
 ...rows__row-hiding__react__example3.tsx.json |   2 +-
 ...rows__row-hiding__react__example4.tsx.json |   2 +-
 ...rows__row-hiding__react__example5.tsx.json |   2 +-
 ...rows__row-hiding__react__example6.tsx.json |   2 +-
 ...__rows__row-hiding__vue__example1.vue.json |   2 +-
 ...__rows__row-hiding__vue__example2.vue.json |   2 +-
 ...__rows__row-hiding__vue__example3.vue.json |   2 +-
 ...__rows__row-hiding__vue__example4.vue.json |   2 +-
 ...__rows__row-hiding__vue__example5.vue.json |   2 +-
 ...__rows__row-hiding__vue__example6.vue.json |   2 +-
 ...ows__row-moving__angular__example1.ts.json |   2 +-
 ...__row-moving__javascript__example1.js.json |   2 +-
 ...__row-moving__javascript__example1.ts.json |   2 +-
 ...rows__row-moving__react__example1.tsx.json |   2 +-
 ...__rows__row-moving__vue__example1.vue.json |   2 +-
 ...ow-parent-child__angular__example1.ts.json |   2 +-
 ...ow-parent-child__angular__example2.ts.json |   2 +-
 ...ow-parent-child__angular__example3.ts.json |   2 +-
 ...parent-child__javascript__example1.js.json |   2 +-
 ...parent-child__javascript__example1.ts.json |   2 +-
 ...parent-child__javascript__example2.js.json |   2 +-
 ...parent-child__javascript__example2.ts.json |   2 +-
 ...parent-child__javascript__example3.js.json |   2 +-
 ...parent-child__javascript__example3.ts.json |   2 +-
 ...row-parent-child__react__example1.tsx.json |   2 +-
 ...row-parent-child__react__example2.tsx.json |   2 +-
 ...row-parent-child__react__example3.tsx.json |   2 +-
 ...__row-parent-child__vue__example1.vue.json |   2 +-
 ...__row-parent-child__vue__example2.vue.json |   2 +-
 ...__row-parent-child__vue__example3.vue.json |   2 +-
 ...w-prepopulating__angular__example1.ts.json |   2 +-
 ...w-prepopulating__angular__example2.ts.json |   2 +-
 ...w-prepopulating__angular__example3.ts.json |   2 +-
 ...repopulating__javascript__example1.js.json |   2 +-
 ...repopulating__javascript__example1.ts.json |   2 +-
 ...repopulating__javascript__example2.js.json |   2 +-
 ...repopulating__javascript__example2.ts.json |   2 +-
 ...repopulating__javascript__example3.js.json |   2 +-
 ...repopulating__javascript__example3.ts.json |   2 +-
 ...ow-prepopulating__react__example1.tsx.json |   2 +-
 ...ow-prepopulating__react__example2.tsx.json |   2 +-
 ...ow-prepopulating__react__example3.tsx.json |   2 +-
 ..._row-prepopulating__vue__example1.vue.json |   2 +-
 ..._row-prepopulating__vue__example2.vue.json |   2 +-
 ..._row-prepopulating__vue__example3.vue.json |   2 +-
 ...s__row-trimming__angular__example1.ts.json |   2 +-
 ...row-trimming__javascript__example1.js.json |   2 +-
 ...row-trimming__javascript__example1.ts.json |   2 +-
 ...ws__row-trimming__react__example1.tsx.json |   2 +-
 ...rows__row-trimming__vue__example1.vue.json |   2 +-
 ...-virtualization__angular__example1.ts.json |   2 +-
 ...rtualization__javascript__example1.js.json |   2 +-
 ...rtualization__javascript__example1.ts.json |   2 +-
 ...w-virtualization__react__example1.tsx.json |   2 +-
 ...row-virtualization__vue__example1.vue.json |   2 +-
 ...rows-pagination__angular__example1.ts.json |   2 +-
 ...rows-pagination__angular__example2.ts.json |   2 +-
 ...rows-pagination__angular__example3.ts.json |   2 +-
 ...rows-pagination__angular__example4.ts.json |   2 +-
 ...rows-pagination__angular__example5.ts.json |   2 +-
 ...rows-pagination__angular__example6.ts.json |   2 +-
 ...s-pagination__javascript__example1.js.json |   2 +-
 ...s-pagination__javascript__example1.ts.json |   2 +-
 ...s-pagination__javascript__example2.js.json |   2 +-
 ...s-pagination__javascript__example2.ts.json |   2 +-
 ...s-pagination__javascript__example3.js.json |   2 +-
 ...s-pagination__javascript__example3.ts.json |   2 +-
 ...s-pagination__javascript__example4.js.json |   2 +-
 ...s-pagination__javascript__example4.ts.json |   2 +-
 ...s-pagination__javascript__example5.js.json |   2 +-
 ...s-pagination__javascript__example5.ts.json |   2 +-
 ...s-pagination__javascript__example6.js.json |   2 +-
 ...s-pagination__javascript__example6.ts.json |   2 +-
 ..._rows-pagination__react__example1.tsx.json |   2 +-
 ..._rows-pagination__react__example2.tsx.json |   2 +-
 ..._rows-pagination__react__example3.tsx.json |   2 +-
 ..._rows-pagination__react__example4.tsx.json |   2 +-
 ..._rows-pagination__react__example5.tsx.json |   2 +-
 ..._rows-pagination__react__example6.tsx.json |   2 +-
 ...s__rows-pagination__vue__example1.vue.json |   2 +-
 ...s__rows-pagination__vue__example2.vue.json |   2 +-
 ...s__rows-pagination__vue__example3.vue.json |   2 +-
 ...s__rows-pagination__vue__example4.vue.json |   2 +-
 ...s__rows-pagination__vue__example5.vue.json |   2 +-
 ...s__rows-pagination__vue__example6.vue.json |   2 +-
 ...s__rows-sorting__angular__example1.ts.json |   2 +-
 ...__rows-sorting__angular__example10.ts.json |   2 +-
 ...__rows-sorting__angular__example11.ts.json |   2 +-
 ...__rows-sorting__angular__example12.ts.json |   2 +-
 ...s__rows-sorting__angular__example2.ts.json |   2 +-
 ...s__rows-sorting__angular__example3.ts.json |   2 +-
 ...s__rows-sorting__angular__example4.ts.json |   2 +-
 ...s__rows-sorting__angular__example5.ts.json |   2 +-
 ...s__rows-sorting__angular__example6.ts.json |   2 +-
 ...s__rows-sorting__angular__example7.ts.json |   2 +-
 ...s__rows-sorting__angular__example8.ts.json |   2 +-
 ...s__rows-sorting__angular__example9.ts.json |   2 +-
 ...javascript__exampleCustomSortIcons.js.json |   2 +-
 ...javascript__exampleCustomSortIcons.ts.json |   2 +-
 ...avascript__exampleCustomSortIcons3.js.json |   2 +-
 ...avascript__exampleCustomSortIcons3.ts.json |   2 +-
 ...pt__exampleEnableSortingForColumns.js.json |   2 +-
 ...pt__exampleEnableSortingForColumns.ts.json |   2 +-
 ...ipt__exampleExcludeRowsFromSorting.js.json |   2 +-
 ...ipt__exampleExcludeRowsFromSorting.ts.json |   2 +-
 ...avascript__exampleInitialSortOrder.js.json |   2 +-
 ...avascript__exampleInitialSortOrder.ts.json |   2 +-
 ...ting__javascript__exampleSortByAPI.js.json |   2 +-
 ...ting__javascript__exampleSortByAPI.ts.json |   2 +-
 ...t__exampleSortByAPIMultipleColumns.js.json |   2 +-
 ...t__exampleSortByAPIMultipleColumns.ts.json |   2 +-
 ...ript__exampleSortByMultipleColumns.js.json |   2 +-
 ...ript__exampleSortByMultipleColumns.ts.json |   2 +-
 ...ascript__exampleSortDifferentTypes.js.json |   2 +-
 ...ascript__exampleSortDifferentTypes.ts.json |   2 +-
 ...__javascript__exampleSortFixedRows.js.json |   2 +-
 ...__javascript__exampleSortFixedRows.ts.json |   2 +-
 ...ng__javascript__exampleSortingDemo.js.json |   2 +-
 ...ng__javascript__exampleSortingDemo.ts.json |   2 +-
 ...g__javascript__exampleSortingHooks.js.json |   2 +-
 ...g__javascript__exampleSortingHooks.ts.json |   2 +-
 ...ng__react__exampleCustomSortIcons.tsx.json |   2 +-
 ...g__react__exampleCustomSortIcons3.tsx.json |   2 +-
 ...t__exampleEnableSortingForColumns.tsx.json |   2 +-
 ...ct__exampleExcludeRowsFromSorting.tsx.json |   2 +-
 ...g__react__exampleInitialSortOrder.tsx.json |   2 +-
 ...-sorting__react__exampleSortByAPI.tsx.json |   2 +-
 ...__exampleSortByAPIMultipleColumns.tsx.json |   2 +-
 ...act__exampleSortByMultipleColumns.tsx.json |   2 +-
 ..._react__exampleSortDifferentTypes.tsx.json |   2 +-
 ...ting__react__exampleSortFixedRows.tsx.json |   2 +-
 ...orting__react__exampleSortingDemo.tsx.json |   2 +-
 ...rting__react__exampleSortingHooks.tsx.json |   2 +-
 ...ting__vue__exampleCustomSortIcons.vue.json |   2 +-
 ...ing__vue__exampleCustomSortIcons3.vue.json |   2 +-
 ...e__exampleEnableSortingForColumns.vue.json |   2 +-
 ...ue__exampleExcludeRowsFromSorting.vue.json |   2 +-
 ...ing__vue__exampleInitialSortOrder.vue.json |   2 +-
 ...ws-sorting__vue__exampleSortByAPI.vue.json |   2 +-
 ...__exampleSortByAPIMultipleColumns.vue.json |   2 +-
 ...vue__exampleSortByMultipleColumns.vue.json |   2 +-
 ...g__vue__exampleSortDifferentTypes.vue.json |   2 +-
 ...orting__vue__exampleSortFixedRows.vue.json |   2 +-
 ...-sorting__vue__exampleSortingDemo.vue.json |   2 +-
 ...sorting__vue__exampleSortingHooks.vue.json |   2 +-
 ...e-customization__angular__example1.ts.json |   2 +-
 ...e-customization__angular__example2.ts.json |   2 +-
 ...ustomization__javascript__example1.js.json |   2 +-
 ...ustomization__javascript__example1.ts.json |   2 +-
 ...ustomization__javascript__example2.js.json |   2 +-
 ...ustomization__javascript__example2.ts.json |   2 +-
 ...me-customization__react__example1.tsx.json |   2 +-
 ...me-customization__react__example2.tsx.json |   2 +-
 ...heme-customization__vue__example1.vue.json |   2 +-
 ...heme-customization__vue__example2.vue.json |   2 +-
 ...styling__themes__angular__example1.ts.json |   2 +-
 ...__themes__javascript__exampleTheme.js.json |   2 +-
 ...__themes__javascript__exampleTheme.ts.json |   2 +-
 ...ling__themes__react__exampleTheme.tsx.json |   2 +-
 ...tyling__themes__vue__exampleTheme.vue.json |   2 +-
 .../public/docs-examples/next/manifest.json   | 164 +++++++++++++++++-
 ...lity__aria-grid__angular__example1.ts.json |   2 +-
 ...y__aria-grid__javascript__example1.js.json |   2 +-
 ...ility__aria-grid__react__example1.tsx.json |   2 +-
 ...board-shortcuts__angular__example1.ts.json |   2 +-
 ...rd-shortcuts__javascript__example1.js.json |   2 +-
 ...yboard-shortcuts__react__example1.tsx.json |   2 +-
 ...s__color-picker__angular__example1.ts.json |   2 +-
 ...color-picker__javascript__example1.js.json |   2 +-
 ...color-picker__javascript__example1.ts.json |   2 +-
 ...es__color-picker__react__example1.tsx.json |   2 +-
 ..._colorful-picker__react__example1.tsx.json |   2 +-
 ...__feedback-react__react__example1.tsx.json |   2 +-
 ...types__feedback__angular__example1.ts.json |   2 +-
 ...es__feedback__javascript__example1.js.json |   2 +-
 ...es__feedback__javascript__example1.ts.json |   2 +-
 ...-types__feedback__react__example1.tsx.json |   2 +-
 ...ypes__flatpickr__angular__example1.ts.json |   2 +-
 ...s__flatpickr__javascript__example1.js.json |   2 +-
 ...s__flatpickr__javascript__example1.ts.json |   2 +-
 ...types__flatpickr__react__example1.tsx.json |   2 +-
 ...-picker-angular__angular__example1.ts.json |   2 +-
 ...epicker-angular__angular__example1.ts.json |   2 +-
 ...eedback-angular__angular__example1.ts.json |   2 +-
 ...-rating-angular__angular__example1.ts.json |   2 +-
 ...es__moment-date__angular__example1.ts.json |   2 +-
 ..._moment-date__javascript__example1.js.json |   2 +-
 ..._moment-date__javascript__example1.ts.json |   2 +-
 ...pes__moment-date__react__example1.tsx.json |   2 +-
 ...es__moment-time__angular__example1.ts.json |   2 +-
 ..._moment-time__javascript__example1.js.json |   2 +-
 ..._moment-time__javascript__example1.ts.json |   2 +-
 ...pes__moment-time__react__example1.tsx.json |   2 +-
 ...l-types__numbro__angular__example1.ts.json |   2 +-
 ...ypes__numbro__javascript__example1.js.json |   2 +-
 ...ypes__numbro__javascript__example1.ts.json |   2 +-
 ...ll-types__numbro__react__example1.tsx.json |   2 +-
 ...-types__pikaday__angular__example1.ts.json |   2 +-
 ...pes__pikaday__javascript__example1.js.json |   2 +-
 ...pes__pikaday__javascript__example1.ts.json |   2 +-
 ...l-types__pikaday__react__example1.tsx.json |   2 +-
 ...ll-types__radio__angular__example1.ts.json |   2 +-
 ...types__radio__javascript__example1.js.json |   2 +-
 ...types__radio__javascript__example1.ts.json |   2 +-
 ...ell-types__radio__react__example1.tsx.json |   2 +-
 ..._cell-types__radio__vue__example1.vue.json |   2 +-
 ...l-types__rating__angular__example1.ts.json |   2 +-
 ...ypes__rating__javascript__example1.js.json |   2 +-
 ...ypes__rating__javascript__example1.ts.json |   2 +-
 ...ll-types__rating__react__example1.tsx.json |   2 +-
 ...es__react-rating__react__example1.tsx.json |   2 +-
 ...lumn-visibility__angular__example1.ts.json |   2 +-
 ...n-visibility__javascript__example1.js.json |   2 +-
 ...n-visibility__javascript__example1.ts.json |   2 +-
 ...olumn-visibility__react__example1.tsx.json |   2 +-
 ..._freeze-columns__angular__example1.ts.json |   2 +-
 ...eeze-columns__javascript__example1.js.json |   2 +-
 ...__freeze-columns__react__example1.tsx.json |   2 +-
 ...umn-object-data__angular__example1.ts.json |   2 +-
 ...-object-data__javascript__example1.js.json |   2 +-
 ...lumn-object-data__react__example1.tsx.json |   2 +-
 ...om-context-menu__angular__example1.ts.json |   2 +-
 ...context-menu__javascript__example1.js.json |   2 +-
 ...tom-context-menu__react__example1.tsx.json |   2 +-
 ..._row-operations__angular__example1.ts.json |   2 +-
 ...w-operations__javascript__example1.js.json |   2 +-
 ...w-operations__javascript__example1.ts.json |   2 +-
 ...__row-operations__react__example1.tsx.json |   2 +-
 ...to-save-backend__angular__example1.ts.json |   2 +-
 ...save-backend__javascript__example1.js.json |   2 +-
 ...save-backend__javascript__example1.ts.json |   2 +-
 ...uto-save-backend__react__example1.tsx.json |   2 +-
 ...ad-data-graphql__angular__example1.ts.json |   2 +-
 ...ad-data-graphql__angular__example2.ts.json |   2 +-
 ...data-graphql__javascript__example1.js.json |   2 +-
 ...data-graphql__javascript__example1.ts.json |   2 +-
 ...data-graphql__javascript__example2.js.json |   2 +-
 ...data-graphql__javascript__example2.ts.json |   2 +-
 ...oad-data-graphql__react__example1.tsx.json |   2 +-
 ...oad-data-graphql__react__example2.tsx.json |   2 +-
 ...d-data-rest-api__angular__example1.ts.json |   2 +-
 ...d-data-rest-api__angular__example2.ts.json |   2 +-
 ...d-data-rest-api__angular__example3.ts.json |   2 +-
 ...ata-rest-api__javascript__example1.js.json |   2 +-
 ...ata-rest-api__javascript__example1.ts.json |   2 +-
 ...ata-rest-api__javascript__example2.js.json |   2 +-
 ...ata-rest-api__javascript__example2.ts.json |   2 +-
 ...ata-rest-api__javascript__example3.js.json |   2 +-
 ...ata-rest-api__javascript__example3.ts.json |   2 +-
 ...ad-data-rest-api__react__example1.tsx.json |   2 +-
 ...ad-data-rest-api__react__example2.tsx.json |   2 +-
 ...ad-data-rest-api__react__example3.tsx.json |   2 +-
 ..._sync-two-grids__angular__example1.ts.json |   2 +-
 ...nc-two-grids__javascript__example1.js.json |   2 +-
 ...nc-two-grids__javascript__example1.ts.json |   2 +-
 ...__sync-two-grids__react__example1.tsx.json |   2 +-
 ...-redo-custom-ui__angular__example1.ts.json |   2 +-
 ...do-custom-ui__javascript__example1.js.json |   2 +-
 ...do-custom-ui__javascript__example1.ts.json |   2 +-
 ...o-redo-custom-ui__react__example1.tsx.json |   2 +-
 ...ndent-dropdowns__angular__example1.ts.json |   2 +-
 ...nt-dropdowns__javascript__example1.js.json |   2 +-
 ...nt-dropdowns__javascript__example1.ts.json |   2 +-
 ...endent-dropdowns__react__example1.tsx.json |   2 +-
 ...n-error-summary__angular__example1.ts.json |   2 +-
 ...rror-summary__javascript__example1.js.json |   2 +-
 ...rror-summary__javascript__example1.ts.json |   2 +-
 ...on-error-summary__react__example1.tsx.json |   2 +-
 ...rnal-search-box__angular__example1.ts.json |   2 +-
 ...l-search-box__javascript__example1.js.json |   2 +-
 ...l-search-box__javascript__example1.ts.json |   2 +-
 ...ernal-search-box__react__example1.tsx.json |   2 +-
 ...-search-matches__angular__example1.ts.json |   2 +-
 ...arch-matches__javascript__example1.js.json |   2 +-
 ...arch-matches__javascript__example1.ts.json |   2 +-
 ...t-search-matches__react__example1.tsx.json |   2 +-
 ...mn-filter-panel__angular__example1.ts.json |   2 +-
 ...filter-panel__javascript__example1.js.json |   2 +-
 ...filter-panel__javascript__example1.ts.json |   2 +-
 ...umn-filter-panel__react__example1.tsx.json |   2 +-
 ...__export-to-pdf__angular__example1.ts.json |   2 +-
 ...xport-to-pdf__javascript__example1.js.json |   2 +-
 ...xport-to-pdf__javascript__example1.ts.json |   2 +-
 ...t__export-to-pdf__react__example1.tsx.json |   2 +-
 ...mport-csv-excel__angular__example1.ts.json |   2 +-
 ...rt-csv-excel__javascript__example1.js.json |   2 +-
 ...rt-csv-excel__javascript__example1.ts.json |   2 +-
 ...import-csv-excel__react__example1.tsx.json |   2 +-
 ...__import-csv-excel__vue__example1.vue.json |   2 +-
 ...e-cell-renderer__angular__example1.ts.json |   2 +-
 ...ell-renderer__javascript__example1.js.json |   2 +-
 ...ell-renderer__javascript__example1.ts.json |   2 +-
 ...ve-cell-renderer__react__example1.tsx.json |   2 +-
 ...e__lazy-loading__angular__example1.ts.json |   2 +-
 ...lazy-loading__javascript__example1.js.json |   2 +-
 ...ce__lazy-loading__react__example1.tsx.json |   2 +-
 ...t-column-layout__angular__example1.ts.json |   2 +-
 ...olumn-layout__javascript__example1.js.json |   2 +-
 ...st-column-layout__react__example1.tsx.json |   2 +-
 ...e__chartjs-sync__angular__example1.ts.json |   2 +-
 ...chartjs-sync__javascript__example1.js.json |   2 +-
 ...chartjs-sync__javascript__example1.ts.json |   2 +-
 ...me__chartjs-sync__react__example1.tsx.json |   2 +-
 ...bsocket-updates__angular__example1.ts.json |   2 +-
 ...cket-updates__javascript__example1.js.json |   2 +-
 ...ebsocket-updates__react__example1.tsx.json |   2 +-
 ...al-row-coloring__angular__example1.ts.json |   2 +-
 ...row-coloring__javascript__example1.js.json |   2 +-
 ...row-coloring__javascript__example1.ts.json |   2 +-
 ...nal-row-coloring__react__example1.tsx.json |   2 +-
 ...zen-summary-row__angular__example1.ts.json |   2 +-
 ...-summary-row__javascript__example1.js.json |   2 +-
 ...-summary-row__javascript__example1.ts.json |   2 +-
 ...ozen-summary-row__react__example1.tsx.json |   2 +-
 ...e-cell-renderer__angular__example1.ts.json |   2 +-
 ...ell-renderer__javascript__example1.js.json |   2 +-
 ...ell-renderer__javascript__example1.ts.json |   2 +-
 ...ne-cell-renderer__react__example1.tsx.json |   2 +-
 .../api/src/docs-taxonomy.generated.ts        |  10 ++
 1559 files changed, 1729 insertions(+), 1549 deletions(-)
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example6.ts.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.js.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.ts.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example6.tsx.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example6.vue.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example5.ts.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.js.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.ts.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example5.tsx.json
 create mode 100644 runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example5.vue.json

diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json
index f2bbc30eb..8998c5699 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessibility · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n    .checkbox-container {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin: 0 -1rem 0 !important;\n      padding: 0 1rem 0.75rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    .checkbox-container > div {\n      display: flex;\n    }\n\n    .checkbox-container > div > label {\n      display: flex;\n      align-items: center;\n      gap: 0.4rem;\n    }\n\n    .external-link {\n      margin-left: 0.5rem;\n      position: relative;\n      top: 2px;\n      color: var(--sl-color-text, #333333);\n    }\n\n    .external-link:hover {\n      color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .option-label {\n      color: var(--sl-color-text, #333333);\n      font-size: var(--sl-text-sm, 0.875rem);\n    }\n\n    /*\n      We want the focus to be around input and label, in order to achieve this,\n      we remove focus from the input and add it to the label (wrapper in this case)\n      we then use the :focus-within pseudo class plus native focus styles\n      https://css-tricks.com/copy-the-browsers-native-focus-styles/\n    */\n    .option-label:focus-within {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    .option-label > input:focus {\n      outline: none;\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n    </style>\n</head>\n<body>\n  <div>\n      \n      <div class=\"example-container\">\n          <div class=\"checkbox-container\">\n            <div>\n              <label class=\"option-label\" for=\"enable-tab-navigation\" id=\"tab-navigation-label\"><input checked type=\"checkbox\" id=\"enable-tab-navigation\" name=\"enable-tab-navigation\" aria-labelledby=\"tab-navigation-label\" /> Enable navigation with the Tab key</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-header-navigation\" id=\"header-navigation-label\"><input checked type=\"checkbox\" id=\"enable-header-navigation\" name=\"enable-header-navigation\" aria-labelledby=\"header-navigation-label\" /> Enable navigation across headers</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-cell-virtualization\" id=\"cell-virtualization-label\"><input checked type=\"checkbox\" id=\"enable-cell-virtualization\" name=\"enable-cell-virtualization\" aria-labelledby=\"cell-virtualization-label\" /> Enable cells virtualization</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about row virtualization (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\"><input checked type=\"checkbox\" id=\"enable-cell-enter-editing\" name=\"enable-cell-enter-editing\" aria-labelledby=\"cell-enter-editing-label\" /> The Enter key begins cell editing</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about Enter key cell editing (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\"><input checked type=\"checkbox\" id=\"enable-arrow-rl-first-last-column\" name=\"enable-arrow-first-last-column\" aria-labelledby=\"arrow-rl-first-last-column-label\" /> The right/left arrow keys wrap focus to the adjacent row</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\"><input checked type=\"checkbox\" id=\"enable-arrow-td-first-last-column\" name=\"enable-arrow-td-first-last-column\" aria-labelledby=\"arrow-td-first-last-column-label\" /> The up/down arrow keys wrap focus to the adjacent column</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\"><input checked type=\"checkbox\" id=\"enable-enter-focus-editing\" name=\"enable-enter-focus-editing\" aria-labelledby=\"enter-focus-editing-label\" /> The Enter key moves the focus after cell edition</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n          </div>\n  \n          <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n  \n          <div>\n              <app-example1></app-example1>\n          </div>\n  \n          <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n      </div>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, OnInit, ViewChild} from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotData: Handsontable.RowObject[] = [];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const products = [\n      {\n        companyName: 'Hodkiewicz - Hintz',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-07-05',\n        inStock: false,\n        qty: 82,\n        orderId: '16-3974628',\n        country: 'United Kingdom',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-05-31',\n        inStock: false,\n        qty: 459,\n        orderId: '77-7839351',\n        country: 'Costa Rica',\n      },\n      {\n        companyName: 'Reichert LLC',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-03-16',\n        inStock: false,\n        qty: 318,\n        orderId: '75-6343150',\n        country: 'United States of America',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-04-24',\n        inStock: true,\n        qty: 177,\n        orderId: '56-3608689',\n        country: 'Pitcairn Islands',\n      },\n      {\n        companyName: 'Nader - Fritsch',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-04-29',\n        inStock: true,\n        qty: 51,\n        orderId: '58-1204318',\n        country: 'Argentina',\n      },\n      {\n        companyName: 'Gerhold - Rowe',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-03-27',\n        inStock: false,\n        qty: 439,\n        orderId: '62-6066132',\n        country: 'Senegal',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2022-11-24',\n        inStock: false,\n        qty: 493,\n        orderId: '76-7785471',\n        country: 'Cyprus',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-08-11',\n        inStock: false,\n        qty: 225,\n        orderId: '34-3551159',\n        country: 'Saint Martin',\n      },\n      {\n        companyName: 'Hodkiewicz - Hintz',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-02-07',\n        inStock: false,\n        qty: 261,\n        orderId: '77-1112514',\n        country: 'Chile',\n      },\n      {\n        companyName: 'Hegmann Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-05-06',\n        inStock: false,\n        qty: 439,\n        orderId: '12-3252385',\n        country: 'Switzerland',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-04-22',\n        inStock: true,\n        qty: 235,\n        orderId: '71-7639998',\n        country: 'Brazil',\n      },\n      {\n        companyName: 'Jacobi - Kutch',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2022-12-13',\n        inStock: true,\n        qty: 163,\n        orderId: '68-1588829',\n        country: 'Burkina Faso',\n      },\n      {\n        companyName: 'Jenkins LLC',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-03-26',\n        inStock: true,\n        qty: 8,\n        orderId: '61-6324553',\n        country: 'Virgin Islands, U.S.',\n      },\n      {\n        companyName: 'Koepp and Sons',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-05-04',\n        inStock: true,\n        qty: 355,\n        orderId: '74-6985005',\n        country: 'Mozambique',\n      },\n      {\n        companyName: 'Doyle Group',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-08-01',\n        inStock: false,\n        qty: 186,\n        orderId: '84-4370131',\n        country: 'Cocos (Keeling) Islands',\n      },\n      {\n        companyName: 'Rempel - Durgan',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 284,\n        orderId: '13-6461825',\n        country: 'Monaco',\n      },\n      {\n        companyName: 'Lesch - Jakubowski',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-09-26',\n        inStock: true,\n        qty: 492,\n        orderId: '13-9465439',\n        country: 'Iran',\n      },\n      {\n        companyName: 'Jacobi - Kutch',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-05-04',\n        inStock: true,\n        qty: 300,\n        orderId: '76-5194058',\n        country: 'Indonesia',\n      },\n      {\n        companyName: 'Gerhold - Rowe',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-07-07',\n        inStock: true,\n        qty: 493,\n        orderId: '61-8600792',\n        country: 'Norfolk Island',\n      },\n      {\n        companyName: 'Johnston - Wisozk',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-07-14',\n        inStock: false,\n        qty: 304,\n        orderId: '10-6007287',\n        country: 'Romania',\n      },\n      {\n        companyName: 'Gutkowski Inc',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-01-10',\n        inStock: true,\n        qty: 375,\n        orderId: '25-1164132',\n        country: 'Afghanistan',\n      },\n      {\n        companyName: 'Koepp and Sons',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-03-30',\n        inStock: false,\n        qty: 365,\n        orderId: '75-7975820',\n        country: 'Germany',\n      },\n      {\n        companyName: 'Zboncak and Sons',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-08-17',\n        inStock: false,\n        qty: 308,\n        orderId: '59-6251875',\n        country: 'Tajikistan',\n      },\n      {\n        companyName: 'Mills Group',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 191,\n        orderId: '67-7521441',\n        country: 'Puerto Rico',\n      },\n      {\n        companyName: 'Zboncak and Sons',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-03-18',\n        inStock: false,\n        qty: 208,\n        orderId: '19-4264192',\n        country: 'Bolivia',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-06-14',\n        inStock: true,\n        qty: 191,\n        orderId: '78-5742060',\n        country: 'Benin',\n      },\n      {\n        companyName: 'Upton - Reichert',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-02-27',\n        inStock: false,\n        qty: 45,\n        orderId: '26-6191298',\n        country: 'Tunisia',\n      },\n      {\n        companyName: 'Carroll Group',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2022-12-12',\n        inStock: true,\n        qty: 385,\n        orderId: '13-7828353',\n        country: 'French Southern Territories',\n      },\n      {\n        companyName: 'Reichel Group',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2022-12-12',\n        inStock: true,\n        qty: 117,\n        orderId: '67-9643738',\n        country: 'Mongolia',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-03-24',\n        inStock: false,\n        qty: 335,\n        orderId: '78-1331653',\n        country: 'Angola',\n      },\n      {\n        companyName: 'Brown LLC',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-06-13',\n        inStock: true,\n        qty: 305,\n        orderId: '63-2315723',\n        country: 'French Southern Territories',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-09-07',\n        inStock: true,\n        qty: 409,\n        orderId: '53-6782557',\n        country: 'Indonesia',\n      },\n      {\n        companyName: 'OReilly LLC',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-05-18',\n        inStock: true,\n        qty: 318,\n        orderId: '91-7787675',\n        country: 'Mayotte',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-04-20',\n        inStock: false,\n        qty: 234,\n        orderId: '41-3560672',\n        country: 'Switzerland',\n      },\n      {\n        companyName: 'Hodkiewicz Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-10-19',\n        inStock: true,\n        qty: 136,\n        orderId: '48-6028776',\n        country: 'Peru',\n      },\n      {\n        companyName: 'Lesch and Sons',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-09-29',\n        inStock: false,\n        qty: 187,\n        orderId: '84-3770456',\n        country: 'Central African Republic',\n      },\n      {\n        companyName: 'Pouros - Brakus',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-01-29',\n        inStock: false,\n        qty: 350,\n        orderId: '08-4844950',\n        country: 'Isle of Man',\n      },\n      {\n        companyName: 'Batz - Rice',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-11-06',\n        inStock: false,\n        qty: 252,\n        orderId: '88-4899852',\n        country: 'Burundi',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-09-05',\n        inStock: true,\n        qty: 306,\n        orderId: '06-5022461',\n        country: 'Mauritius',\n      },\n      {\n        companyName: 'Hills and Sons',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-11-07',\n        inStock: false,\n        qty: 435,\n        orderId: '99-5539911',\n        country: 'Somalia',\n      },\n      {\n        companyName: 'Shanahan - Boyle',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-06-19',\n        inStock: true,\n        qty: 171,\n        orderId: '82-8162453',\n        country: 'Virgin Islands, U.S.',\n      },\n      {\n        companyName: 'Luettgen Inc',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 6,\n        orderId: '02-8118250',\n        country: 'Colombia',\n      },\n      {\n        companyName: 'Hegmann Inc',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-02-16',\n        inStock: true,\n        qty: 278,\n        orderId: '07-9773343',\n        country: 'Central African Republic',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-08-08',\n        inStock: false,\n        qty: 264,\n        orderId: '66-4470479',\n        country: 'Norfolk Island',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-06-06',\n        inStock: true,\n        qty: 494,\n        orderId: '13-1175339',\n        country: 'Liechtenstein',\n      },\n      {\n        companyName: 'Hahn - Welch',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-06-12',\n        inStock: false,\n        qty: 485,\n        orderId: '32-9127309',\n        country: 'Bahrain',\n      },\n      {\n        companyName: 'Nader - Fritsch',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-04-08',\n        inStock: true,\n        qty: 332,\n        orderId: '41-3774568',\n        country: 'Montserrat',\n      },\n      {\n        companyName: 'Crona and Sons',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-06-21',\n        inStock: true,\n        qty: 104,\n        orderId: '48-9995090',\n        country: 'Syrian Arab Republic',\n      },\n      {\n        companyName: 'Lind Group',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-08-17',\n        inStock: false,\n        qty: 51,\n        orderId: '68-9599400',\n        country: 'Czech Republic',\n      },\n      {\n        companyName: 'Labadie LLC',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-04-20',\n        inStock: true,\n        qty: 155,\n        orderId: '52-4334332',\n        country: 'Croatia',\n      },\n      {\n        companyName: 'Doyle Group',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-07-23',\n        inStock: false,\n        qty: 465,\n        orderId: '63-8894526',\n        country: 'Indonesia',\n      },\n    ];\n\n    const countries = products.reduce((acc, curr) => {\n      if (acc.includes(curr.country)) {\n        return acc;\n      }\n\n      return [...acc, curr.country];\n    }, [] as string[]);\n\n    this.hotData = [...products];\n\n    this.hotSettings = {\n      height: 464,\n      colWidths: [160, 165, 130, 100, 100, 110, 216],\n      autoRowSize: true,\n      colHeaders: [\n        'Company name',\n        'Product name',\n        'Sell date',\n        'In stock',\n        'Qty',\n        'Order ID',\n        'Country',\n      ],\n      columns: [\n        { data: 'companyName', type: 'text' },\n        { data: 'productName', type: 'text' },\n        {\n          data: 'sellDate',\n          type: 'intl-date',\n          locale: 'en-GB',\n          dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n        },\n        {\n          data: 'inStock',\n          type: 'checkbox',\n          className: 'htCenter',\n          headerClassName: 'htCenter',\n        },\n        {\n          data: 'qty',\n          type: 'numeric',\n          headerClassName: 'htRight',\n        },\n        {\n          data: 'orderId',\n          type: 'text',\n        },\n        {\n          data: 'country',\n          type: 'dropdown',\n          source: countries,\n        },\n      ],\n      dropdownMenu: true,\n      hiddenColumns: {\n        indicators: true,\n      },\n      contextMenu: true,\n      navigableHeaders: true,\n      tabNavigation: true,\n      autoWrapRow: true,\n      autoWrapCol: true,\n      multiColumnSorting: true,\n      filters: true,\n      rowHeaders: true,\n      manualRowMove: true,\n      headerClassName: 'htLeft',\n    }\n\n    // Initialize the Handsontable instance with the specified configuration options\n\n    const setupCheckbox = (element: HTMLInputElement | null, callback: (checked: boolean) => void) =>\n      element?.addEventListener('click', () => callback(element.checked));\n\n    // Set up event listeners for various checkboxes to update Handsontable settings.\n    // This allows us to change the Handsontable settings from the UI, showcasing\n    // the flexibility of Handsontable in configuring according to your needs.\n    // Checkbox: Enable/Disable Tab Navigation\n    setupCheckbox(document.querySelector<HTMLInputElement>('#enable-tab-navigation'), (checked: boolean) => {\n      this.hotSettings['tabNavigation'] = checked;\n      this.hotTable.hotInstance!.updateSettings({\n        tabNavigation: this.hotSettings['tabNavigation'],\n      });\n      console.log(\n        'Updated setting: tabNavigation to',\n        this.hotTable.hotInstance!.getSettings().tabNavigation\n    );\n    });\n    // Checkbox: Enable/Disable Header Navigation\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-header-navigation'),\n      (checked: boolean) => {\n        this.hotSettings['navigableHeaders'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          navigableHeaders: this.hotSettings['navigableHeaders'],\n        });\n        console.log(\n          'Updated setting: navigableHeaders to',\n          this.hotTable.hotInstance!.getSettings().navigableHeaders\n      );\n      }\n    );\n\n    // Checkbox: Enable/Disable Cell Virtualization\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-cell-virtualization'),\n      (checked: boolean) => {\n        this.hotTable.hotInstance!.updateSettings({\n          renderAllRows: !checked,\n          renderAllColumns: !checked,\n        });\n        console.log('Updated virtualization settings:', {\n          renderAllRows: this.hotTable.hotInstance!.getSettings().renderAllRows,\n          renderAllColumns: this.hotTable.hotInstance!.getSettings().renderAllColumns,\n        });\n      }\n    );\n    // Checkbox: Enable/Disable Cell Enter Editing\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-cell-enter-editing'),\n      (checked: boolean) => {\n        this.hotSettings['enterBeginsEditing'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          enterBeginsEditing: this.hotSettings['enterBeginsEditing'],\n        });\n        console.log(\n          'Updated setting: enable-cell-enter-editing to',\n          this.hotTable.hotInstance!.getSettings().enterBeginsEditing\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Arrow Navigation for First/Last Row\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-arrow-rl-first-last-column'),\n      (checked: boolean) => {\n        this.hotSettings['autoWrapRow'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          autoWrapRow: this.hotSettings['autoWrapRow'],\n        });\n        console.log(\n          'Updated setting: autoWrapRow to',\n          this.hotTable.hotInstance!.getSettings().autoWrapRow\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Arrow Navigation for First/Last Column\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-arrow-td-first-last-column'),\n      (checked: boolean) => {\n        this.hotSettings['autoWrapCol'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          autoWrapCol: this.hotSettings['autoWrapCol'],\n        });\n        console.log(\n          'Updated setting: autoWrapCol to',\n          this.hotTable.hotInstance!.getSettings().autoWrapCol\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Enter Key Focus for Editing\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-enter-focus-editing'),\n      (checked: boolean) => {\n        this.hotSettings['enterMoves'] = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n        this.hotTable.hotInstance!.updateSettings({\n          enterMoves: this.hotSettings['enterMoves'],\n        });\n        console.log('Updated setting: enterMoves to', this.hotTable.hotInstance!.getSettings().enterMoves);\n      }\n    );\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessibility/accessibility/angular/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"Angular"}
+{"framework":"angular","displayName":"Accessibility · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n    .checkbox-container {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin: 0 -1rem 0 !important;\n      padding: 0 1rem 0.75rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    .checkbox-container > div {\n      display: flex;\n    }\n\n    .checkbox-container > div > label {\n      display: flex;\n      align-items: center;\n      gap: 0.4rem;\n    }\n\n    .external-link {\n      margin-left: 0.5rem;\n      position: relative;\n      top: 2px;\n      color: var(--sl-color-text, #333333);\n    }\n\n    .external-link:hover {\n      color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .option-label {\n      color: var(--sl-color-text, #333333);\n      font-size: var(--sl-text-sm, 0.875rem);\n    }\n\n    /*\n      We want the focus to be around input and label, in order to achieve this,\n      we remove focus from the input and add it to the label (wrapper in this case)\n      we then use the :focus-within pseudo class plus native focus styles\n      https://css-tricks.com/copy-the-browsers-native-focus-styles/\n    */\n    .option-label:focus-within {\n      outline: 5px auto Highlight;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    .option-label > input:focus {\n      outline: none;\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n    </style>\n</head>\n<body>\n  <div>\n      \n      <div class=\"example-container\">\n          <div class=\"checkbox-container\">\n            <div>\n              <label class=\"option-label\" for=\"enable-tab-navigation\" id=\"tab-navigation-label\"><input checked type=\"checkbox\" id=\"enable-tab-navigation\" name=\"enable-tab-navigation\" aria-labelledby=\"tab-navigation-label\" /> Enable navigation with the Tab key</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-header-navigation\" id=\"header-navigation-label\"><input checked type=\"checkbox\" id=\"enable-header-navigation\" name=\"enable-header-navigation\" aria-labelledby=\"header-navigation-label\" /> Enable navigation across headers</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-cell-virtualization\" id=\"cell-virtualization-label\"><input checked type=\"checkbox\" id=\"enable-cell-virtualization\" name=\"enable-cell-virtualization\" aria-labelledby=\"cell-virtualization-label\" /> Enable cells virtualization</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about row virtualization (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\"><input checked type=\"checkbox\" id=\"enable-cell-enter-editing\" name=\"enable-cell-enter-editing\" aria-labelledby=\"cell-enter-editing-label\" /> The Enter key begins cell editing</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about Enter key cell editing (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\"><input checked type=\"checkbox\" id=\"enable-arrow-rl-first-last-column\" name=\"enable-arrow-first-last-column\" aria-labelledby=\"arrow-rl-first-last-column-label\" /> The right/left arrow keys wrap focus to the adjacent row</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\"><input checked type=\"checkbox\" id=\"enable-arrow-td-first-last-column\" name=\"enable-arrow-td-first-last-column\" aria-labelledby=\"arrow-td-first-last-column-label\" /> The up/down arrow keys wrap focus to the adjacent column</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n            <div>\n              <label class=\"option-label\" for=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\"><input checked type=\"checkbox\" id=\"enable-enter-focus-editing\" name=\"enable-enter-focus-editing\" aria-labelledby=\"enter-focus-editing-label\" /> The Enter key moves the focus after cell edition</label>\n              <a href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\" target=\"_blank\" class=\"external-link\" rel=\"noopener noreferrer\" aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\"><path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path><polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon></svg>\n              </a>\n            </div>\n          </div>\n  \n          <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n  \n          <div>\n              <app-example1></app-example1>\n          </div>\n  \n          <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n      </div>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, OnInit, ViewChild} from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotData: Handsontable.RowObject[] = [];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const products = [\n      {\n        companyName: 'Hodkiewicz - Hintz',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-07-05',\n        inStock: false,\n        qty: 82,\n        orderId: '16-3974628',\n        country: 'United Kingdom',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-05-31',\n        inStock: false,\n        qty: 459,\n        orderId: '77-7839351',\n        country: 'Costa Rica',\n      },\n      {\n        companyName: 'Reichert LLC',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-03-16',\n        inStock: false,\n        qty: 318,\n        orderId: '75-6343150',\n        country: 'United States of America',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-04-24',\n        inStock: true,\n        qty: 177,\n        orderId: '56-3608689',\n        country: 'Pitcairn Islands',\n      },\n      {\n        companyName: 'Nader - Fritsch',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-04-29',\n        inStock: true,\n        qty: 51,\n        orderId: '58-1204318',\n        country: 'Argentina',\n      },\n      {\n        companyName: 'Gerhold - Rowe',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-03-27',\n        inStock: false,\n        qty: 439,\n        orderId: '62-6066132',\n        country: 'Senegal',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2022-11-24',\n        inStock: false,\n        qty: 493,\n        orderId: '76-7785471',\n        country: 'Cyprus',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-08-11',\n        inStock: false,\n        qty: 225,\n        orderId: '34-3551159',\n        country: 'Saint Martin',\n      },\n      {\n        companyName: 'Hodkiewicz - Hintz',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-02-07',\n        inStock: false,\n        qty: 261,\n        orderId: '77-1112514',\n        country: 'Chile',\n      },\n      {\n        companyName: 'Hegmann Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-05-06',\n        inStock: false,\n        qty: 439,\n        orderId: '12-3252385',\n        country: 'Switzerland',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-04-22',\n        inStock: true,\n        qty: 235,\n        orderId: '71-7639998',\n        country: 'Brazil',\n      },\n      {\n        companyName: 'Jacobi - Kutch',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2022-12-13',\n        inStock: true,\n        qty: 163,\n        orderId: '68-1588829',\n        country: 'Burkina Faso',\n      },\n      {\n        companyName: 'Jenkins LLC',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-03-26',\n        inStock: true,\n        qty: 8,\n        orderId: '61-6324553',\n        country: 'Virgin Islands, U.S.',\n      },\n      {\n        companyName: 'Koepp and Sons',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-05-04',\n        inStock: true,\n        qty: 355,\n        orderId: '74-6985005',\n        country: 'Mozambique',\n      },\n      {\n        companyName: 'Doyle Group',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-08-01',\n        inStock: false,\n        qty: 186,\n        orderId: '84-4370131',\n        country: 'Cocos (Keeling) Islands',\n      },\n      {\n        companyName: 'Rempel - Durgan',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 284,\n        orderId: '13-6461825',\n        country: 'Monaco',\n      },\n      {\n        companyName: 'Lesch - Jakubowski',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-09-26',\n        inStock: true,\n        qty: 492,\n        orderId: '13-9465439',\n        country: 'Iran',\n      },\n      {\n        companyName: 'Jacobi - Kutch',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-05-04',\n        inStock: true,\n        qty: 300,\n        orderId: '76-5194058',\n        country: 'Indonesia',\n      },\n      {\n        companyName: 'Gerhold - Rowe',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-07-07',\n        inStock: true,\n        qty: 493,\n        orderId: '61-8600792',\n        country: 'Norfolk Island',\n      },\n      {\n        companyName: 'Johnston - Wisozk',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-07-14',\n        inStock: false,\n        qty: 304,\n        orderId: '10-6007287',\n        country: 'Romania',\n      },\n      {\n        companyName: 'Gutkowski Inc',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-01-10',\n        inStock: true,\n        qty: 375,\n        orderId: '25-1164132',\n        country: 'Afghanistan',\n      },\n      {\n        companyName: 'Koepp and Sons',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-03-30',\n        inStock: false,\n        qty: 365,\n        orderId: '75-7975820',\n        country: 'Germany',\n      },\n      {\n        companyName: 'Zboncak and Sons',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-08-17',\n        inStock: false,\n        qty: 308,\n        orderId: '59-6251875',\n        country: 'Tajikistan',\n      },\n      {\n        companyName: 'Mills Group',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 191,\n        orderId: '67-7521441',\n        country: 'Puerto Rico',\n      },\n      {\n        companyName: 'Zboncak and Sons',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-03-18',\n        inStock: false,\n        qty: 208,\n        orderId: '19-4264192',\n        country: 'Bolivia',\n      },\n      {\n        companyName: 'Rath LLC',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-06-14',\n        inStock: true,\n        qty: 191,\n        orderId: '78-5742060',\n        country: 'Benin',\n      },\n      {\n        companyName: 'Upton - Reichert',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-02-27',\n        inStock: false,\n        qty: 45,\n        orderId: '26-6191298',\n        country: 'Tunisia',\n      },\n      {\n        companyName: 'Carroll Group',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2022-12-12',\n        inStock: true,\n        qty: 385,\n        orderId: '13-7828353',\n        country: 'French Southern Territories',\n      },\n      {\n        companyName: 'Reichel Group',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2022-12-12',\n        inStock: true,\n        qty: 117,\n        orderId: '67-9643738',\n        country: 'Mongolia',\n      },\n      {\n        companyName: 'Kozey Inc',\n        productName: 'Rustic Soft Ball',\n        sellDate: '2023-03-24',\n        inStock: false,\n        qty: 335,\n        orderId: '78-1331653',\n        country: 'Angola',\n      },\n      {\n        companyName: 'Brown LLC',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-06-13',\n        inStock: true,\n        qty: 305,\n        orderId: '63-2315723',\n        country: 'French Southern Territories',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-09-07',\n        inStock: true,\n        qty: 409,\n        orderId: '53-6782557',\n        country: 'Indonesia',\n      },\n      {\n        companyName: 'OReilly LLC',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-05-18',\n        inStock: true,\n        qty: 318,\n        orderId: '91-7787675',\n        country: 'Mayotte',\n      },\n      {\n        companyName: 'Weber Inc',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-04-20',\n        inStock: false,\n        qty: 234,\n        orderId: '41-3560672',\n        country: 'Switzerland',\n      },\n      {\n        companyName: 'Hodkiewicz Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-10-19',\n        inStock: true,\n        qty: 136,\n        orderId: '48-6028776',\n        country: 'Peru',\n      },\n      {\n        companyName: 'Lesch and Sons',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-09-29',\n        inStock: false,\n        qty: 187,\n        orderId: '84-3770456',\n        country: 'Central African Republic',\n      },\n      {\n        companyName: 'Pouros - Brakus',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-01-29',\n        inStock: false,\n        qty: 350,\n        orderId: '08-4844950',\n        country: 'Isle of Man',\n      },\n      {\n        companyName: 'Batz - Rice',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-11-06',\n        inStock: false,\n        qty: 252,\n        orderId: '88-4899852',\n        country: 'Burundi',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Small Fresh Fish',\n        sellDate: '2023-09-05',\n        inStock: true,\n        qty: 306,\n        orderId: '06-5022461',\n        country: 'Mauritius',\n      },\n      {\n        companyName: 'Hills and Sons',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-11-07',\n        inStock: false,\n        qty: 435,\n        orderId: '99-5539911',\n        country: 'Somalia',\n      },\n      {\n        companyName: 'Shanahan - Boyle',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-06-19',\n        inStock: true,\n        qty: 171,\n        orderId: '82-8162453',\n        country: 'Virgin Islands, U.S.',\n      },\n      {\n        companyName: 'Luettgen Inc',\n        productName: 'Awesome Wooden Hat',\n        sellDate: '2023-09-30',\n        inStock: false,\n        qty: 6,\n        orderId: '02-8118250',\n        country: 'Colombia',\n      },\n      {\n        companyName: 'Hegmann Inc',\n        productName: 'Small Rubber Shoes',\n        sellDate: '2023-02-16',\n        inStock: true,\n        qty: 278,\n        orderId: '07-9773343',\n        country: 'Central African Republic',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-08-08',\n        inStock: false,\n        qty: 264,\n        orderId: '66-4470479',\n        country: 'Norfolk Island',\n      },\n      {\n        companyName: 'Kub Inc',\n        productName: 'Tasty Frozen Table',\n        sellDate: '2023-06-06',\n        inStock: true,\n        qty: 494,\n        orderId: '13-1175339',\n        country: 'Liechtenstein',\n      },\n      {\n        companyName: 'Hahn - Welch',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-06-12',\n        inStock: false,\n        qty: 485,\n        orderId: '32-9127309',\n        country: 'Bahrain',\n      },\n      {\n        companyName: 'Nader - Fritsch',\n        productName: 'Small Frozen Tuna',\n        sellDate: '2023-04-08',\n        inStock: true,\n        qty: 332,\n        orderId: '41-3774568',\n        country: 'Montserrat',\n      },\n      {\n        companyName: 'Crona and Sons',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-06-21',\n        inStock: true,\n        qty: 104,\n        orderId: '48-9995090',\n        country: 'Syrian Arab Republic',\n      },\n      {\n        companyName: 'Lind Group',\n        productName: 'Rustic Cotton Ball',\n        sellDate: '2023-08-17',\n        inStock: false,\n        qty: 51,\n        orderId: '68-9599400',\n        country: 'Czech Republic',\n      },\n      {\n        companyName: 'Labadie LLC',\n        productName: 'Small Fresh Bacon',\n        sellDate: '2023-04-20',\n        inStock: true,\n        qty: 155,\n        orderId: '52-4334332',\n        country: 'Croatia',\n      },\n      {\n        companyName: 'Doyle Group',\n        productName: 'Sleek Wooden Bacon',\n        sellDate: '2023-07-23',\n        inStock: false,\n        qty: 465,\n        orderId: '63-8894526',\n        country: 'Indonesia',\n      },\n    ];\n\n    const countries = products.reduce((acc, curr) => {\n      if (acc.includes(curr.country)) {\n        return acc;\n      }\n\n      return [...acc, curr.country];\n    }, [] as string[]);\n\n    this.hotData = [...products];\n\n    this.hotSettings = {\n      height: 464,\n      colWidths: [160, 165, 130, 100, 100, 110, 216],\n      autoRowSize: true,\n      colHeaders: [\n        'Company name',\n        'Product name',\n        'Sell date',\n        'In stock',\n        'Qty',\n        'Order ID',\n        'Country',\n      ],\n      columns: [\n        { data: 'companyName', type: 'text' },\n        { data: 'productName', type: 'text' },\n        {\n          data: 'sellDate',\n          type: 'intl-date',\n          locale: 'en-GB',\n          dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n        },\n        {\n          data: 'inStock',\n          type: 'checkbox',\n          className: 'htCenter',\n          headerClassName: 'htCenter',\n        },\n        {\n          data: 'qty',\n          type: 'numeric',\n          headerClassName: 'htRight',\n        },\n        {\n          data: 'orderId',\n          type: 'text',\n        },\n        {\n          data: 'country',\n          type: 'dropdown',\n          source: countries,\n        },\n      ],\n      dropdownMenu: true,\n      hiddenColumns: {\n        indicators: true,\n      },\n      contextMenu: true,\n      navigableHeaders: true,\n      tabNavigation: true,\n      autoWrapRow: true,\n      autoWrapCol: true,\n      multiColumnSorting: true,\n      filters: true,\n      rowHeaders: true,\n      manualRowMove: true,\n      headerClassName: 'htLeft',\n    }\n\n    // Initialize the Handsontable instance with the specified configuration options\n\n    const setupCheckbox = (element: HTMLInputElement | null, callback: (checked: boolean) => void) =>\n      element?.addEventListener('click', () => callback(element.checked));\n\n    // Set up event listeners for various checkboxes to update Handsontable settings.\n    // This allows us to change the Handsontable settings from the UI, showcasing\n    // the flexibility of Handsontable in configuring according to your needs.\n    // Checkbox: Enable/Disable Tab Navigation\n    setupCheckbox(document.querySelector<HTMLInputElement>('#enable-tab-navigation'), (checked: boolean) => {\n      this.hotSettings['tabNavigation'] = checked;\n      this.hotTable.hotInstance!.updateSettings({\n        tabNavigation: this.hotSettings['tabNavigation'],\n      });\n      console.log(\n        'Updated setting: tabNavigation to',\n        this.hotTable.hotInstance!.getSettings().tabNavigation\n    );\n    });\n    // Checkbox: Enable/Disable Header Navigation\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-header-navigation'),\n      (checked: boolean) => {\n        this.hotSettings['navigableHeaders'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          navigableHeaders: this.hotSettings['navigableHeaders'],\n        });\n        console.log(\n          'Updated setting: navigableHeaders to',\n          this.hotTable.hotInstance!.getSettings().navigableHeaders\n      );\n      }\n    );\n\n    // Checkbox: Enable/Disable Cell Virtualization\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-cell-virtualization'),\n      (checked: boolean) => {\n        this.hotTable.hotInstance!.updateSettings({\n          renderAllRows: !checked,\n          renderAllColumns: !checked,\n        });\n        console.log('Updated virtualization settings:', {\n          renderAllRows: this.hotTable.hotInstance!.getSettings().renderAllRows,\n          renderAllColumns: this.hotTable.hotInstance!.getSettings().renderAllColumns,\n        });\n      }\n    );\n    // Checkbox: Enable/Disable Cell Enter Editing\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-cell-enter-editing'),\n      (checked: boolean) => {\n        this.hotSettings['enterBeginsEditing'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          enterBeginsEditing: this.hotSettings['enterBeginsEditing'],\n        });\n        console.log(\n          'Updated setting: enable-cell-enter-editing to',\n          this.hotTable.hotInstance!.getSettings().enterBeginsEditing\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Arrow Navigation for First/Last Row\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-arrow-rl-first-last-column'),\n      (checked: boolean) => {\n        this.hotSettings['autoWrapRow'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          autoWrapRow: this.hotSettings['autoWrapRow'],\n        });\n        console.log(\n          'Updated setting: autoWrapRow to',\n          this.hotTable.hotInstance!.getSettings().autoWrapRow\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Arrow Navigation for First/Last Column\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-arrow-td-first-last-column'),\n      (checked: boolean) => {\n        this.hotSettings['autoWrapCol'] = checked;\n        this.hotTable.hotInstance!.updateSettings({\n          autoWrapCol: this.hotSettings['autoWrapCol'],\n        });\n        console.log(\n          'Updated setting: autoWrapCol to',\n          this.hotTable.hotInstance!.getSettings().autoWrapCol\n      );\n      }\n    );\n    // Checkbox: Enable/Disable Enter Key Focus for Editing\n    setupCheckbox(\n      document.querySelector<HTMLInputElement>('#enable-enter-focus-editing'),\n      (checked: boolean) => {\n        this.hotSettings['enterMoves'] = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n        this.hotTable.hotInstance!.updateSettings({\n          enterMoves: this.hotSettings['enterMoves'],\n        });\n        console.log('Updated setting: enterMoves to', this.hotTable.hotInstance!.getSettings().enterMoves);\n      }\n    );\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessibility/accessibility/angular/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json
index 0cf3e4af3..14ab1d7e1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessibility · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-tab-navigation\"\n          id=\"tab-navigation-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-labelledby=\"tab-navigation-label\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-header-navigation\"\n          id=\"header-navigation-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-virtualization\"\n          id=\"cell-virtualization-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-enter-editing\"\n          id=\"cell-enter-editing-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-rl-first-last-column\"\n          id=\"arrow-rl-first-last-column-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enable-arrow-first-last-column\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-td-first-last-column\"\n          id=\"arrow-td-first-last-column-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-enter-focus-editing\"\n          id=\"enter-focus-editing-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n    </div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst products = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = products.reduce((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1');\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data: products,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  columns: [\n    { data: 'companyName', type: 'text' },\n    { data: 'productName', type: 'text' },\n    {\n      data: 'sellDate',\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 'inStock',\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n    {\n      data: 'qty',\n      type: 'numeric',\n      headerClassName: 'htRight',\n    },\n    {\n      data: 'orderId',\n      type: 'text',\n    },\n    {\n      data: 'country',\n      type: 'dropdown',\n      source: countries,\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  contextMenu: true,\n  navigableHeaders: true,\n  tabNavigation: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element, callback) => element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation'), (checked) => {\n  hotOptions.tabNavigation = checked;\n  hot.updateSettings({\n    tabNavigation: hotOptions.tabNavigation,\n  });\n  console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation'), (checked) => {\n  hotOptions.navigableHeaders = checked;\n  hot.updateSettings({\n    navigableHeaders: hotOptions.navigableHeaders,\n  });\n  console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization'), (checked) => {\n  hot.destroy();\n  hot = new Handsontable(document.getElementById('example1'), {\n    ...hotOptions,\n    renderAllRows: !checked,\n    renderAllColumns: !checked,\n  });\n  console.log('Updated virtualization settings:', {\n    renderAllRows: hot.getSettings().renderAllRows,\n    renderAllColumns: hot.getSettings().renderAllColumns,\n  });\n});\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing'), (checked) => {\n  hotOptions.enterBeginsEditing = checked;\n  hot.updateSettings({\n    enterBeginsEditing: hotOptions.enterBeginsEditing,\n  });\n  console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column'), (checked) => {\n  hotOptions.autoWrapRow = checked;\n  hot.updateSettings({\n    autoWrapRow: hotOptions.autoWrapRow,\n  });\n  console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column'), (checked) => {\n  hotOptions.autoWrapCol = checked;\n  hot.updateSettings({\n    autoWrapCol: hotOptions.autoWrapCol,\n  });\n  console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing'), (checked) => {\n  hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n  hot.updateSettings({\n    enterMoves: hotOptions.enterMoves,\n  });\n  console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.js","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessibility · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-tab-navigation\"\n          id=\"tab-navigation-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-labelledby=\"tab-navigation-label\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-header-navigation\"\n          id=\"header-navigation-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-virtualization\"\n          id=\"cell-virtualization-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-enter-editing\"\n          id=\"cell-enter-editing-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-rl-first-last-column\"\n          id=\"arrow-rl-first-last-column-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enable-arrow-first-last-column\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-td-first-last-column\"\n          id=\"arrow-td-first-last-column-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-enter-focus-editing\"\n          id=\"enter-focus-editing-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n    </div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst products = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = products.reduce((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1');\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data: products,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  columns: [\n    { data: 'companyName', type: 'text' },\n    { data: 'productName', type: 'text' },\n    {\n      data: 'sellDate',\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 'inStock',\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n    {\n      data: 'qty',\n      type: 'numeric',\n      headerClassName: 'htRight',\n    },\n    {\n      data: 'orderId',\n      type: 'text',\n    },\n    {\n      data: 'country',\n      type: 'dropdown',\n      source: countries,\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  contextMenu: true,\n  navigableHeaders: true,\n  tabNavigation: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element, callback) => element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation'), (checked) => {\n  hotOptions.tabNavigation = checked;\n  hot.updateSettings({\n    tabNavigation: hotOptions.tabNavigation,\n  });\n  console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation'), (checked) => {\n  hotOptions.navigableHeaders = checked;\n  hot.updateSettings({\n    navigableHeaders: hotOptions.navigableHeaders,\n  });\n  console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization'), (checked) => {\n  hot.destroy();\n  hot = new Handsontable(document.getElementById('example1'), {\n    ...hotOptions,\n    renderAllRows: !checked,\n    renderAllColumns: !checked,\n  });\n  console.log('Updated virtualization settings:', {\n    renderAllRows: hot.getSettings().renderAllRows,\n    renderAllColumns: hot.getSettings().renderAllColumns,\n  });\n});\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing'), (checked) => {\n  hotOptions.enterBeginsEditing = checked;\n  hot.updateSettings({\n    enterBeginsEditing: hotOptions.enterBeginsEditing,\n  });\n  console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column'), (checked) => {\n  hotOptions.autoWrapRow = checked;\n  hot.updateSettings({\n    autoWrapRow: hotOptions.autoWrapRow,\n  });\n  console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column'), (checked) => {\n  hotOptions.autoWrapCol = checked;\n  hot.updateSettings({\n    autoWrapCol: hotOptions.autoWrapCol,\n  });\n  console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing'), (checked) => {\n  hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n  hot.updateSettings({\n    enterMoves: hotOptions.enterMoves,\n  });\n  console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.js","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json
index 3892f3d85..e7cf7b2fe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessibility · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-tab-navigation\"\n          id=\"tab-navigation-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-labelledby=\"tab-navigation-label\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-header-navigation\"\n          id=\"header-navigation-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-virtualization\"\n          id=\"cell-virtualization-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-enter-editing\"\n          id=\"cell-enter-editing-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-rl-first-last-column\"\n          id=\"arrow-rl-first-last-column-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enable-arrow-first-last-column\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-td-first-last-column\"\n          id=\"arrow-td-first-last-column-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-enter-focus-editing\"\n          id=\"enter-focus-editing-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n    </div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst products: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = products.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1')!;\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data: products,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  columns: [\n    { data: 'companyName', type: 'text' },\n    { data: 'productName', type: 'text' },\n    {\n      data: 'sellDate',\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 'inStock',\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n    {\n      data: 'qty',\n      type: 'numeric',\n      headerClassName: 'htRight',\n    },\n    {\n      data: 'orderId',\n      type: 'text',\n    },\n    {\n      data: 'country',\n      type: 'dropdown',\n      source: countries,\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  contextMenu: true,\n  navigableHeaders: true, // New accessibility feature\n  tabNavigation: true, // New accessibility feature\n  autoWrapRow: true,\n  autoWrapCol: true,\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element: HTMLInputElement, callback: (val: boolean) => void) =>\n  element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation') as HTMLInputElement, (checked) => {\n  hotOptions.tabNavigation = checked;\n  hot.updateSettings({\n    tabNavigation: hotOptions.tabNavigation,\n  });\n  console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation') as HTMLInputElement, (checked) => {\n  hotOptions.navigableHeaders = checked;\n  hot.updateSettings({\n    navigableHeaders: hotOptions.navigableHeaders,\n  });\n  console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization') as HTMLInputElement, (checked) => {\n  hot.destroy();\n  hot = new Handsontable(document.getElementById('example1')!, {\n    ...hotOptions,\n    renderAllRows: !checked,\n    renderAllColumns: !checked,\n  });\n  console.log('Updated virtualization settings:', {\n    renderAllRows: hot.getSettings().renderAllRows,\n    renderAllColumns: hot.getSettings().renderAllColumns,\n  });\n});\n\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing') as HTMLInputElement, (checked) => {\n  hotOptions.enterBeginsEditing = checked;\n  hot.updateSettings({\n    enterBeginsEditing: hotOptions.enterBeginsEditing,\n  });\n  console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column') as HTMLInputElement, (checked) => {\n  hotOptions.autoWrapRow = checked;\n  hot.updateSettings({\n    autoWrapRow: hotOptions.autoWrapRow,\n  });\n  console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column') as HTMLInputElement, (checked) => {\n  hotOptions.autoWrapCol = checked;\n  hot.updateSettings({\n    autoWrapCol: hotOptions.autoWrapCol,\n  });\n  console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing') as HTMLInputElement, (checked) => {\n  hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n  hot.updateSettings({\n    enterMoves: hotOptions.enterMoves,\n  });\n  console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessibility · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-tab-navigation\"\n          id=\"tab-navigation-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-labelledby=\"tab-navigation-label\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-header-navigation\"\n          id=\"header-navigation-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-virtualization\"\n          id=\"cell-virtualization-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-cell-enter-editing\"\n          id=\"cell-enter-editing-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-rl-first-last-column\"\n          id=\"arrow-rl-first-last-column-label\"\n          ><input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enable-arrow-first-last-column\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-arrow-td-first-last-column\"\n          id=\"arrow-td-first-last-column-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label\n          class=\"option-label\"\n          for=\"enable-enter-focus-editing\"\n          id=\"enter-focus-editing-label\"\n        >\n          <input\n            checked\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/javascript-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\"></path>\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\"></polygon>\n          </svg>\n        </a>\n      </div>\n    </div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      placeholder=\"Focusable text input\"\n    />\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst products: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = products.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1')!;\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data: products,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  columns: [\n    { data: 'companyName', type: 'text' },\n    { data: 'productName', type: 'text' },\n    {\n      data: 'sellDate',\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 'inStock',\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n    {\n      data: 'qty',\n      type: 'numeric',\n      headerClassName: 'htRight',\n    },\n    {\n      data: 'orderId',\n      type: 'text',\n    },\n    {\n      data: 'country',\n      type: 'dropdown',\n      source: countries,\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  contextMenu: true,\n  navigableHeaders: true, // New accessibility feature\n  tabNavigation: true, // New accessibility feature\n  autoWrapRow: true,\n  autoWrapCol: true,\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element: HTMLInputElement, callback: (val: boolean) => void) =>\n  element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation') as HTMLInputElement, (checked) => {\n  hotOptions.tabNavigation = checked;\n  hot.updateSettings({\n    tabNavigation: hotOptions.tabNavigation,\n  });\n  console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation') as HTMLInputElement, (checked) => {\n  hotOptions.navigableHeaders = checked;\n  hot.updateSettings({\n    navigableHeaders: hotOptions.navigableHeaders,\n  });\n  console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization') as HTMLInputElement, (checked) => {\n  hot.destroy();\n  hot = new Handsontable(document.getElementById('example1')!, {\n    ...hotOptions,\n    renderAllRows: !checked,\n    renderAllColumns: !checked,\n  });\n  console.log('Updated virtualization settings:', {\n    renderAllRows: hot.getSettings().renderAllRows,\n    renderAllColumns: hot.getSettings().renderAllColumns,\n  });\n});\n\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing') as HTMLInputElement, (checked) => {\n  hotOptions.enterBeginsEditing = checked;\n  hot.updateSettings({\n    enterBeginsEditing: hotOptions.enterBeginsEditing,\n  });\n  console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column') as HTMLInputElement, (checked) => {\n  hotOptions.autoWrapRow = checked;\n  hot.updateSettings({\n    autoWrapRow: hotOptions.autoWrapRow,\n  });\n  console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column') as HTMLInputElement, (checked) => {\n  hotOptions.autoWrapCol = checked;\n  hot.updateSettings({\n    autoWrapCol: hotOptions.autoWrapCol,\n  });\n  console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing') as HTMLInputElement, (checked) => {\n  hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n  hot.updateSettings({\n    enterMoves: hotOptions.enterMoves,\n  });\n  console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json
index 95d6b619a..96502e2d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessibility · Accessible data grid demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface Toggle {\n  tabNavigation: boolean;\n  navigableHeaders: boolean;\n  renderAllRows: boolean;\n  renderAllColumns: boolean;\n  enterBeginsEditing: boolean;\n  autoWrapRow: boolean;\n  autoWrapCol: boolean;\n  enterMoves: { col: number; row: number };\n  changeToggleOptions: any;\n}\n\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = data.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Handsontable options\nconst hotOptions = {\n  data,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst ExampleComponent = () => {\n  const [toggleableOptions, setToggleableOptions] = useState<Omit<Toggle, 'changeToggleOptions'>>({\n    tabNavigation: true,\n    navigableHeaders: true,\n    renderAllRows: false,\n    renderAllColumns: false,\n    enterBeginsEditing: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    headerClassName: 'htLeft',\n    enterMoves: { col: 0, row: 1 },\n  });\n\n  return (\n    <div className=\"example-container\">\n      {/* DemoOptions component for changing Handsontable options */}\n      <DemoOptions changeToggleOptions={setToggleableOptions} {...toggleableOptions} />\n\n      <input className=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n\n      {/* Handsontable component with dynamic options */}\n      <HotTable\n        // Handsontable needs to reload when changing virtualization\n        // by changing the key, we force the component to reload\n        key={String(toggleableOptions.renderAllRows)}\n        {...hotOptions}\n        // Pass in the options which can change for demo\n        {...toggleableOptions}\n      >\n        {/* Define HotColumns for the data */}\n        <HotColumn data=\"companyName\" type=\"text\" />\n        <HotColumn data=\"productName\" type=\"text\" />\n        <HotColumn data=\"sellDate\" locale=\"en-GB\" dateFormat={{ day: '2-digit', month: '2-digit', year: 'numeric' }} type=\"intl-date\" />\n        <HotColumn data=\"inStock\" type=\"checkbox\" className=\"htCenter\" headerClassName=\"htCenter\" />\n        <HotColumn data=\"qty\" type=\"numeric\" headerClassName=\"htRight\" />\n        <HotColumn data=\"orderId\" type=\"text\" />\n        <HotColumn data=\"country\" type=\"dropdown\" source={countries} />\n      </HotTable>\n      <input className=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n    </div>\n  );\n};\n\n// Demo Options allows you to change the Handsontable options\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\nfunction DemoOptions({\n  tabNavigation,\n  navigableHeaders,\n  renderAllRows,\n  renderAllColumns,\n  enterBeginsEditing,\n  autoWrapRow,\n  autoWrapCol,\n  enterMoves,\n  changeToggleOptions,\n}: Toggle) {\n  // on checkbox change, update handsontable option\n  const handleCheckboxChange = (checkboxName: string) => {\n    switch (checkboxName) {\n      case 'enable-tab-navigation':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          tabNavigation: !tabNavigation,\n        }));\n\n        break;\n      case 'enable-header-navigation':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          navigableHeaders: !navigableHeaders,\n        }));\n\n        break;\n      case 'enable-cell-virtualization':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          renderAllRows: !renderAllRows,\n          renderAllColumns: !renderAllColumns,\n        }));\n\n        break;\n      case 'enable-cell-enter-editing':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          enterBeginsEditing: !enterBeginsEditing,\n        }));\n\n        break;\n      case 'enable-arrow-rl-first-last-column':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          autoWrapRow: !autoWrapRow,\n        }));\n\n        break;\n      case 'enable-arrow-td-first-last-column':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          autoWrapCol: !autoWrapCol,\n        }));\n\n        break;\n      case 'enable-enter-focus-editing':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n        }));\n\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <>\n      <div className=\"checkbox-container\">\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-tab-navigation\" id=\"tab-navigation-label\">\n              <input\n                checked={tabNavigation}\n                type=\"checkbox\"\n                id=\"enable-tab-navigation\"\n                name=\"enable-tab-navigation\"\n                aria-label=\"Enable navigation with the Tab key\"\n                onChange={() => handleCheckboxChange('enable-tab-navigation')}\n              />\n              Enable navigation with the Tab key\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#tabnavigation\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-header-navigation\" id=\"header-navigation-label\">\n              <input\n                checked={navigableHeaders}\n                type=\"checkbox\"\n                id=\"enable-header-navigation\"\n                name=\"enable-header-navigation\"\n                aria-labelledby=\"header-navigation-label\"\n                onChange={() => handleCheckboxChange('enable-header-navigation')}\n              />\n              Enable navigation across headers\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#navigableheaders\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-cell-virtualization\" id=\"cell-virtualization-label\">\n              <input\n                checked={!renderAllRows}\n                type=\"checkbox\"\n                id=\"enable-cell-virtualization\"\n                name=\"enable-cell-virtualization\"\n                aria-labelledby=\"cell-virtualization-label\"\n                onChange={() => handleCheckboxChange('enable-cell-virtualization')}\n              />\n              Enable cells virtualization\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#renderAllRows\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about row virtualization (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\">\n              <input\n                checked={enterBeginsEditing}\n                type=\"checkbox\"\n                id=\"enable-cell-enter-editing\"\n                name=\"enable-cell-enter-editing\"\n                aria-labelledby=\"cell-enter-editing-label\"\n                onChange={() => handleCheckboxChange('enable-cell-enter-editing')}\n              />\n              The Enter key begins cell editing\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#enterbeginsediting\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\">\n              <input\n                checked={autoWrapRow}\n                type=\"checkbox\"\n                id=\"enable-arrow-rl-first-last-column\"\n                name=\"enableArrowFirstLastColumn\"\n                aria-labelledby=\"arrow-rl-first-last-column-label\"\n                onChange={() => handleCheckboxChange('enable-arrow-rl-first-last-column')}\n              />\n              The right/left arrow keys wrap focus to the adjacent row\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#autowraprow\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\">\n              <input\n                checked={autoWrapCol}\n                type=\"checkbox\"\n                id=\"enable-arrow-td-first-last-column\"\n                name=\"enable-arrow-td-first-last-column\"\n                aria-labelledby=\"arrow-td-first-last-column-label\"\n                onChange={() => handleCheckboxChange('enable-arrow-td-first-last-column')}\n              />\n              The up/down arrow keys wrap focus to the adjacent column\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\">\n              <input\n                checked={enterMoves.row !== 0}\n                type=\"checkbox\"\n                id=\"enable-enter-focus-editing\"\n                name=\"enable-enter-focus-editing\"\n                aria-labelledby=\"enter-focus-editing-label\"\n                onChange={() => handleCheckboxChange('enable-enter-focus-editing')}\n              />\n              The Enter key moves the focus after cell edition\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#entermoves\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n      </div>\n    </>\n  );\n}\n\nexport default ExampleComponent;","/src/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/react/example2.tsx","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessibility · Accessible data grid demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface Toggle {\n  tabNavigation: boolean;\n  navigableHeaders: boolean;\n  renderAllRows: boolean;\n  renderAllColumns: boolean;\n  enterBeginsEditing: boolean;\n  autoWrapRow: boolean;\n  autoWrapCol: boolean;\n  enterMoves: { col: number; row: number };\n  changeToggleOptions: any;\n}\n\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = data.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Handsontable options\nconst hotOptions = {\n  data,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst ExampleComponent = () => {\n  const [toggleableOptions, setToggleableOptions] = useState<Omit<Toggle, 'changeToggleOptions'>>({\n    tabNavigation: true,\n    navigableHeaders: true,\n    renderAllRows: false,\n    renderAllColumns: false,\n    enterBeginsEditing: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    headerClassName: 'htLeft',\n    enterMoves: { col: 0, row: 1 },\n  });\n\n  return (\n    <div className=\"example-container\">\n      {/* DemoOptions component for changing Handsontable options */}\n      <DemoOptions changeToggleOptions={setToggleableOptions} {...toggleableOptions} />\n\n      <input className=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n\n      {/* Handsontable component with dynamic options */}\n      <HotTable\n        // Handsontable needs to reload when changing virtualization\n        // by changing the key, we force the component to reload\n        key={String(toggleableOptions.renderAllRows)}\n        {...hotOptions}\n        // Pass in the options which can change for demo\n        {...toggleableOptions}\n      >\n        {/* Define HotColumns for the data */}\n        <HotColumn data=\"companyName\" type=\"text\" />\n        <HotColumn data=\"productName\" type=\"text\" />\n        <HotColumn data=\"sellDate\" locale=\"en-GB\" dateFormat={{ day: '2-digit', month: '2-digit', year: 'numeric' }} type=\"intl-date\" />\n        <HotColumn data=\"inStock\" type=\"checkbox\" className=\"htCenter\" headerClassName=\"htCenter\" />\n        <HotColumn data=\"qty\" type=\"numeric\" headerClassName=\"htRight\" />\n        <HotColumn data=\"orderId\" type=\"text\" />\n        <HotColumn data=\"country\" type=\"dropdown\" source={countries} />\n      </HotTable>\n      <input className=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n    </div>\n  );\n};\n\n// Demo Options allows you to change the Handsontable options\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\nfunction DemoOptions({\n  tabNavigation,\n  navigableHeaders,\n  renderAllRows,\n  renderAllColumns,\n  enterBeginsEditing,\n  autoWrapRow,\n  autoWrapCol,\n  enterMoves,\n  changeToggleOptions,\n}: Toggle) {\n  // on checkbox change, update handsontable option\n  const handleCheckboxChange = (checkboxName: string) => {\n    switch (checkboxName) {\n      case 'enable-tab-navigation':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          tabNavigation: !tabNavigation,\n        }));\n\n        break;\n      case 'enable-header-navigation':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          navigableHeaders: !navigableHeaders,\n        }));\n\n        break;\n      case 'enable-cell-virtualization':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          renderAllRows: !renderAllRows,\n          renderAllColumns: !renderAllColumns,\n        }));\n\n        break;\n      case 'enable-cell-enter-editing':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          enterBeginsEditing: !enterBeginsEditing,\n        }));\n\n        break;\n      case 'enable-arrow-rl-first-last-column':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          autoWrapRow: !autoWrapRow,\n        }));\n\n        break;\n      case 'enable-arrow-td-first-last-column':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          autoWrapCol: !autoWrapCol,\n        }));\n\n        break;\n      case 'enable-enter-focus-editing':\n        changeToggleOptions((existing: any) => ({\n          ...existing,\n          enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n        }));\n\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <>\n      <div className=\"checkbox-container\">\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-tab-navigation\" id=\"tab-navigation-label\">\n              <input\n                checked={tabNavigation}\n                type=\"checkbox\"\n                id=\"enable-tab-navigation\"\n                name=\"enable-tab-navigation\"\n                aria-label=\"Enable navigation with the Tab key\"\n                onChange={() => handleCheckboxChange('enable-tab-navigation')}\n              />\n              Enable navigation with the Tab key\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#tabnavigation\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-header-navigation\" id=\"header-navigation-label\">\n              <input\n                checked={navigableHeaders}\n                type=\"checkbox\"\n                id=\"enable-header-navigation\"\n                name=\"enable-header-navigation\"\n                aria-labelledby=\"header-navigation-label\"\n                onChange={() => handleCheckboxChange('enable-header-navigation')}\n              />\n              Enable navigation across headers\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#navigableheaders\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-cell-virtualization\" id=\"cell-virtualization-label\">\n              <input\n                checked={!renderAllRows}\n                type=\"checkbox\"\n                id=\"enable-cell-virtualization\"\n                name=\"enable-cell-virtualization\"\n                aria-labelledby=\"cell-virtualization-label\"\n                onChange={() => handleCheckboxChange('enable-cell-virtualization')}\n              />\n              Enable cells virtualization\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#renderAllRows\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about row virtualization (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\">\n              <input\n                checked={enterBeginsEditing}\n                type=\"checkbox\"\n                id=\"enable-cell-enter-editing\"\n                name=\"enable-cell-enter-editing\"\n                aria-labelledby=\"cell-enter-editing-label\"\n                onChange={() => handleCheckboxChange('enable-cell-enter-editing')}\n              />\n              The Enter key begins cell editing\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#enterbeginsediting\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\">\n              <input\n                checked={autoWrapRow}\n                type=\"checkbox\"\n                id=\"enable-arrow-rl-first-last-column\"\n                name=\"enableArrowFirstLastColumn\"\n                aria-labelledby=\"arrow-rl-first-last-column-label\"\n                onChange={() => handleCheckboxChange('enable-arrow-rl-first-last-column')}\n              />\n              The right/left arrow keys wrap focus to the adjacent row\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#autowraprow\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\">\n              <input\n                checked={autoWrapCol}\n                type=\"checkbox\"\n                id=\"enable-arrow-td-first-last-column\"\n                name=\"enable-arrow-td-first-last-column\"\n                aria-labelledby=\"arrow-td-first-last-column-label\"\n                onChange={() => handleCheckboxChange('enable-arrow-td-first-last-column')}\n              />\n              The up/down arrow keys wrap focus to the adjacent column\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n          <div>\n            <label className=\"option-label\" htmlFor=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\">\n              <input\n                checked={enterMoves.row !== 0}\n                type=\"checkbox\"\n                id=\"enable-enter-focus-editing\"\n                name=\"enable-enter-focus-editing\"\n                aria-labelledby=\"enter-focus-editing-label\"\n                onChange={() => handleCheckboxChange('enable-enter-focus-editing')}\n              />\n              The Enter key moves the focus after cell edition\n            </label>\n            <a\n              href=\"https://handsontable.com/docs/react-data-grid/api/options/#entermoves\"\n              target=\"_blank\"\n              className=\"external-link\"\n              rel=\"noopener noreferrer\"\n              aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" className=\"icon outbound\">\n                <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n                <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n              </svg>\n            </a>\n          </div>\n      </div>\n    </>\n  );\n}\n\nexport default ExampleComponent;","/src/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/react/example2.tsx","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json
index 8932f7106..79b730851 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessibility · Accessible data grid demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = data.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\nconst hotOptions: GridSettings = {\n  data,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst toggleableOptions = ref({\n  tabNavigation: true,\n  navigableHeaders: true,\n  renderAllRows: false,\n  renderAllColumns: false,\n  enterBeginsEditing: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  headerClassName: 'htLeft',\n  enterMoves: { col: 0, row: 1 },\n});\n\nconst hotSettings = computed<GridSettings>(() => ({\n  ...hotOptions,\n  ...toggleableOptions.value,\n}));\n\nconst handleCheckboxChange = (checkboxName: string) => {\n  const current = toggleableOptions.value;\n\n  switch (checkboxName) {\n    case 'enable-tab-navigation':\n      toggleableOptions.value = { ...current, tabNavigation: !current.tabNavigation };\n      break;\n    case 'enable-header-navigation':\n      toggleableOptions.value = { ...current, navigableHeaders: !current.navigableHeaders };\n      break;\n    case 'enable-cell-virtualization':\n      toggleableOptions.value = {\n        ...current,\n        renderAllRows: !current.renderAllRows,\n        renderAllColumns: !current.renderAllColumns,\n      };\n      break;\n    case 'enable-cell-enter-editing':\n      toggleableOptions.value = { ...current, enterBeginsEditing: !current.enterBeginsEditing };\n      break;\n    case 'enable-arrow-rl-first-last-column':\n      toggleableOptions.value = { ...current, autoWrapRow: !current.autoWrapRow };\n      break;\n    case 'enable-arrow-td-first-last-column':\n      toggleableOptions.value = { ...current, autoWrapCol: !current.autoWrapCol };\n      break;\n    case 'enable-enter-focus-editing':\n      toggleableOptions.value = {\n        ...current,\n        enterMoves: current.enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n      };\n      break;\n    default:\n      break;\n  }\n};\n</script>\n\n<template>\n  <div id=\"example2\" class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label class=\"option-label\" for=\"enable-tab-navigation\" id=\"tab-navigation-label\">\n          <input\n            :checked=\"toggleableOptions.tabNavigation\"\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-label=\"Enable navigation with the Tab key\"\n            @change=\"handleCheckboxChange('enable-tab-navigation')\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-header-navigation\" id=\"header-navigation-label\">\n          <input\n            :checked=\"toggleableOptions.navigableHeaders\"\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n            @change=\"handleCheckboxChange('enable-header-navigation')\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-cell-virtualization\" id=\"cell-virtualization-label\">\n          <input\n            :checked=\"!toggleableOptions.renderAllRows\"\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n            @change=\"handleCheckboxChange('enable-cell-virtualization')\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\">\n          <input\n            :checked=\"toggleableOptions.enterBeginsEditing\"\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n            @change=\"handleCheckboxChange('enable-cell-enter-editing')\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\">\n          <input\n            :checked=\"toggleableOptions.autoWrapRow\"\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enableArrowFirstLastColumn\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n            @change=\"handleCheckboxChange('enable-arrow-rl-first-last-column')\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\">\n          <input\n            :checked=\"toggleableOptions.autoWrapCol\"\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n            @change=\"handleCheckboxChange('enable-arrow-td-first-last-column')\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\">\n          <input\n            :checked=\"toggleableOptions.enterMoves.row !== 0\"\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n            @change=\"handleCheckboxChange('enable-enter-focus-editing')\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n\n    <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n\n    <HotTable\n      :key=\"String(toggleableOptions.renderAllRows)\"\n      :settings=\"hotSettings\"\n    >\n      <HotColumn data=\"companyName\" type=\"text\" />\n      <HotColumn data=\"productName\" type=\"text\" />\n      <HotColumn\n        data=\"sellDate\"\n        locale=\"en-GB\"\n        :date-format=\"{ day: '2-digit', month: '2-digit', year: 'numeric' }\"\n        type=\"intl-date\"\n      />\n      <HotColumn data=\"inStock\" type=\"checkbox\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n      <HotColumn data=\"qty\" type=\"numeric\" header-class-name=\"htRight\" />\n      <HotColumn data=\"orderId\" type=\"text\" />\n      <HotColumn data=\"country\" type=\"dropdown\" :source=\"countries\" />\n    </HotTable>\n\n    <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n  </div>\n</template>","/src/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/accessibility/accessibility/vue/example2.vue","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessibility · Accessible data grid demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface Product {\n  companyName: string;\n  productName: string;\n  sellDate: string;\n  inStock: boolean;\n  qty: number;\n  orderId: string;\n  country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-07-05',\n    inStock: false,\n    qty: 82,\n    orderId: '16-3974628',\n    country: 'United Kingdom',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-05-31',\n    inStock: false,\n    qty: 459,\n    orderId: '77-7839351',\n    country: 'Costa Rica',\n  },\n  {\n    companyName: 'Reichert LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-16',\n    inStock: false,\n    qty: 318,\n    orderId: '75-6343150',\n    country: 'United States of America',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-24',\n    inStock: true,\n    qty: 177,\n    orderId: '56-3608689',\n    country: 'Pitcairn Islands',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-29',\n    inStock: true,\n    qty: 51,\n    orderId: '58-1204318',\n    country: 'Argentina',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-03-27',\n    inStock: false,\n    qty: 439,\n    orderId: '62-6066132',\n    country: 'Senegal',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2022-11-24',\n    inStock: false,\n    qty: 493,\n    orderId: '76-7785471',\n    country: 'Cyprus',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-08-11',\n    inStock: false,\n    qty: 225,\n    orderId: '34-3551159',\n    country: 'Saint Martin',\n  },\n  {\n    companyName: 'Hodkiewicz - Hintz',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-02-07',\n    inStock: false,\n    qty: 261,\n    orderId: '77-1112514',\n    country: 'Chile',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-06',\n    inStock: false,\n    qty: 439,\n    orderId: '12-3252385',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-04-22',\n    inStock: true,\n    qty: 235,\n    orderId: '71-7639998',\n    country: 'Brazil',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2022-12-13',\n    inStock: true,\n    qty: 163,\n    orderId: '68-1588829',\n    country: 'Burkina Faso',\n  },\n  {\n    companyName: 'Jenkins LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-03-26',\n    inStock: true,\n    qty: 8,\n    orderId: '61-6324553',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 355,\n    orderId: '74-6985005',\n    country: 'Mozambique',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-08-01',\n    inStock: false,\n    qty: 186,\n    orderId: '84-4370131',\n    country: 'Cocos (Keeling) Islands',\n  },\n  {\n    companyName: 'Rempel - Durgan',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 284,\n    orderId: '13-6461825',\n    country: 'Monaco',\n  },\n  {\n    companyName: 'Lesch - Jakubowski',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-09-26',\n    inStock: true,\n    qty: 492,\n    orderId: '13-9465439',\n    country: 'Iran',\n  },\n  {\n    companyName: 'Jacobi - Kutch',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-05-04',\n    inStock: true,\n    qty: 300,\n    orderId: '76-5194058',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'Gerhold - Rowe',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-07-07',\n    inStock: true,\n    qty: 493,\n    orderId: '61-8600792',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Johnston - Wisozk',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-07-14',\n    inStock: false,\n    qty: 304,\n    orderId: '10-6007287',\n    country: 'Romania',\n  },\n  {\n    companyName: 'Gutkowski Inc',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-01-10',\n    inStock: true,\n    qty: 375,\n    orderId: '25-1164132',\n    country: 'Afghanistan',\n  },\n  {\n    companyName: 'Koepp and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-03-30',\n    inStock: false,\n    qty: 365,\n    orderId: '75-7975820',\n    country: 'Germany',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 308,\n    orderId: '59-6251875',\n    country: 'Tajikistan',\n  },\n  {\n    companyName: 'Mills Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 191,\n    orderId: '67-7521441',\n    country: 'Puerto Rico',\n  },\n  {\n    companyName: 'Zboncak and Sons',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-03-18',\n    inStock: false,\n    qty: 208,\n    orderId: '19-4264192',\n    country: 'Bolivia',\n  },\n  {\n    companyName: 'Rath LLC',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-06-14',\n    inStock: true,\n    qty: 191,\n    orderId: '78-5742060',\n    country: 'Benin',\n  },\n  {\n    companyName: 'Upton - Reichert',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-02-27',\n    inStock: false,\n    qty: 45,\n    orderId: '26-6191298',\n    country: 'Tunisia',\n  },\n  {\n    companyName: 'Carroll Group',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 385,\n    orderId: '13-7828353',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Reichel Group',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2022-12-12',\n    inStock: true,\n    qty: 117,\n    orderId: '67-9643738',\n    country: 'Mongolia',\n  },\n  {\n    companyName: 'Kozey Inc',\n    productName: 'Rustic Soft Ball',\n    sellDate: '2023-03-24',\n    inStock: false,\n    qty: 335,\n    orderId: '78-1331653',\n    country: 'Angola',\n  },\n  {\n    companyName: 'Brown LLC',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-06-13',\n    inStock: true,\n    qty: 305,\n    orderId: '63-2315723',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-07',\n    inStock: true,\n    qty: 409,\n    orderId: '53-6782557',\n    country: 'Indonesia',\n  },\n  {\n    companyName: 'OReilly LLC',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-05-18',\n    inStock: true,\n    qty: 318,\n    orderId: '91-7787675',\n    country: 'Mayotte',\n  },\n  {\n    companyName: 'Weber Inc',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-04-20',\n    inStock: false,\n    qty: 234,\n    orderId: '41-3560672',\n    country: 'Switzerland',\n  },\n  {\n    companyName: 'Hodkiewicz Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-10-19',\n    inStock: true,\n    qty: 136,\n    orderId: '48-6028776',\n    country: 'Peru',\n  },\n  {\n    companyName: 'Lesch and Sons',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-09-29',\n    inStock: false,\n    qty: 187,\n    orderId: '84-3770456',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Pouros - Brakus',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-01-29',\n    inStock: false,\n    qty: 350,\n    orderId: '08-4844950',\n    country: 'Isle of Man',\n  },\n  {\n    companyName: 'Batz - Rice',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-11-06',\n    inStock: false,\n    qty: 252,\n    orderId: '88-4899852',\n    country: 'Burundi',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Fresh Fish',\n    sellDate: '2023-09-05',\n    inStock: true,\n    qty: 306,\n    orderId: '06-5022461',\n    country: 'Mauritius',\n  },\n  {\n    companyName: 'Hills and Sons',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-11-07',\n    inStock: false,\n    qty: 435,\n    orderId: '99-5539911',\n    country: 'Somalia',\n  },\n  {\n    companyName: 'Shanahan - Boyle',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-19',\n    inStock: true,\n    qty: 171,\n    orderId: '82-8162453',\n    country: 'Virgin Islands, U.S.',\n  },\n  {\n    companyName: 'Luettgen Inc',\n    productName: 'Awesome Wooden Hat',\n    sellDate: '2023-09-30',\n    inStock: false,\n    qty: 6,\n    orderId: '02-8118250',\n    country: 'Colombia',\n  },\n  {\n    companyName: 'Hegmann Inc',\n    productName: 'Small Rubber Shoes',\n    sellDate: '2023-02-16',\n    inStock: true,\n    qty: 278,\n    orderId: '07-9773343',\n    country: 'Central African Republic',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-08-08',\n    inStock: false,\n    qty: 264,\n    orderId: '66-4470479',\n    country: 'Norfolk Island',\n  },\n  {\n    companyName: 'Kub Inc',\n    productName: 'Tasty Frozen Table',\n    sellDate: '2023-06-06',\n    inStock: true,\n    qty: 494,\n    orderId: '13-1175339',\n    country: 'Liechtenstein',\n  },\n  {\n    companyName: 'Hahn - Welch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-06-12',\n    inStock: false,\n    qty: 485,\n    orderId: '32-9127309',\n    country: 'Bahrain',\n  },\n  {\n    companyName: 'Nader - Fritsch',\n    productName: 'Small Frozen Tuna',\n    sellDate: '2023-04-08',\n    inStock: true,\n    qty: 332,\n    orderId: '41-3774568',\n    country: 'Montserrat',\n  },\n  {\n    companyName: 'Crona and Sons',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-06-21',\n    inStock: true,\n    qty: 104,\n    orderId: '48-9995090',\n    country: 'Syrian Arab Republic',\n  },\n  {\n    companyName: 'Lind Group',\n    productName: 'Rustic Cotton Ball',\n    sellDate: '2023-08-17',\n    inStock: false,\n    qty: 51,\n    orderId: '68-9599400',\n    country: 'Czech Republic',\n  },\n  {\n    companyName: 'Labadie LLC',\n    productName: 'Small Fresh Bacon',\n    sellDate: '2023-04-20',\n    inStock: true,\n    qty: 155,\n    orderId: '52-4334332',\n    country: 'Croatia',\n  },\n  {\n    companyName: 'Doyle Group',\n    productName: 'Sleek Wooden Bacon',\n    sellDate: '2023-07-23',\n    inStock: false,\n    qty: 465,\n    orderId: '63-8894526',\n    country: 'Indonesia',\n  },\n];\n\nconst countries = data.reduce<string[]>((acc, curr) => {\n  if (acc.includes(curr.country)) {\n    return acc;\n  }\n\n  return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\nconst hotOptions: GridSettings = {\n  data,\n  height: 464,\n  colWidths: [160, 165, 130, 120, 100, 110, 216],\n  autoRowSize: true,\n  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst toggleableOptions = ref({\n  tabNavigation: true,\n  navigableHeaders: true,\n  renderAllRows: false,\n  renderAllColumns: false,\n  enterBeginsEditing: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  headerClassName: 'htLeft',\n  enterMoves: { col: 0, row: 1 },\n});\n\nconst hotSettings = computed<GridSettings>(() => ({\n  ...hotOptions,\n  ...toggleableOptions.value,\n}));\n\nconst handleCheckboxChange = (checkboxName: string) => {\n  const current = toggleableOptions.value;\n\n  switch (checkboxName) {\n    case 'enable-tab-navigation':\n      toggleableOptions.value = { ...current, tabNavigation: !current.tabNavigation };\n      break;\n    case 'enable-header-navigation':\n      toggleableOptions.value = { ...current, navigableHeaders: !current.navigableHeaders };\n      break;\n    case 'enable-cell-virtualization':\n      toggleableOptions.value = {\n        ...current,\n        renderAllRows: !current.renderAllRows,\n        renderAllColumns: !current.renderAllColumns,\n      };\n      break;\n    case 'enable-cell-enter-editing':\n      toggleableOptions.value = { ...current, enterBeginsEditing: !current.enterBeginsEditing };\n      break;\n    case 'enable-arrow-rl-first-last-column':\n      toggleableOptions.value = { ...current, autoWrapRow: !current.autoWrapRow };\n      break;\n    case 'enable-arrow-td-first-last-column':\n      toggleableOptions.value = { ...current, autoWrapCol: !current.autoWrapCol };\n      break;\n    case 'enable-enter-focus-editing':\n      toggleableOptions.value = {\n        ...current,\n        enterMoves: current.enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n      };\n      break;\n    default:\n      break;\n  }\n};\n</script>\n\n<template>\n  <div id=\"example2\" class=\"example-container\">\n    <div class=\"checkbox-container\">\n      <div>\n        <label class=\"option-label\" for=\"enable-tab-navigation\" id=\"tab-navigation-label\">\n          <input\n            :checked=\"toggleableOptions.tabNavigation\"\n            type=\"checkbox\"\n            id=\"enable-tab-navigation\"\n            name=\"enable-tab-navigation\"\n            aria-label=\"Enable navigation with the Tab key\"\n            @change=\"handleCheckboxChange('enable-tab-navigation')\"\n          />\n          Enable navigation with the Tab key\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#tabnavigation\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more enabling/disabling tab navigation (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-header-navigation\" id=\"header-navigation-label\">\n          <input\n            :checked=\"toggleableOptions.navigableHeaders\"\n            type=\"checkbox\"\n            id=\"enable-header-navigation\"\n            name=\"enable-header-navigation\"\n            aria-labelledby=\"header-navigation-label\"\n            @change=\"handleCheckboxChange('enable-header-navigation')\"\n          />\n          Enable navigation across headers\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#navigableheaders\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about enabling/disabling tab navigation across headers (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-cell-virtualization\" id=\"cell-virtualization-label\">\n          <input\n            :checked=\"!toggleableOptions.renderAllRows\"\n            type=\"checkbox\"\n            id=\"enable-cell-virtualization\"\n            name=\"enable-cell-virtualization\"\n            aria-labelledby=\"cell-virtualization-label\"\n            @change=\"handleCheckboxChange('enable-cell-virtualization')\"\n          />\n          Enable cells virtualization\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#renderAllRows\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about row virtualization (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-cell-enter-editing\" id=\"cell-enter-editing-label\">\n          <input\n            :checked=\"toggleableOptions.enterBeginsEditing\"\n            type=\"checkbox\"\n            id=\"enable-cell-enter-editing\"\n            name=\"enable-cell-enter-editing\"\n            aria-labelledby=\"cell-enter-editing-label\"\n            @change=\"handleCheckboxChange('enable-cell-enter-editing')\"\n          />\n          The Enter key begins cell editing\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#enterbeginsediting\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key cell editing (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-arrow-rl-first-last-column\" id=\"arrow-rl-first-last-column-label\">\n          <input\n            :checked=\"toggleableOptions.autoWrapRow\"\n            type=\"checkbox\"\n            id=\"enable-arrow-rl-first-last-column\"\n            name=\"enableArrowFirstLastColumn\"\n            aria-labelledby=\"arrow-rl-first-last-column-label\"\n            @change=\"handleCheckboxChange('enable-arrow-rl-first-last-column')\"\n          />\n          The right/left arrow keys wrap focus to the adjacent row\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#autowraprow\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about right/left arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-arrow-td-first-last-column\" id=\"arrow-td-first-last-column-label\">\n          <input\n            :checked=\"toggleableOptions.autoWrapCol\"\n            type=\"checkbox\"\n            id=\"enable-arrow-td-first-last-column\"\n            name=\"enable-arrow-td-first-last-column\"\n            aria-labelledby=\"arrow-td-first-last-column-label\"\n            @change=\"handleCheckboxChange('enable-arrow-td-first-last-column')\"\n          />\n          The up/down arrow keys wrap focus to the adjacent column\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#autowrapcol\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about up/down arrow key behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n      <div>\n        <label class=\"option-label\" for=\"enable-enter-focus-editing\" id=\"enter-focus-editing-label\">\n          <input\n            :checked=\"toggleableOptions.enterMoves.row !== 0\"\n            type=\"checkbox\"\n            id=\"enable-enter-focus-editing\"\n            name=\"enable-enter-focus-editing\"\n            aria-labelledby=\"enter-focus-editing-label\"\n            @change=\"handleCheckboxChange('enable-enter-focus-editing')\"\n          />\n          The Enter key moves the focus after cell edition\n        </label>\n        <a\n          href=\"https://handsontable.com/docs/vue-data-grid/api/options/#entermoves\"\n          target=\"_blank\"\n          class=\"external-link\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Learn more about Enter key focus behavior (opens in a new window)\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" width=\"15\" height=\"15\" class=\"icon outbound\">\n            <path fill=\"currentColor\" d=\"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z\" />\n            <polygon fill=\"currentColor\" points=\"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n\n    <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n\n    <HotTable\n      :key=\"String(toggleableOptions.renderAllRows)\"\n      :settings=\"hotSettings\"\n    >\n      <HotColumn data=\"companyName\" type=\"text\" />\n      <HotColumn data=\"productName\" type=\"text\" />\n      <HotColumn\n        data=\"sellDate\"\n        locale=\"en-GB\"\n        :date-format=\"{ day: '2-digit', month: '2-digit', year: 'numeric' }\"\n        type=\"intl-date\"\n      />\n      <HotColumn data=\"inStock\" type=\"checkbox\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n      <HotColumn data=\"qty\" type=\"numeric\" header-class-name=\"htRight\" />\n      <HotColumn data=\"orderId\" type=\"text\" />\n      <HotColumn data=\"country\" type=\"dropdown\" :source=\"countries\" />\n    </HotTable>\n\n    <input class=\"placeholder-input\" type=\"text\" placeholder=\"Focusable text input\" />\n  </div>\n</template>","/src/styles.css":".checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0 -1rem 0 !important;\n  padding: 0 1rem 0.75rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n  display: flex;\n}\n\n.checkbox-container > div > label {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n.external-link {\n  margin-left: 0.5rem;\n  position: relative;\n  top: 2px;\n  color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n  color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n  We want the focus to be around input and label, in order to achieve this,\n  we remove focus from the input and add it to the label (wrapper in this case)\n  we then use the :focus-within pseudo class plus native focus styles\n  https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n  outline: 5px auto Highlight;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n  outline: none;\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/accessibility/accessibility/vue/example2.vue","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json
index 9e424f4bb..7ee003edc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json
index faf1004a6..7e6308835 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    dropdownMenu: [\n      'remove_col',\n      '---------',\n      'make_read_only',\n      '---------',\n      'alignment',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    dropdownMenu: [\n      'remove_col',\n      '---------',\n      'make_read_only',\n      '---------',\n      'alignment',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json
index 00572582a..b9330a35f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json
index 8253f3b97..61bfeed03 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json
index 9f1ea3299..eea710f2f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json
index 8ea587682..9f59df54f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json
index 00421d473..8a746cf1c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json
index fe858053f..bdccdd1c5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      dropdownMenu={['remove_col', '---------', 'make_read_only', '---------', 'alignment']}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      dropdownMenu={['remove_col', '---------', 'make_read_only', '---------', 'alignment']}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json
index 66c2b416b..221425af3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json
index 6be23a34f..d15f7ef95 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n  ],\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json
index 1241e40e1..4cc54c91c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    contextMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    contextMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json
index b1784bf06..f08510d1d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json
index b4c50d2f1..a644f4136 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const contextMenuSettings = {\n      callback(key: string, selection: any, clickEvent: any) {\n        // Common callback for all options\n        console.log(key, selection, clickEvent);\n      },\n      items: {\n        row_above: {\n          disabled(this: Handsontable): boolean {\n            // `disabled` can be a boolean or a function\n            // Disable option when first row was clicked\n            return this.getSelectedLast()?.[0] === 0; // `this` === hot\n          },\n        },\n        // Use the dedicated separator constant to insert a separator line\n        // (the key has to be unique)\n        sp1: ContextMenu.SEPARATOR,\n        row_below: {\n          name: 'Click to add row below',\n        },\n        about: {\n          // Own custom option\n          name() {\n            // `name` can be a string or a function\n            return '<b>Custom option</b>'; // Name can contain HTML\n          },\n          hidden(this: Handsontable): boolean {\n            // `hidden` can be a boolean or a function\n            // Hide the option when the first column was clicked\n            return this.getSelectedLast()?.[1] == 0; // `this` === hot\n          },\n          callback() {\n            // Callback for specific option\n            setTimeout(() => {\n              alert('Hello world!'); // Fire alert after menu close (with timeout)\n            }, 0);\n          },\n        },\n        colors: {\n          // Own custom option\n          name: 'Colors...',\n          submenu: {\n            // Custom option with submenu of items\n            items: [\n              {\n                // Key must be in the form 'parent_key:child_key'\n                key: 'colors:red',\n                name: 'Red',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked red!');\n                  }, 0);\n                },\n              },\n              {\n                key: 'colors:green',\n                name: 'Green',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked green!');\n                  }, 0);\n                },\n              },\n              {\n                key: 'colors:blue',\n                name: 'Blue',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked blue!');\n                  }, 0);\n                },\n              },\n            ],\n          },\n        },\n        credits: {\n          // Own custom property\n          // Custom rendered element in the context menu\n          renderer() {\n            const elem = document.createElement('marquee');\n\n            elem.style.cssText = 'background: lightgray; color: #222222;';\n            elem.textContent = 'Brought to you by...';\n\n            return elem;\n          },\n          disableSelection: true,\n          isCommand: false,\n        },\n      },\n    };\n\n    this.hotSettings = {\n      rowHeaders: true,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      height: 'auto',\n      contextMenu: contextMenuSettings,\n      // Required for the HTML in the `about` item's label to be rendered safely\n      sanitizer: sanitizeMenuLabel,\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const contextMenuSettings = {\n      callback(key: string, selection: any, clickEvent: any) {\n        // Common callback for all options\n        console.log(key, selection, clickEvent);\n      },\n      items: {\n        row_above: {\n          disabled(this: Handsontable): boolean {\n            // `disabled` can be a boolean or a function\n            // Disable option when first row was clicked\n            return this.getSelectedLast()?.[0] === 0; // `this` === hot\n          },\n        },\n        // Use the dedicated separator constant to insert a separator line\n        // (the key has to be unique)\n        sp1: ContextMenu.SEPARATOR,\n        row_below: {\n          name: 'Click to add row below',\n        },\n        about: {\n          // Own custom option\n          name() {\n            // `name` can be a string or a function\n            return '<b>Custom option</b>'; // Name can contain HTML\n          },\n          hidden(this: Handsontable): boolean {\n            // `hidden` can be a boolean or a function\n            // Hide the option when the first column was clicked\n            return this.getSelectedLast()?.[1] == 0; // `this` === hot\n          },\n          callback() {\n            // Callback for specific option\n            setTimeout(() => {\n              alert('Hello world!'); // Fire alert after menu close (with timeout)\n            }, 0);\n          },\n        },\n        colors: {\n          // Own custom option\n          name: 'Colors...',\n          submenu: {\n            // Custom option with submenu of items\n            items: [\n              {\n                // Key must be in the form 'parent_key:child_key'\n                key: 'colors:red',\n                name: 'Red',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked red!');\n                  }, 0);\n                },\n              },\n              {\n                key: 'colors:green',\n                name: 'Green',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked green!');\n                  }, 0);\n                },\n              },\n              {\n                key: 'colors:blue',\n                name: 'Blue',\n                callback() {\n                  setTimeout(() => {\n                    alert('You clicked blue!');\n                  }, 0);\n                },\n              },\n            ],\n          },\n        },\n        credits: {\n          // Own custom property\n          // Custom rendered element in the context menu\n          renderer() {\n            const elem = document.createElement('marquee');\n\n            elem.style.cssText = 'background: lightgray; color: #222222;';\n            elem.textContent = 'Brought to you by...';\n\n            return elem;\n          },\n          disableSelection: true,\n          isCommand: false,\n        },\n      },\n    };\n\n    this.hotSettings = {\n      rowHeaders: true,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      height: 'auto',\n      contextMenu: contextMenuSettings,\n      // Required for the HTML in the `about` item's label to be rendered safely\n      sanitizer: sanitizeMenuLabel,\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json
index 0cc7be615..c6a8dda91 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json
index 0cc3cd7b4..b17df7fad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json
index 855539ea6..ba910e711 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json
index e63432b87..269846111 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json
index 442d84acc..c905e3cc4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json
index 42b094772..3fb8da33c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json
index 9e6e72b23..b8c5d865c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      contextMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      contextMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json
index 1def33740..cc0bd0b7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      contextMenu={['row_above', 'row_below', 'remove_row', 'clear_column']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      contextMenu={['row_above', 'row_below', 'remove_row', 'clear_column']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json
index d9e89cf5d..a4f826927 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      contextMenu={contextMenuSettings}\n      // Required for the HTML in the `about` item's label to be rendered safely\n      sanitizer={sanitizeMenuLabel}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example3.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    // Common callback for all options\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        // `disabled` can be a boolean or a function\n        // Disable option when first row was clicked\n        return this.getSelectedLast()?.[0] === 0; // `this` === hot\n      },\n    },\n    // Use the dedicated separator constant to insert a separator line\n    // (the key has to be unique)\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below', // Set custom text for predefined option\n    },\n    about: {\n      // Own custom option\n      name() {\n        // `name` can be a string or a function\n        return '<b>Custom option</b>'; // Name can contain HTML\n      },\n      hidden() {\n        // `hidden` can be a boolean or a function\n        // Hide the option when the first column was clicked\n        return this.getSelectedLast()?.[1] == 0; // `this` === hot\n      },\n      callback() {\n        // Callback for specific option\n        setTimeout(() => {\n          alert('Hello world!'); // Fire alert after menu close (with timeout)\n        }, 0);\n      },\n    },\n    colors: {\n      // Own custom option\n      name: 'Colors...',\n      submenu: {\n        // Custom option with submenu of items\n        items: [\n          {\n            // Key must be in the form 'parent_key:child_key'\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      // Own custom property\n      // Custom rendered element in the context menu\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n      isCommand: false, // Prevent clicks from executing command and closing the menu\n    },\n  },\n};\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      contextMenu={contextMenuSettings}\n      // Required for the HTML in the `about` item's label to be rendered safely\n      sanitizer={sanitizeMenuLabel}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example3.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json
index 645489e21..feb7a77c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      data={data}\n      colHeaders={true}\n      height=\"auto\"\n      contextMenu={{\n        items: {\n          row_above: {\n            name: 'Insert row above this one (custom name)',\n          },\n          row_below: {},\n          separator: ContextMenu.SEPARATOR,\n          clear_custom: {\n            name: 'Clear all cells (custom)',\n            callback() {\n              this.clear();\n            },\n          },\n        },\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example4.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      data={data}\n      colHeaders={true}\n      height=\"auto\"\n      contextMenu={{\n        items: {\n          row_above: {\n            name: 'Insert row above this one (custom name)',\n          },\n          row_below: {},\n          separator: ContextMenu.SEPARATOR,\n          clear_custom: {\n            name: 'Clear all cells (custom)',\n            callback() {\n              this.clear();\n            },\n          },\n        },\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example4.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json
index 290a29fe8..52b0dee7c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json
index be7f1c53e..844ed2bde 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json
index 2e5f82bf6..c087ab931 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport type { DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        return this.getSelectedLast()?.[0] === 0;\n      },\n    },\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below',\n    },\n    about: {\n      name() {\n        return '<b>Custom option</b>';\n      },\n      hidden() {\n        return this.getSelectedLast()?.[1] == 0;\n      },\n      callback() {\n        setTimeout(() => {\n          alert('Hello world!');\n        }, 0);\n      },\n    },\n    colors: {\n      name: 'Colors...',\n      submenu: {\n        items: [\n          {\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true,\n      isCommand: false,\n    },\n  },\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example3.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport type { DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'I', 'EM', 'STRONG', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeMenuLabel = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst contextMenuSettings: DetailedSettings = {\n  callback(key, selection, clickEvent) {\n    console.log(key, selection, clickEvent);\n  },\n  items: {\n    row_above: {\n      disabled() {\n        return this.getSelectedLast()?.[0] === 0;\n      },\n    },\n    sp1: ContextMenu.SEPARATOR,\n    row_below: {\n      name: 'Click to add row below',\n    },\n    about: {\n      name() {\n        return '<b>Custom option</b>';\n      },\n      hidden() {\n        return this.getSelectedLast()?.[1] == 0;\n      },\n      callback() {\n        setTimeout(() => {\n          alert('Hello world!');\n        }, 0);\n      },\n    },\n    colors: {\n      name: 'Colors...',\n      submenu: {\n        items: [\n          {\n            key: 'colors:red',\n            name: 'Red',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked red!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:green',\n            name: 'Green',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked green!');\n              }, 0);\n            },\n          },\n          {\n            key: 'colors:blue',\n            name: 'Blue',\n            callback() {\n              setTimeout(() => {\n                alert('You clicked blue!');\n              }, 0);\n            },\n          },\n        ],\n      },\n    },\n    credits: {\n      renderer() {\n        const elem = document.createElement('marquee');\n\n        elem.style.cssText = 'background: lightgray; color: #222222;';\n        elem.textContent = 'Brought to you by...';\n\n        return elem;\n      },\n      disableSelection: true,\n      isCommand: false,\n    },\n  },\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  contextMenu: contextMenuSettings,\n  // Required for the HTML in the `about` item's label to be rendered safely\n  sanitizer: sanitizeMenuLabel,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example3.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json
index 88de68667..0f345718f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  contextMenu: {\n    items: {\n      row_above: {\n        name: 'Insert row above this one (custom name)',\n      },\n      row_below: {},\n      separator: ContextMenu.SEPARATOR,\n      clear_custom: {\n        name: 'Clear all cells (custom)',\n        callback() {\n          this.clear();\n        },\n      },\n    },\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example4.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  contextMenu: {\n    items: {\n      row_above: {\n        name: 'Insert row above this one (custom name)',\n      },\n      row_below: {},\n      separator: ContextMenu.SEPARATOR,\n      clear_custom: {\n        name: 'Clear all cells (custom)',\n        callback() {\n          this.clear();\n        },\n      },\n    },\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example4.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json
index 31ee93a16..066157e78 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = tableData;\n\n  readonly hotSettings: GridSettings = {\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n  HOT_GLOBAL_CONFIG,\n  HotGlobalConfig,\n  NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/angular/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = tableData;\n\n  readonly hotSettings: GridSettings = {\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n  HOT_GLOBAL_CONFIG,\n  HotGlobalConfig,\n  NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/angular/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json
index d2ec1881b..e6f3338e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <div style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;font:13px/1.4 sans-serif;color:#334155;\">\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">interval.min: {{ intervalMin }} ms</b>\n          <input type=\"range\" min=\"10\" max=\"200\" step=\"10\" [value]=\"intervalMin\"\n            (input)=\"onSliderChange($event, 'intervalMin')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">interval.max: {{ intervalMax }} ms</b>\n          <input type=\"range\" min=\"100\" max=\"1000\" step=\"50\" [value]=\"intervalMax\"\n            (input)=\"onSliderChange($event, 'intervalMax')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">rampDistance: {{ rampDistance }} px</b>\n          <input type=\"range\" min=\"20\" max=\"300\" step=\"10\" [value]=\"rampDistance\"\n            (input)=\"onSliderChange($event, 'rampDistance')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n      </div>\n      <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = tableData;\n\n  intervalMin = 20;\n  intervalMax = 500;\n  rampDistance = 120;\n\n  hotSettings: GridSettings = {\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    // Configurable `interval`/`rampDistance` for `dragToScroll` is not available in 17.1.0, where\n    // the option is typed as `boolean`. The cast keeps the example compiling against 17.1.0; at\n    // runtime the object is truthy, so drag-to-scroll is enabled (the custom speed is ignored there).\n    dragToScroll: {\n      interval: { min: this.intervalMin, max: this.intervalMax },\n      rampDistance: this.rampDistance,\n    } as unknown as GridSettings['dragToScroll'],\n  };\n\n  onSliderChange(event: Event, field: 'intervalMin' | 'intervalMax' | 'rampDistance'): void {\n    this[field] = Number((event.target as HTMLInputElement).value);\n    this.sync();\n  }\n\n  sync(): void {\n    this.hotSettings = {\n      ...this.hotSettings,\n      dragToScroll: {\n        interval: { min: this.intervalMin, max: this.intervalMax },\n        rampDistance: this.rampDistance,\n      } as unknown as GridSettings['dragToScroll'],\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n  HOT_GLOBAL_CONFIG,\n  HotGlobalConfig,\n  NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/angular/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <div style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;font:13px/1.4 sans-serif;color:#334155;\">\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">interval.min: {{ intervalMin }} ms</b>\n          <input type=\"range\" min=\"10\" max=\"200\" step=\"10\" [value]=\"intervalMin\"\n            (input)=\"onSliderChange($event, 'intervalMin')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">interval.max: {{ intervalMax }} ms</b>\n          <input type=\"range\" min=\"100\" max=\"1000\" step=\"50\" [value]=\"intervalMax\"\n            (input)=\"onSliderChange($event, 'intervalMax')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n        <label style=\"display:flex;flex-direction:column;gap:4px;\">\n          <b style=\"font-family:monospace\">rampDistance: {{ rampDistance }} px</b>\n          <input type=\"range\" min=\"20\" max=\"300\" step=\"10\" [value]=\"rampDistance\"\n            (input)=\"onSliderChange($event, 'rampDistance')\" style=\"width:200px;cursor:pointer;\">\n        </label>\n      </div>\n      <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = tableData;\n\n  intervalMin = 20;\n  intervalMax = 500;\n  rampDistance = 120;\n\n  hotSettings: GridSettings = {\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    // Configurable `interval`/`rampDistance` for `dragToScroll` is not available in 17.1.0, where\n    // the option is typed as `boolean`. The cast keeps the example compiling against 17.1.0; at\n    // runtime the object is truthy, so drag-to-scroll is enabled (the custom speed is ignored there).\n    dragToScroll: {\n      interval: { min: this.intervalMin, max: this.intervalMax },\n      rampDistance: this.rampDistance,\n    } as unknown as GridSettings['dragToScroll'],\n  };\n\n  onSliderChange(event: Event, field: 'intervalMin' | 'intervalMax' | 'rampDistance'): void {\n    this[field] = Number((event.target as HTMLInputElement).value);\n    this.sync();\n  }\n\n  sync(): void {\n    this.hotSettings = {\n      ...this.hotSettings,\n      dragToScroll: {\n        interval: { min: this.intervalMin, max: this.intervalMax },\n        rampDistance: this.rampDistance,\n      } as unknown as GridSettings['dragToScroll'],\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n  HOT_GLOBAL_CONFIG,\n  HotGlobalConfig,\n  NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/angular/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json
index b36a1132a..f4837afd4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst container = document.querySelector('#example1');\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n    colHeaders.push(`${months[monthIndex]} ${year}`);\n    monthIndex += 1;\n    if (monthIndex >= months.length) {\n        monthIndex = 0;\n        year += 1;\n    }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n    const rowData = [`CC-${1000 + row}`];\n    for (let col = 0; col < 49; col++) {\n        rowData.push(2000 + row * 100 + col * 50);\n    }\n    data.push(rowData);\n}\nnew Handsontable(container, {\n    data,\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst container = document.querySelector('#example1');\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n    colHeaders.push(`${months[monthIndex]} ${year}`);\n    monthIndex += 1;\n    if (monthIndex >= months.length) {\n        monthIndex = 0;\n        year += 1;\n    }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n    const rowData = [`CC-${1000 + row}`];\n    for (let col = 0; col < 49; col++) {\n        rowData.push(2000 + row * 100 + col * 50);\n    }\n    data.push(rowData);\n}\nnew Handsontable(container, {\n    data,\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json
index ae12f6f09..a89c9a512 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nnew Handsontable(container, {\n  data,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nnew Handsontable(container, {\n  data,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json
index fa2b75f84..b2814a21a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n    colHeaders.push(`${months[monthIndex]} ${year}`);\n    monthIndex += 1;\n    if (monthIndex >= months.length) {\n        monthIndex = 0;\n        year += 1;\n    }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n    const rowData = [`CC-${1000 + row}`];\n    for (let col = 0; col < 49; col++) {\n        rowData.push(2000 + row * 100 + col * 50);\n    }\n    data.push(rowData);\n}\n// Root layout\nconst root = document.querySelector('#example2');\nroot.innerHTML = `\n  <div id=\"dts-sliders\" style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;\n       font:13px/1.4 sans-serif;color:#334155;\"></div>\n  <div id=\"dts-hot\"></div>\n`;\nfunction addSlider(label, unit, min, max, step, initialValue, onChange) {\n    const wrapper = document.createElement('label');\n    wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n    const nameLabel = document.createElement('b');\n    nameLabel.style.fontFamily = 'monospace';\n    nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n    const input = document.createElement('input');\n    input.type = 'range';\n    input.min = String(min);\n    input.max = String(max);\n    input.step = String(step);\n    input.value = String(initialValue);\n    input.style.cssText = 'width:200px;cursor:pointer;';\n    input.addEventListener('input', () => {\n        nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n        onChange(Number(input.value));\n    });\n    wrapper.append(nameLabel, input);\n    document.getElementById('dts-sliders').appendChild(wrapper);\n}\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\nconst hot = new Handsontable(document.getElementById('dts-hot'), {\n    data,\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: {\n        interval: { min: intervalMin, max: intervalMax },\n        rampDistance,\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});\nfunction sync() {\n    hot.updateSettings({\n        dragToScroll: {\n            interval: { min: intervalMin, max: intervalMax },\n            rampDistance,\n        },\n    });\n}\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n    intervalMin = value;\n    sync();\n});\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n    intervalMax = value;\n    sync();\n});\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n    rampDistance = value;\n    sync();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n    colHeaders.push(`${months[monthIndex]} ${year}`);\n    monthIndex += 1;\n    if (monthIndex >= months.length) {\n        monthIndex = 0;\n        year += 1;\n    }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n    const rowData = [`CC-${1000 + row}`];\n    for (let col = 0; col < 49; col++) {\n        rowData.push(2000 + row * 100 + col * 50);\n    }\n    data.push(rowData);\n}\n// Root layout\nconst root = document.querySelector('#example2');\nroot.innerHTML = `\n  <div id=\"dts-sliders\" style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;\n       font:13px/1.4 sans-serif;color:#334155;\"></div>\n  <div id=\"dts-hot\"></div>\n`;\nfunction addSlider(label, unit, min, max, step, initialValue, onChange) {\n    const wrapper = document.createElement('label');\n    wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n    const nameLabel = document.createElement('b');\n    nameLabel.style.fontFamily = 'monospace';\n    nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n    const input = document.createElement('input');\n    input.type = 'range';\n    input.min = String(min);\n    input.max = String(max);\n    input.step = String(step);\n    input.value = String(initialValue);\n    input.style.cssText = 'width:200px;cursor:pointer;';\n    input.addEventListener('input', () => {\n        nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n        onChange(Number(input.value));\n    });\n    wrapper.append(nameLabel, input);\n    document.getElementById('dts-sliders').appendChild(wrapper);\n}\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\nconst hot = new Handsontable(document.getElementById('dts-hot'), {\n    data,\n    colHeaders,\n    width: 500,\n    height: 220,\n    rowHeaders: true,\n    dragToScroll: {\n        interval: { min: intervalMin, max: intervalMax },\n        rampDistance,\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});\nfunction sync() {\n    hot.updateSettings({\n        dragToScroll: {\n            interval: { min: intervalMin, max: intervalMax },\n            rampDistance,\n        },\n    });\n}\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n    intervalMin = value;\n    sync();\n});\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n    intervalMax = value;\n    sync();\n});\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n    rampDistance = value;\n    sync();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json
index ce1c083ff..2944da4cb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\n// Root layout\nconst root = document.querySelector('#example2') as HTMLElement;\n\nroot.innerHTML = `\n  <div id=\"dts-sliders\" style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;\n       font:13px/1.4 sans-serif;color:#334155;\"></div>\n  <div id=\"dts-hot\"></div>\n`;\n\nfunction addSlider(\n  label: string,\n  unit: string,\n  min: number,\n  max: number,\n  step: number,\n  initialValue: number,\n  onChange: (value: number) => void\n): void {\n  const wrapper = document.createElement('label');\n  wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n\n  const nameLabel = document.createElement('b');\n  nameLabel.style.fontFamily = 'monospace';\n  nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n\n  const input = document.createElement('input');\n  input.type = 'range';\n  input.min = String(min);\n  input.max = String(max);\n  input.step = String(step);\n  input.value = String(initialValue);\n  input.style.cssText = 'width:200px;cursor:pointer;';\n\n  input.addEventListener('input', () => {\n    nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n    onChange(Number(input.value));\n  });\n\n  wrapper.append(nameLabel, input);\n  document.getElementById('dts-sliders')!.appendChild(wrapper);\n}\n\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\n\nconst hot = new Handsontable(document.getElementById('dts-hot')!, {\n  data,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: {\n    interval: { min: intervalMin, max: intervalMax },\n    rampDistance,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sync(): void {\n  hot.updateSettings({\n    dragToScroll: {\n      interval: { min: intervalMin, max: intervalMax },\n      rampDistance,\n    },\n  });\n}\n\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n  intervalMin = value;\n  sync();\n});\n\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n  intervalMax = value;\n  sync();\n});\n\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n  rampDistance = value;\n  sync();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\n// Root layout\nconst root = document.querySelector('#example2') as HTMLElement;\n\nroot.innerHTML = `\n  <div id=\"dts-sliders\" style=\"display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;\n       font:13px/1.4 sans-serif;color:#334155;\"></div>\n  <div id=\"dts-hot\"></div>\n`;\n\nfunction addSlider(\n  label: string,\n  unit: string,\n  min: number,\n  max: number,\n  step: number,\n  initialValue: number,\n  onChange: (value: number) => void\n): void {\n  const wrapper = document.createElement('label');\n  wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n\n  const nameLabel = document.createElement('b');\n  nameLabel.style.fontFamily = 'monospace';\n  nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n\n  const input = document.createElement('input');\n  input.type = 'range';\n  input.min = String(min);\n  input.max = String(max);\n  input.step = String(step);\n  input.value = String(initialValue);\n  input.style.cssText = 'width:200px;cursor:pointer;';\n\n  input.addEventListener('input', () => {\n    nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n    onChange(Number(input.value));\n  });\n\n  wrapper.append(nameLabel, input);\n  document.getElementById('dts-sliders')!.appendChild(wrapper);\n}\n\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\n\nconst hot = new Handsontable(document.getElementById('dts-hot')!, {\n  data,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: {\n    interval: { min: intervalMin, max: intervalMax },\n    rampDistance,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sync(): void {\n  hot.updateSettings({\n    dragToScroll: {\n      interval: { min: intervalMin, max: intervalMax },\n      rampDistance,\n    },\n  });\n}\n\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n  intervalMin = value;\n  sync();\n});\n\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n  intervalMax = value;\n  sync();\n});\n\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n  rampDistance = value;\n  sync();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json
index e317ed2ce..86bf5cbbe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={colHeaders}\n      width={500}\n      height={220}\n      rowHeaders={true}\n      dragToScroll={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example1.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={colHeaders}\n      width={500}\n      height={220}\n      rowHeaders={true}\n      dragToScroll={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example1.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json
index 2faf0a375..e6d4980e6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nfunction Slider({ label, unit, min, max, step, value, onChange }: {\n  label: string; unit: string; min: number; max: number; step: number;\n  value: number; onChange: (value: number) => void;\n}) {\n  return (\n    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, font: '13px/1.4 sans-serif', color: '#334155' }}>\n      <b style={{ fontFamily: 'monospace' }}>{label}: {value} {unit}</b>\n      <input\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(event) => onChange(Number(event.target.value))}\n        style={{ width: 200, cursor: 'pointer' }}\n      />\n    </label>\n  );\n}\n\nconst ExampleComponent = () => {\n  const [intervalMin, setIntervalMin] = useState(20);\n  const [intervalMax, setIntervalMax] = useState(500);\n  const [rampDistance, setRampDistance] = useState(120);\n\n  return (\n    <div>\n      <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', marginBottom: 16 }}>\n        <Slider label=\"interval.min\" unit=\"ms\" min={10}  max={200}  step={10} value={intervalMin}   onChange={setIntervalMin} />\n        <Slider label=\"interval.max\" unit=\"ms\" min={100} max={1000} step={50} value={intervalMax}   onChange={setIntervalMax} />\n        <Slider label=\"rampDistance\" unit=\"px\" min={20}  max={300}  step={10} value={rampDistance}  onChange={setRampDistance} />\n      </div>\n      <HotTable\n        data={data}\n        colHeaders={colHeaders}\n        width={500}\n        height={220}\n        rowHeaders={true}\n        dragToScroll={{ interval: { min: intervalMin, max: intervalMax }, rampDistance }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example2.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  data.push(rowData);\n}\n\nfunction Slider({ label, unit, min, max, step, value, onChange }: {\n  label: string; unit: string; min: number; max: number; step: number;\n  value: number; onChange: (value: number) => void;\n}) {\n  return (\n    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, font: '13px/1.4 sans-serif', color: '#334155' }}>\n      <b style={{ fontFamily: 'monospace' }}>{label}: {value} {unit}</b>\n      <input\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(event) => onChange(Number(event.target.value))}\n        style={{ width: 200, cursor: 'pointer' }}\n      />\n    </label>\n  );\n}\n\nconst ExampleComponent = () => {\n  const [intervalMin, setIntervalMin] = useState(20);\n  const [intervalMax, setIntervalMax] = useState(500);\n  const [rampDistance, setRampDistance] = useState(120);\n\n  return (\n    <div>\n      <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', marginBottom: 16 }}>\n        <Slider label=\"interval.min\" unit=\"ms\" min={10}  max={200}  step={10} value={intervalMin}   onChange={setIntervalMin} />\n        <Slider label=\"interval.max\" unit=\"ms\" min={100} max={1000} step={50} value={intervalMax}   onChange={setIntervalMax} />\n        <Slider label=\"rampDistance\" unit=\"px\" min={20}  max={300}  step={10} value={rampDistance}  onChange={setRampDistance} />\n      </div>\n      <HotTable\n        data={data}\n        colHeaders={colHeaders}\n        width={500}\n        height={220}\n        rowHeaders={true}\n        dragToScroll={{ interval: { min: intervalMin, max: intervalMax }, rampDistance }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example2.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json
index c428da8a8..55191f51e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example1.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example1.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json
index 08aaa86b6..c3498317f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\nconst intervalMin = ref(20);\nconst intervalMax = ref(500);\nconst rampDistance = ref(120);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: tableData,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: {\n    interval: { min: intervalMin.value, max: intervalMax.value },\n    rampDistance: rampDistance.value,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div style=\"display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px\">\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">interval.min: {{ intervalMin }} ms</b>\n        <input\n          v-model.number=\"intervalMin\"\n          type=\"range\"\n          min=\"10\"\n          max=\"200\"\n          step=\"10\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">interval.max: {{ intervalMax }} ms</b>\n        <input\n          v-model.number=\"intervalMax\"\n          type=\"range\"\n          min=\"100\"\n          max=\"1000\"\n          step=\"50\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">rampDistance: {{ rampDistance }} px</b>\n        <input\n          v-model.number=\"rampDistance\"\n          type=\"range\"\n          min=\"20\"\n          max=\"300\"\n          step=\"10\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example2.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n  colHeaders.push(`${months[monthIndex]} ${year}`);\n  monthIndex += 1;\n\n  if (monthIndex >= months.length) {\n    monthIndex = 0;\n    year += 1;\n  }\n}\n\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n  const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n  for (let col = 0; col < 49; col++) {\n    rowData.push(2000 + row * 100 + col * 50);\n  }\n\n  tableData.push(rowData);\n}\n\nconst intervalMin = ref(20);\nconst intervalMax = ref(500);\nconst rampDistance = ref(120);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: tableData,\n  colHeaders,\n  width: 500,\n  height: 220,\n  rowHeaders: true,\n  dragToScroll: {\n    interval: { min: intervalMin.value, max: intervalMax.value },\n    rampDistance: rampDistance.value,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div style=\"display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px\">\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">interval.min: {{ intervalMin }} ms</b>\n        <input\n          v-model.number=\"intervalMin\"\n          type=\"range\"\n          min=\"10\"\n          max=\"200\"\n          step=\"10\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">interval.max: {{ intervalMax }} ms</b>\n        <input\n          v-model.number=\"intervalMax\"\n          type=\"range\"\n          min=\"100\"\n          max=\"1000\"\n          step=\"50\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n      <label style=\"display: flex; flex-direction: column; gap: 4px; font: 13px/1.4 sans-serif; color: #334155\">\n        <b style=\"font-family: monospace\">rampDistance: {{ rampDistance }} px</b>\n        <input\n          v-model.number=\"rampDistance\"\n          type=\"range\"\n          min=\"20\"\n          max=\"300\"\n          step=\"10\"\n          style=\"width: 200px; cursor: pointer\"\n        >\n      </label>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example2.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json
index 0bafc3630..a26154fc7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example1></app-example1>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    emptyDataState: true, // Enable empty data state with default settings\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example1.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example1></app-example1>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    emptyDataState: true, // Enable empty data state with default settings\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example1.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json
index 48bd0398c..d8895b0be 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example2></app-example2>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Job title', 'Department', 'City'],\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    emptyDataState: {\n      message: {\n        title: 'No data available',\n        description: 'Please add some data to get started.',\n        buttons: [\n          {\n            text: 'Load employees',\n            type: 'primary',\n            callback: () => {\n              this.hotTable.hotInstance!.loadData([\n                ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n              ]);\n            }\n          }\n        ]\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example2.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example2></app-example2>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Job title', 'Department', 'City'],\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    emptyDataState: {\n      message: {\n        title: 'No data available',\n        description: 'Please add some data to get started.',\n        buttons: [\n          {\n            text: 'Load employees',\n            type: 'primary',\n            callback: () => {\n              this.hotTable.hotInstance!.loadData([\n                ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n              ]);\n            }\n          }\n        ]\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example2.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json
index d4a570183..28eebb080 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example3></app-example3>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Job title', 'Department', 'City'],\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    contextMenu: true,\n    emptyDataState: {\n      message: (source: string) => {\n        switch (source) {\n          case 'filters':\n            return {\n              title: 'No results found',\n              description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n              buttons: [\n                {\n                  text: 'Clear Filters',\n                  type: 'secondary',\n                  callback: () => {\n                    const filtersPlugin = this.hotTable.hotInstance!.getPlugin('filters');\n\n                    if (filtersPlugin) {\n                      filtersPlugin.clearConditions();\n                      filtersPlugin.filter();\n                    }\n                  }\n                }\n              ]\n            };\n          default:\n            return {\n              title: 'No data available',\n              description: 'There\\'s nothing to display yet. Add some data to get started.',\n              buttons: [\n                {\n                  text: 'Load employees',\n                  type: 'primary',\n                  callback: () => {\n                    this.hotTable.hotInstance!.loadData([\n                      ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                      ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                      ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                      ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                      ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                    ]);\n                  }\n                }\n              ]\n            };\n        }\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example3.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <app-example3></app-example3>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Job title', 'Department', 'City'],\n    rowHeaders: true,\n    navigableHeaders: true,\n    dropdownMenu: true,\n    filters: true,\n    contextMenu: true,\n    emptyDataState: {\n      message: (source: string) => {\n        switch (source) {\n          case 'filters':\n            return {\n              title: 'No results found',\n              description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n              buttons: [\n                {\n                  text: 'Clear Filters',\n                  type: 'secondary',\n                  callback: () => {\n                    const filtersPlugin = this.hotTable.hotInstance!.getPlugin('filters');\n\n                    if (filtersPlugin) {\n                      filtersPlugin.clearConditions();\n                      filtersPlugin.filter();\n                    }\n                  }\n                }\n              ]\n            };\n          default:\n            return {\n              title: 'No data available',\n              description: 'There\\'s nothing to display yet. Add some data to get started.',\n              buttons: [\n                {\n                  text: 'Load employees',\n                  type: 'primary',\n                  callback: () => {\n                    this.hotTable.hotInstance!.loadData([\n                      ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                      ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                      ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                      ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                      ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                    ]);\n                  }\n                }\n              ]\n            };\n        }\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example3.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json
index 6c5994b72..2c56c5501 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1');\n\nnew Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1');\n\nnew Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json
index 9d6406b0f..ba1b330c9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true, // Enable empty data state with default settings\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true, // Enable empty data state with default settings\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json
index 211c9346c..81e501e04 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2');\n\nconst hot = new Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hot.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2');\n\nconst hot = new Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hot.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json
index aedc6466c..0fe018873 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hot.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: [], // Empty data to trigger empty state\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hot.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json
index 914ee6a53..e9838d932 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3');\n\nconst hot = new Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hot.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hot.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3');\n\nconst hot = new Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hot.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hot.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.js","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json
index 6854539ea..5e2531179 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source: string) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hot.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hot.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source: string) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hot.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hot.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.ts","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json
index 7a8ea2c28..fef507b63 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      emptyDataState={true} // Enable empty data state with default settings\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example1.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      emptyDataState={true} // Enable empty data state with default settings\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example1.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json
index 008449c78..d2cb31283 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={['Name', 'Job title', 'Department', 'City']}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      emptyDataState={{\n        message: {\n          title: 'No data available',\n          description: 'Please add some data to get started.',\n          buttons: [\n            {\n              text: 'Load employees',\n              type: 'primary',\n              callback: () => {\n                hotTableRef.current?.hotInstance.loadData([\n                  ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                  ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                  ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                  ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                  ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                ]);\n              },\n            },\n          ],\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example2.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={['Name', 'Job title', 'Department', 'City']}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      emptyDataState={{\n        message: {\n          title: 'No data available',\n          description: 'Please add some data to get started.',\n          buttons: [\n            {\n              text: 'Load employees',\n              type: 'primary',\n              callback: () => {\n                hotTableRef.current?.hotInstance.loadData([\n                  ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                  ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                  ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                  ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                  ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                ]);\n              },\n            },\n          ],\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example2.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json
index 87d21dbf4..6f1f20895 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={['Name', 'Job title', 'Department', 'City']}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      contextMenu={true}\n      emptyDataState={{\n        message: (source) => {\n          switch (source) {\n            case 'filters':\n              return {\n                title: 'No results found',\n                description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n                buttons: [\n                  {\n                    text: 'Clear Filters',\n                    type: 'secondary',\n                    callback: () => {\n                      const filtersPlugin = hotTableRef.current?.hotInstance.getPlugin('filters');\n\n                      if (filtersPlugin) {\n                        filtersPlugin.clearConditions();\n                        filtersPlugin.filter();\n                      }\n                    },\n                  },\n                ],\n              };\n            default:\n              return {\n                title: 'No data available',\n                description: \"There's nothing to display yet. Add some data to get started.\",\n                buttons: [\n                  {\n                    text: 'Load employees',\n                    type: 'primary',\n                    callback: () => {\n                      hotTableRef.current?.hotInstance.loadData([\n                        ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                        ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                        ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                        ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                        ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                      ]);\n                    },\n                  },\n                ],\n              };\n          }\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example3.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data} // Empty data to trigger empty state\n      height=\"auto\"\n      colHeaders={['Name', 'Job title', 'Department', 'City']}\n      rowHeaders={true}\n      navigableHeaders={true}\n      dropdownMenu={true}\n      filters={true}\n      contextMenu={true}\n      emptyDataState={{\n        message: (source) => {\n          switch (source) {\n            case 'filters':\n              return {\n                title: 'No results found',\n                description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n                buttons: [\n                  {\n                    text: 'Clear Filters',\n                    type: 'secondary',\n                    callback: () => {\n                      const filtersPlugin = hotTableRef.current?.hotInstance.getPlugin('filters');\n\n                      if (filtersPlugin) {\n                        filtersPlugin.clearConditions();\n                        filtersPlugin.filter();\n                      }\n                    },\n                  },\n                ],\n              };\n            default:\n              return {\n                title: 'No data available',\n                description: \"There's nothing to display yet. Add some data to get started.\",\n                buttons: [\n                  {\n                    text: 'Load employees',\n                    type: 'primary',\n                    callback: () => {\n                      hotTableRef.current?.hotInstance.loadData([\n                        ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                        ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                        ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                        ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                        ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                      ]);\n                    },\n                  },\n                ],\n              };\n          }\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example3.tsx","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json
index 522ab5837..41ddf7b3e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example1.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example1.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json
index fed01dfd9..479665010 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hotRef.value?.hotInstance?.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example2.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Custom configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  emptyDataState: {\n    message: {\n      title: 'No data available',\n      description: 'Please add some data to get started.',\n      buttons: [\n        {\n          text: 'Load employees',\n          type: 'primary',\n          callback: () => {\n            hotRef.value?.hotInstance?.loadData([\n              ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n              ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n              ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n              ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n              ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n            ]);\n          },\n        },\n      ],\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example2.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json
index 9d7e174b8..c0970223b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hotRef.value?.hotInstance?.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hotRef.value?.hotInstance?.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example3.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Empty data state · Dynamic messages based on source · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  height: 'auto',\n  colHeaders: ['Name', 'Job title', 'Department', 'City'],\n  rowHeaders: true,\n  navigableHeaders: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: {\n    message: (source) => {\n      switch (source) {\n        case 'filters':\n          return {\n            title: 'No results found',\n            description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n            buttons: [\n              {\n                text: 'Clear Filters',\n                type: 'secondary',\n                callback: () => {\n                  const filtersPlugin = hotRef.value?.hotInstance?.getPlugin('filters');\n\n                  if (filtersPlugin) {\n                    filtersPlugin.clearConditions();\n                    filtersPlugin.filter();\n                  }\n                },\n              },\n            ],\n          };\n        default:\n          return {\n            title: 'No data available',\n            description: \"There's nothing to display yet. Add some data to get started.\",\n            buttons: [\n              {\n                text: 'Load employees',\n                type: 'primary',\n                callback: () => {\n                  hotRef.value?.hotInstance?.loadData([\n                    ['Ana García', 'Senior Engineer', 'Engineering', 'Austin'],\n                    ['James Okafor', 'Product Manager', 'Product', 'Chicago'],\n                    ['Li Wei', 'Data Analyst', 'Analytics', 'Seattle'],\n                    ['Priya Raman', 'Marketing Lead', 'Marketing', 'Denver'],\n                    ['Marcus Johnson', 'HR Business Partner', 'People Operations', 'Atlanta'],\n                  ]);\n                },\n              },\n            ],\n          };\n      }\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example3.vue","breadcrumb":["Accessories And Menus","Empty data state"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty data state","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json
index 9836c45ab..a678053c0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportFile()\">Download CSV</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportFile() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportFile()\">Download CSV</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportFile() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json
index 3e5d66740..8ba09be3c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportBlob()\">Export as a Blob</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportBlob() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    const exportedBlob = exportPlugin.exportAsBlob('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedBlob);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportBlob()\">Export as a Blob</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportBlob() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    const exportedBlob = exportPlugin.exportAsBlob('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedBlob);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json
index 2f7f1e856..a1a18c914 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportString()\">Export as a string</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportString() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    const exportedString = exportPlugin.exportAsString('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedString);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportString()\">Export as a string</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  exportString() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    const exportedString = exportPlugin.exportAsString('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedString);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json
index 416f400e6..0780b0c3a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"downloadCSVWithNoSanitization()\">Download CSV with no sanitization</button>\n        <button (click)=\"downloadCSVWithRecommendedSanitization()\">Download CSV with recommended sanitization</button>\n        <button (click)=\"downloadCSVWithRegexpSanitization()\">Download CSV with sanitization using a regexp</button>\n        <button (click)=\"downloadCSVWithFunctionSanitization()\">Download CSV with sanitization using a function</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  downloadCSVWithNoSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n    });\n  }\n\n  downloadCSVWithRecommendedSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: true,\n    });\n  }\n\n  downloadCSVWithRegexpSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n  }\n\n  downloadCSVWithFunctionSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: (value: string) => {\n        return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"downloadCSVWithNoSanitization()\">Download CSV with no sanitization</button>\n        <button (click)=\"downloadCSVWithRecommendedSanitization()\">Download CSV with recommended sanitization</button>\n        <button (click)=\"downloadCSVWithRegexpSanitization()\">Download CSV with sanitization using a regexp</button>\n        <button (click)=\"downloadCSVWithFunctionSanitization()\">Download CSV with sanitization using a function</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  downloadCSVWithNoSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n    });\n  }\n\n  downloadCSVWithRecommendedSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: true,\n    });\n  }\n\n  downloadCSVWithRegexpSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n  }\n\n  downloadCSVWithFunctionSanitization() {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    exportPlugin.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: (value: string) => {\n        return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json
index 4c4b2dac1..3419052bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Download CSV</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\nbutton.addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Download CSV</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\nbutton.addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json
index d77b59c86..946c9eab7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Download CSV</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Download CSV</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json
index b02415481..9fceaec64 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-blob\">Export as a Blob</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-blob');\nbutton.addEventListener('click', () => {\n    const exportedBlob = exportPlugin.exportAsBlob('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: false,\n        exportHiddenRows: false,\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n    console.log(exportedBlob);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-blob\">Export as a Blob</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-blob');\nbutton.addEventListener('click', () => {\n    const exportedBlob = exportPlugin.exportAsBlob('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: false,\n        exportHiddenRows: false,\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n    console.log(exportedBlob);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json
index 2cc31571b..82c695d7f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-blob\">Export as a Blob</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-blob')!;\n\nbutton.addEventListener('click', () => {\n  const exportedBlob = exportPlugin.exportAsBlob('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedBlob);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-blob\">Export as a Blob</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-blob')!;\n\nbutton.addEventListener('click', () => {\n  const exportedBlob = exportPlugin.exportAsBlob('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedBlob);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json
index 60c5442f2..a3206c4e4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-string\">Export as a string</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-string');\nbutton.addEventListener('click', () => {\n    const exportedString = exportPlugin.exportAsString('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: false,\n        exportHiddenRows: false,\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n    console.log(exportedString);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-string\">Export as a string</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n        ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n        ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n        ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n        ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n        ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n        ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: { rows: [1, 3, 5], indicators: true },\n    hiddenColumns: { columns: [1, 3, 5], indicators: true },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-string');\nbutton.addEventListener('click', () => {\n    const exportedString = exportPlugin.exportAsString('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: false,\n        exportHiddenRows: false,\n        rowDelimiter: '\\r\\n',\n        rowHeaders: true,\n    });\n    console.log(exportedString);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json
index f05516cd9..f7facb85b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-string\">Export as a string</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-string')!;\n\nbutton.addEventListener('click', () => {\n  const exportedString = exportPlugin.exportAsString('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedString);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-string\">Export as a string</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n    ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n    ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n    ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n    ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n    ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n    ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-string')!;\n\nbutton.addEventListener('click', () => {\n  const exportedString = exportPlugin.exportAsString('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedString);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json
index c2e6f2b59..5a2e0f1a8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"no-sanitization\">Download CSV with no sanitization</button>\n      <button id=\"recommended-sanitization\">Download CSV with recommended sanitization</button>\n      <button id=\"regexp-sanitization\">Download CSV with sanitization using a regexp</button>\n      <button id=\"function-sanitization\">Download CSV with sanitization using a function</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n    data: [\n        ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n        ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n        ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n        ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n        ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\ndocument.querySelector('#no-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n    });\n});\ndocument.querySelector('#recommended-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: true,\n    });\n});\ndocument.querySelector('#regexp-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n});\ndocument.querySelector('#function-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: (value) => {\n            return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n        },\n    });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"no-sanitization\">Download CSV with no sanitization</button>\n      <button id=\"recommended-sanitization\">Download CSV with recommended sanitization</button>\n      <button id=\"regexp-sanitization\">Download CSV with sanitization using a regexp</button>\n      <button id=\"function-sanitization\">Download CSV with sanitization using a function</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n    data: [\n        ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n        ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n        ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n        ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n        ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\ndocument.querySelector('#no-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n    });\n});\ndocument.querySelector('#recommended-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: true,\n    });\n});\ndocument.querySelector('#regexp-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n});\ndocument.querySelector('#function-sanitization').addEventListener('click', () => {\n    exportPlugin.downloadFile('csv', {\n        bom: false,\n        columnDelimiter: ',',\n        colHeaders: false,\n        exportHiddenColumns: true,\n        exportHiddenRows: true,\n        fileExtension: 'csv',\n        filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n        mimeType: 'text/csv',\n        rowDelimiter: '\\r\\n',\n        sanitizeValues: (value) => {\n            return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n        },\n    });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json
index 51750d92e..c9faf10d5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"no-sanitization\">Download CSV with no sanitization</button>\n      <button id=\"recommended-sanitization\">Download CSV with recommended sanitization</button>\n      <button id=\"regexp-sanitization\">Download CSV with sanitization using a regexp</button>\n      <button id=\"function-sanitization\">Download CSV with sanitization using a function</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n  });\n});\n\ndocument.querySelector('#recommended-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: true,\n  });\n});\n\ndocument.querySelector('#regexp-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n  });\n});\n\ndocument.querySelector('#function-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: (value) => {\n      return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n    },\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"no-sanitization\">Download CSV with no sanitization</button>\n      <button id=\"recommended-sanitization\">Download CSV with recommended sanitization</button>\n      <button id=\"regexp-sanitization\">Download CSV with sanitization using a regexp</button>\n      <button id=\"function-sanitization\">Download CSV with sanitization using a function</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n  });\n});\n\ndocument.querySelector('#recommended-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: true,\n  });\n});\n\ndocument.querySelector('#regexp-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n  });\n});\n\ndocument.querySelector('#function-sanitization')!.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    sanitizeValues: (value) => {\n      return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n    },\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json
index 51f1cd61e..e8bfe4cd0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-file\" onClick={() => buttonClickCallback()}>\n            Download CSV\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-file\" onClick={() => buttonClickCallback()}>\n            Download CSV\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json
index 9b179672b..1ef475a7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n    const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedBlob);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-blob\" onClick={() => buttonClickCallback()}>\n            Export as a Blob\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n    const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedBlob);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-blob\" onClick={() => buttonClickCallback()}>\n            Export as a Blob\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json
index 5d71cdc3b..eb41828a5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n    const exportedString = exportPlugin?.exportAsString('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedString);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-string\" onClick={() => buttonClickCallback()}>\n            Export as a string\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n    const exportedString = exportPlugin?.exportAsString('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: false,\n      exportHiddenRows: false,\n      rowDelimiter: '\\r\\n',\n      rowHeaders: true,\n    });\n\n    console.log(exportedString);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"export-string\" onClick={() => buttonClickCallback()}>\n            Export as a string\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        hiddenRows={{ rows: [1, 3, 5], indicators: true }}\n        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json
index 4094d8270..5c560eb39 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n  ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n  ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n  ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n  ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const downloadWithNoSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n    });\n  };\n\n  const downloadWithRecommendedSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: true,\n    });\n  };\n\n  const downloadWithRegexpSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n  };\n\n  const downloadWithFunctionSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: (value) => {\n        return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n      },\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={() => downloadWithNoSanitizationCallback()}>Download CSV with no sanitization</button>\n          <button onClick={() => downloadWithRecommendedSanitizationCallback()}>\n            Download CSV with recommended sanitization\n          </button>\n          <button onClick={() => downloadWithRegexpSanitizationCallback()}>\n            Download CSV with sanitization using a regexp\n          </button>\n          <button onClick={() => downloadWithFunctionSanitizationCallback()}>\n            Download CSV with sanitization using a function\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example4.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n  ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n  ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n  ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n  ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const downloadWithNoSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n    });\n  };\n\n  const downloadWithRecommendedSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: true,\n    });\n  };\n\n  const downloadWithRegexpSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n    });\n  };\n\n  const downloadWithFunctionSanitizationCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    exportPlugin?.downloadFile('csv', {\n      bom: false,\n      columnDelimiter: ',',\n      colHeaders: false,\n      exportHiddenColumns: true,\n      exportHiddenRows: true,\n      fileExtension: 'csv',\n      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n      mimeType: 'text/csv',\n      rowDelimiter: '\\r\\n',\n      sanitizeValues: (value) => {\n        return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n      },\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={() => downloadWithNoSanitizationCallback()}>Download CSV with no sanitization</button>\n          <button onClick={() => downloadWithRecommendedSanitizationCallback()}>\n            Download CSV with recommended sanitization\n          </button>\n          <button onClick={() => downloadWithRegexpSanitizationCallback()}>\n            Download CSV with sanitization using a regexp\n          </button>\n          <button onClick={() => downloadWithFunctionSanitizationCallback()}>\n            Download CSV with sanitization using a function\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example4.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json
index 735e474e2..d171e5e9d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction downloadCsv(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n\n  exportPlugin?.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-file\" type=\"button\" @click=\"downloadCsv\">\n          Download CSV\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction downloadCsv(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n\n  exportPlugin?.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-file\" type=\"button\" @click=\"downloadCsv\">\n          Download CSV\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json
index ab55b387b..ee016cfe8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction exportBlob(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n  const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedBlob);\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-blob\" type=\"button\" @click=\"exportBlob\">\n          Export as a Blob\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction exportBlob(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n  const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    mimeType: 'text/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedBlob);\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-blob\" type=\"button\" @click=\"exportBlob\">\n          Export as a Blob\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json
index e297d6b62..9542ffae2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction exportString(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n  const exportedString = exportPlugin?.exportAsString('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedString);\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-string\" type=\"button\" @click=\"exportString\">\n          Export as a string\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst gridData = [\n  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: gridData,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction exportString(): void {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n  const exportedString = exportPlugin?.exportAsString('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    colHeaders: false,\n    exportHiddenColumns: false,\n    exportHiddenRows: false,\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true,\n  });\n\n  console.log(exportedString);\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"export-string\" type=\"button\" @click=\"exportString\">\n          Export as a string\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json
index 217a30bfb..07527b8ee 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst csvExportOptions = {\n  bom: false,\n  columnDelimiter: ',',\n  colHeaders: false,\n  exportHiddenColumns: true,\n  exportHiddenRows: true,\n  fileExtension: 'csv',\n  filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n  mimeType: 'text/csv',\n  rowDelimiter: '\\r\\n',\n} as const;\n\nfunction downloadWithNoSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', { ...csvExportOptions });\n}\n\nfunction downloadWithRecommendedSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: true,\n  });\n}\n\nfunction downloadWithRegexpSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n  });\n}\n\nfunction downloadWithFunctionSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: (value: string) => {\n      return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n    },\n  });\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"downloadWithNoSanitization\">\n          Download CSV with no sanitization\n        </button>\n        <button type=\"button\" @click=\"downloadWithRecommendedSanitization\">\n          Download CSV with recommended sanitization\n        </button>\n        <button type=\"button\" @click=\"downloadWithRegexpSanitization\">\n          Download CSV with sanitization using a regexp\n        </button>\n        <button type=\"button\" @click=\"downloadWithFunctionSanitization\">\n          Download CSV with sanitization using a function\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example4.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV injection attack · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n    ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n    ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst csvExportOptions = {\n  bom: false,\n  columnDelimiter: ',',\n  colHeaders: false,\n  exportHiddenColumns: true,\n  exportHiddenRows: true,\n  fileExtension: 'csv',\n  filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n  mimeType: 'text/csv',\n  rowDelimiter: '\\r\\n',\n} as const;\n\nfunction downloadWithNoSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', { ...csvExportOptions });\n}\n\nfunction downloadWithRecommendedSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: true,\n  });\n}\n\nfunction downloadWithRegexpSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n  });\n}\n\nfunction downloadWithFunctionSanitization(): void {\n  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {\n    ...csvExportOptions,\n    sanitizeValues: (value: string) => {\n      return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n    },\n  });\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"downloadWithNoSanitization\">\n          Download CSV with no sanitization\n        </button>\n        <button type=\"button\" @click=\"downloadWithRecommendedSanitization\">\n          Download CSV with recommended sanitization\n        </button>\n        <button type=\"button\" @click=\"downloadWithRegexpSanitization\">\n          Download CSV with sanitization using a regexp\n        </button>\n        <button type=\"button\" @click=\"downloadWithFunctionSanitization\">\n          Download CSV with sanitization using a function\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example4.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV injection attack","docPermalink":"/export-to-csv","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json
index aa495a3b8..6171ce25d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportFile()\">Export XLSX</button>\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n    ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n    ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n    ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n    ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n    ['TOTALS',        '',       null,  '',    ''],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    nestedHeaders: [\n      [\n        { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n        { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n        { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n      ],\n      ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n    ],\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'checkbox' },\n      { type: 'text' },\n    ],\n    columnSummary: [\n      {\n        sourceColumn: 2,\n        destinationRow: 5,\n        destinationColumn: 2,\n        type: 'sum',\n        forceNumeric: true,\n      },\n    ],\n    mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n    customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n    cell: [\n      { row: 5, col: 0, readOnly: true },\n      { row: 5, col: 2, readOnly: true },\n    ],\n    fixedColumnsStart: 1,\n    rowHeaders: true,\n    colHeaders: false,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n    afterInit(this: Handsontable) {\n      this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n      this.render();\n    },\n  };\n\n  async exportFile(): Promise<void> {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    await exportPlugin.downloadFileAsync('xlsx', {\n      filename: 'Q1-Sales-Report',\n      colHeaders: true,\n      rowHeaders: true,\n      exportFormulas: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportFile()\">Export XLSX</button>\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n    ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n    ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n    ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n    ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n    ['TOTALS',        '',       null,  '',    ''],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    nestedHeaders: [\n      [\n        { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n        { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n        { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n      ],\n      ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n    ],\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'checkbox' },\n      { type: 'text' },\n    ],\n    columnSummary: [\n      {\n        sourceColumn: 2,\n        destinationRow: 5,\n        destinationColumn: 2,\n        type: 'sum',\n        forceNumeric: true,\n      },\n    ],\n    mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n    customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n    cell: [\n      { row: 5, col: 0, readOnly: true },\n      { row: 5, col: 2, readOnly: true },\n    ],\n    fixedColumnsStart: 1,\n    rowHeaders: true,\n    colHeaders: false,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n    afterInit(this: Handsontable) {\n      this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n      this.render();\n    },\n  };\n\n  async exportFile(): Promise<void> {\n    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n    await exportPlugin.downloadFileAsync('xlsx', {\n      filename: 'Q1-Sales-Report',\n      colHeaders: true,\n      rowHeaders: true,\n      exportFormulas: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json
index 4e6572ccf..1556dea06 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportSheets()\">Export XLSX</button>\n      </div>\n    </div>\n\n    <p><strong>Q1 Sales</strong></p>\n    <hot-table [settings]=\"sharedSettings\" [data]=\"q1Data\"></hot-table>\n\n    <p><strong>Q2 Sales</strong></p>\n    <hot-table #hotQ2 [settings]=\"sharedSettings\" [data]=\"q2Data\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotQ2', { static: false }) hotQ2!: HotTableComponent;\n  @ViewChild(HotTableComponent, { static: false }) hotQ1!: HotTableComponent;\n\n  readonly q1Data = [\n    ['Alice Martin',  'North', 142000, true ],\n    ['Bob Chen',      'East',   98500, true ],\n    ['Carol Davies',  'South',  76200, false],\n    ['David Kim',     'West',  115300, true ],\n    ['Eva Rossi',     'North',  54800, false],\n  ];\n\n  readonly q2Data = [\n    ['Alice Martin',  'North', 158000, true ],\n    ['Bob Chen',      'East',  112400, true ],\n    ['Carol Davies',  'South',  89100, true ],\n    ['David Kim',     'West',   97600, false],\n    ['Eva Rossi',     'North',  63200, true ],\n  ];\n\n  readonly sharedSettings: GridSettings = {\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'checkbox' },\n    ],\n    colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n  };\n\n  async exportSheets(): Promise<void> {\n    const hotQ1 = this.hotQ1.hotInstance!;\n    const exportPlugin = hotQ1.getPlugin('exportFile');\n\n    await exportPlugin.downloadFileAsync('xlsx', {\n      filename: 'Annual-Sales-Report',\n      sheets: [\n        { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n        { instance: this.hotQ2.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n      ],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"exportSheets()\">Export XLSX</button>\n      </div>\n    </div>\n\n    <p><strong>Q1 Sales</strong></p>\n    <hot-table [settings]=\"sharedSettings\" [data]=\"q1Data\"></hot-table>\n\n    <p><strong>Q2 Sales</strong></p>\n    <hot-table #hotQ2 [settings]=\"sharedSettings\" [data]=\"q2Data\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotQ2', { static: false }) hotQ2!: HotTableComponent;\n  @ViewChild(HotTableComponent, { static: false }) hotQ1!: HotTableComponent;\n\n  readonly q1Data = [\n    ['Alice Martin',  'North', 142000, true ],\n    ['Bob Chen',      'East',   98500, true ],\n    ['Carol Davies',  'South',  76200, false],\n    ['David Kim',     'West',  115300, true ],\n    ['Eva Rossi',     'North',  54800, false],\n  ];\n\n  readonly q2Data = [\n    ['Alice Martin',  'North', 158000, true ],\n    ['Bob Chen',      'East',  112400, true ],\n    ['Carol Davies',  'South',  89100, true ],\n    ['David Kim',     'West',   97600, false],\n    ['Eva Rossi',     'North',  63200, true ],\n  ];\n\n  readonly sharedSettings: GridSettings = {\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'checkbox' },\n    ],\n    colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n  };\n\n  async exportSheets(): Promise<void> {\n    const hotQ1 = this.hotQ1.hotInstance!;\n    const exportPlugin = hotQ1.getPlugin('exportFile');\n\n    await exportPlugin.downloadFileAsync('xlsx', {\n      filename: 'Annual-Sales-Report',\n      sheets: [\n        { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n        { instance: this.hotQ2.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n      ],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json
index bd07a888f..228e091b5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Laptop Pro 15\"',   'Electronics',  1299.99, 38,  true ],\n    ['Wireless Mouse',   'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1', 'Accessories',    49.99, 87,  true ],\n    ['Monitor 27\" 4K',   'Electronics',   449.99, 12,  false],\n    ['Mech Keyboard',    'Accessories',   119.99, 65,  true ],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'numeric' },\n      { type: 'checkbox' },\n    ],\n    colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    contextMenu: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Laptop Pro 15\"',   'Electronics',  1299.99, 38,  true ],\n    ['Wireless Mouse',   'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1', 'Accessories',    49.99, 87,  true ],\n    ['Monitor 27\" 4K',   'Electronics',   449.99, 12,  false],\n    ['Mech Keyboard',    'Accessories',   119.99, 65,  true ],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { type: 'numeric' },\n      { type: 'checkbox' },\n    ],\n    colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    contextMenu: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json
index 412e890a5..f917d9754 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Export XLSX</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n    ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n    ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n    ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n    ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n    ['TOTALS', '', null, '', ''],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n  customBorders: [\n    {\n      row: 5,\n      col: 2,\n      top: { width: 2, color: '#333333' },\n    },\n  ],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', async () => {\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Export XLSX</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n    ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n    ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n    ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n    ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n    ['TOTALS', '', null, '', ''],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n  customBorders: [\n    {\n      row: 5,\n      col: 2,\n      top: { width: 2, color: '#333333' },\n    },\n  ],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', async () => {\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json
index ed9ce197a..0cb6b5d1a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Export XLSX</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n    ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n    ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n    ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n    ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n    ['TOTALS',        '',       null,  '',    ''],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [\n    { row: 5, col: 0, rowspan: 1, colspan: 2 },\n  ],\n  customBorders: [\n    {\n      row: 5, col: 2,\n      top: { width: 2, color: '#333333' },\n    },\n  ],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', async () => {\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-file\">Export XLSX</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n    ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n    ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n    ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n    ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n    ['TOTALS',        '',       null,  '',    ''],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [\n    { row: 5, col: 0, rowspan: 1, colspan: 2 },\n  ],\n  customBorders: [\n    {\n      row: 5, col: 2,\n      top: { width: 2, color: '#333333' },\n    },\n  ],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', async () => {\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json
index 24966dd63..9089b4517 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-sheets\">Export XLSX</button>\n    </div>\n  </div>\n  <p><strong>Q1 Sales</strong></p>\n  <div id=\"example2-q1\"></div>\n  <p><strong>Q2 Sales</strong></p>\n  <div id=\"example2-q2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin', 'North', 142000, true],\n  ['Bob Chen', 'East', 98500, true],\n  ['Carol Davies', 'South', 76200, false],\n  ['David Kim', 'West', 115300, true],\n  ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin', 'North', 158000, true],\n  ['Bob Chen', 'East', 112400, true],\n  ['Carol Davies', 'South', 89100, true],\n  ['David Kim', 'West', 97600, false],\n  ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedConfig = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1'), {\n  ...sharedConfig,\n  data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2'), {\n  ...sharedConfig,\n  data: q2Data,\n});\n\ndocument.querySelector('#export-sheets').addEventListener('click', async () => {\n  const exportPlugin = hotQ1.getPlugin('exportFile');\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-sheets\">Export XLSX</button>\n    </div>\n  </div>\n  <p><strong>Q1 Sales</strong></p>\n  <div id=\"example2-q1\"></div>\n  <p><strong>Q2 Sales</strong></p>\n  <div id=\"example2-q2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin', 'North', 142000, true],\n  ['Bob Chen', 'East', 98500, true],\n  ['Carol Davies', 'South', 76200, false],\n  ['David Kim', 'West', 115300, true],\n  ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin', 'North', 158000, true],\n  ['Bob Chen', 'East', 112400, true],\n  ['Carol Davies', 'South', 89100, true],\n  ['David Kim', 'West', 97600, false],\n  ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedConfig = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1'), {\n  ...sharedConfig,\n  data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2'), {\n  ...sharedConfig,\n  data: q2Data,\n});\n\ndocument.querySelector('#export-sheets').addEventListener('click', async () => {\n  const exportPlugin = hotQ1.getPlugin('exportFile');\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json
index ed872da60..21f3f8e1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-sheets\">Export XLSX</button>\n    </div>\n  </div>\n  <p><strong>Q1 Sales</strong></p>\n  <div id=\"example2-q1\"></div>\n  <p><strong>Q2 Sales</strong></p>\n  <div id=\"example2-q2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin',  'North', 142000, true ],\n  ['Bob Chen',      'East',   98500, true ],\n  ['Carol Davies',  'South',  76200, false],\n  ['David Kim',     'West',  115300, true ],\n  ['Eva Rossi',     'North',  54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin',  'North', 158000, true ],\n  ['Bob Chen',      'East',  112400, true ],\n  ['Carol Davies',  'South',  89100, true ],\n  ['David Kim',     'West',   97600, false],\n  ['Eva Rossi',     'North',  63200, true ],\n];\n\nconst sharedConfig: Handsontable.GridSettings = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1')!, {\n  ...sharedConfig,\n  data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2')!, {\n  ...sharedConfig,\n  data: q2Data,\n});\n\ndocument.querySelector('#export-sheets')!.addEventListener('click', async () => {\n  const exportPlugin = hotQ1.getPlugin('exportFile');\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"export-sheets\">Export XLSX</button>\n    </div>\n  </div>\n  <p><strong>Q1 Sales</strong></p>\n  <div id=\"example2-q1\"></div>\n  <p><strong>Q2 Sales</strong></p>\n  <div id=\"example2-q2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin',  'North', 142000, true ],\n  ['Bob Chen',      'East',   98500, true ],\n  ['Carol Davies',  'South',  76200, false],\n  ['David Kim',     'West',  115300, true ],\n  ['Eva Rossi',     'North',  54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin',  'North', 158000, true ],\n  ['Bob Chen',      'East',  112400, true ],\n  ['Carol Davies',  'South',  89100, true ],\n  ['David Kim',     'West',   97600, false],\n  ['Eva Rossi',     'North',  63200, true ],\n];\n\nconst sharedConfig: Handsontable.GridSettings = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1')!, {\n  ...sharedConfig,\n  data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2')!, {\n  ...sharedConfig,\n  data: q2Data,\n});\n\ndocument.querySelector('#export-sheets')!.addEventListener('click', async () => {\n  const exportPlugin = hotQ1.getPlugin('exportFile');\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json
index f89735c61..9be564b37 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p>Right-click any cell to open the context menu.</p>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\nnew Handsontable(document.querySelector('#example3'), {\n  data: [\n    ['Laptop Pro 15\"',  'Electronics',  1299.99, 38, true ],\n    ['Wireless Mouse',  'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1','Accessories',    49.99, 87, true ],\n    ['Monitor 27\" 4K',  'Electronics',   449.99, 12, false],\n    ['Mech Keyboard',   'Accessories',   119.99, 65, true ],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p>Right-click any cell to open the context menu.</p>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\nnew Handsontable(document.querySelector('#example3'), {\n  data: [\n    ['Laptop Pro 15\"',  'Electronics',  1299.99, 38, true ],\n    ['Wireless Mouse',  'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1','Accessories',    49.99, 87, true ],\n    ['Monitor 27\" 4K',  'Electronics',   449.99, 12, false],\n    ['Mech Keyboard',   'Accessories',   119.99, 65, true ],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json
index ed1e84202..612d84c8e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p>Right-click any cell to open the context menu.</p>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nnew Handsontable(document.querySelector('#example3')!, {\n  data: [\n    ['Laptop Pro 15\"',  'Electronics',  1299.99, 38, true ],\n    ['Wireless Mouse',  'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1','Accessories',    49.99, 87, true ],\n    ['Monitor 27\" 4K',  'Electronics',   449.99, 12, false],\n    ['Mech Keyboard',   'Accessories',   119.99, 65, true ],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p>Right-click any cell to open the context menu.</p>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nnew Handsontable(document.querySelector('#example3')!, {\n  data: [\n    ['Laptop Pro 15\"',  'Electronics',  1299.99, 38, true ],\n    ['Wireless Mouse',  'Accessories',    29.99, 214, true ],\n    ['USB-C Hub 7-in-1','Accessories',    49.99, 87, true ],\n    ['Monitor 27\" 4K',  'Electronics',   449.99, 12, false],\n    ['Mech Keyboard',   'Accessories',   119.99, 65, true ],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json
index 283c51f2a..d7929bf6c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n  ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n  ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n  ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n  ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n  ['TOTALS',        '',       null,  '',    ''],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const handleAfterInit = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n    hot?.render();\n  };\n\n  const exportFile = async () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    await exportPlugin?.downloadFileAsync('xlsx', {\n      filename: 'Q1-Sales-Report',\n      colHeaders: true,\n      rowHeaders: true,\n      exportFormulas: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={exportFile}>Export XLSX</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={hotData}\n        nestedHeaders={[\n          [\n            { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n            { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n            { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n          ],\n          ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n        ]}\n        columns={[\n          { type: 'text' },\n          { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n          {\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n          },\n          { type: 'checkbox' },\n          { type: 'text' },\n        ]}\n        columnSummary={[\n          {\n            sourceColumn: 2,\n            destinationRow: 5,\n            destinationColumn: 2,\n            type: 'sum',\n            forceNumeric: true,\n          },\n        ]}\n        mergeCells={[{ row: 5, col: 0, rowspan: 1, colspan: 2 }]}\n        customBorders={[{ row: 5, col: 2, top: { width: 2, color: '#333333' } }]}\n        cell={[\n          { row: 5, col: 0, readOnly: true },\n          { row: 5, col: 2, readOnly: true },\n        ]}\n        fixedColumnsStart={1}\n        rowHeaders={true}\n        colHeaders={false}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        exportFile={{ engines: { xlsx: ExcelJS } }}\n        afterInit={handleAfterInit}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Alice Martin',  'North', 142000, true,  'Exceeded Q1 target by 18%.'],\n  ['Bob Chen',      'East',   98500, true,  'Strong pipeline for Q2.'],\n  ['Carol Davies',  'South',  76200, false, 'Needs coaching on closing.'],\n  ['David Kim',     'West',  115300, true,  'Cross-sell opportunity.'],\n  ['Eva Rossi',     'North',  54800, false, 'Sick leave impacted March.'],\n  ['TOTALS',        '',       null,  '',    ''],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const handleAfterInit = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n    hot?.render();\n  };\n\n  const exportFile = async () => {\n    const hot = hotRef.current?.hotInstance;\n    const exportPlugin = hot?.getPlugin('exportFile');\n\n    await exportPlugin?.downloadFileAsync('xlsx', {\n      filename: 'Q1-Sales-Report',\n      colHeaders: true,\n      rowHeaders: true,\n      exportFormulas: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={exportFile}>Export XLSX</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={hotData}\n        nestedHeaders={[\n          [\n            { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n            { label: 'Results',              colspan: 2, headerClassName: 'htCenter' },\n            { label: 'Notes',                colspan: 1, headerClassName: 'htLeft'  },\n          ],\n          ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n        ]}\n        columns={[\n          { type: 'text' },\n          { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n          {\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n          },\n          { type: 'checkbox' },\n          { type: 'text' },\n        ]}\n        columnSummary={[\n          {\n            sourceColumn: 2,\n            destinationRow: 5,\n            destinationColumn: 2,\n            type: 'sum',\n            forceNumeric: true,\n          },\n        ]}\n        mergeCells={[{ row: 5, col: 0, rowspan: 1, colspan: 2 }]}\n        customBorders={[{ row: 5, col: 2, top: { width: 2, color: '#333333' } }]}\n        cell={[\n          { row: 5, col: 0, readOnly: true },\n          { row: 5, col: 2, readOnly: true },\n        ]}\n        fixedColumnsStart={1}\n        rowHeaders={true}\n        colHeaders={false}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        exportFile={{ engines: { xlsx: ExcelJS } }}\n        afterInit={handleAfterInit}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json
index 40035a49e..c0b22d753 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin',  'North', 142000, true ],\n  ['Bob Chen',      'East',   98500, true ],\n  ['Carol Davies',  'South',  76200, false],\n  ['David Kim',     'West',  115300, true ],\n  ['Eva Rossi',     'North',  54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin',  'North', 158000, true ],\n  ['Bob Chen',      'East',  112400, true ],\n  ['Carol Davies',  'South',  89100, true ],\n  ['David Kim',     'West',   97600, false],\n  ['Eva Rossi',     'North',  63200, true ],\n];\n\nconst columns = [\n  { type: 'text' as const },\n  { type: 'dropdown' as const, source: ['North', 'South', 'East', 'West'] },\n  {\n    type: 'numeric' as const,\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n  },\n  { type: 'checkbox' as const },\n];\n\nconst ExampleComponent = () => {\n  const hotQ1Ref = useRef<HotTableRef>(null);\n  const hotQ2Ref = useRef<HotTableRef>(null);\n\n  const exportSheets = async () => {\n    const hotQ1 = hotQ1Ref.current?.hotInstance;\n    const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n    await exportPlugin?.downloadFileAsync('xlsx', {\n      filename: 'Annual-Sales-Report',\n      sheets: [\n        { instance: hotQ1!, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n        { instance: hotQ2Ref.current?.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n      ],\n    });\n  };\n\n  const sharedProps = {\n    columns,\n    colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n    rowHeaders: true,\n    height: 'auto' as const,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n    licenseKey: 'non-commercial-and-evaluation' as const,\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={exportSheets}>Export XLSX</button>\n        </div>\n      </div>\n      <p><strong>Q1 Sales</strong></p>\n      <HotTable ref={hotQ1Ref} data={q1Data} {...sharedProps} />\n      <p><strong>Q2 Sales</strong></p>\n      <HotTable ref={hotQ2Ref} data={q2Data} {...sharedProps} />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n  ['Alice Martin',  'North', 142000, true ],\n  ['Bob Chen',      'East',   98500, true ],\n  ['Carol Davies',  'South',  76200, false],\n  ['David Kim',     'West',  115300, true ],\n  ['Eva Rossi',     'North',  54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin',  'North', 158000, true ],\n  ['Bob Chen',      'East',  112400, true ],\n  ['Carol Davies',  'South',  89100, true ],\n  ['David Kim',     'West',   97600, false],\n  ['Eva Rossi',     'North',  63200, true ],\n];\n\nconst columns = [\n  { type: 'text' as const },\n  { type: 'dropdown' as const, source: ['North', 'South', 'East', 'West'] },\n  {\n    type: 'numeric' as const,\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n  },\n  { type: 'checkbox' as const },\n];\n\nconst ExampleComponent = () => {\n  const hotQ1Ref = useRef<HotTableRef>(null);\n  const hotQ2Ref = useRef<HotTableRef>(null);\n\n  const exportSheets = async () => {\n    const hotQ1 = hotQ1Ref.current?.hotInstance;\n    const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n    await exportPlugin?.downloadFileAsync('xlsx', {\n      filename: 'Annual-Sales-Report',\n      sheets: [\n        { instance: hotQ1!, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n        { instance: hotQ2Ref.current?.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n      ],\n    });\n  };\n\n  const sharedProps = {\n    columns,\n    colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n    rowHeaders: true,\n    height: 'auto' as const,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    exportFile: { engines: { xlsx: ExcelJS } },\n    licenseKey: 'non-commercial-and-evaluation' as const,\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={exportSheets}>Export XLSX</button>\n        </div>\n      </div>\n      <p><strong>Q1 Sales</strong></p>\n      <HotTable ref={hotQ1Ref} data={q1Data} {...sharedProps} />\n      <p><strong>Q2 Sales</strong></p>\n      <HotTable ref={hotQ2Ref} data={q2Data} {...sharedProps} />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json
index 8b5589993..56872864c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Laptop Pro 15\"',   'Electronics',  1299.99, 38,  true ],\n  ['Wireless Mouse',   'Accessories',    29.99, 214, true ],\n  ['USB-C Hub 7-in-1', 'Accessories',    49.99, 87,  true ],\n  ['Monitor 27\" 4K',   'Electronics',   449.99, 12,  false],\n  ['Mech Keyboard',    'Accessories',   119.99, 65,  true ],\n];\n\nconst ExampleComponent = () => (\n  <>\n    <div className=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <HotTable\n      data={hotData}\n      columns={[\n        { type: 'text' },\n        { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n        {\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { type: 'numeric' },\n        { type: 'checkbox' },\n      ]}\n      colHeaders={['Product', 'Category', 'Unit Price', 'Stock', 'Active?']}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      contextMenu={true}\n      exportFile={{ engines: { xlsx: ExcelJS } }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  </>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Laptop Pro 15\"',   'Electronics',  1299.99, 38,  true ],\n  ['Wireless Mouse',   'Accessories',    29.99, 214, true ],\n  ['USB-C Hub 7-in-1', 'Accessories',    49.99, 87,  true ],\n  ['Monitor 27\" 4K',   'Electronics',   449.99, 12,  false],\n  ['Mech Keyboard',    'Accessories',   119.99, 65,  true ],\n];\n\nconst ExampleComponent = () => (\n  <>\n    <div className=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <HotTable\n      data={hotData}\n      columns={[\n        { type: 'text' },\n        { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n        {\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { type: 'numeric' },\n        { type: 'checkbox' },\n      ]}\n      colHeaders={['Product', 'Category', 'Unit Price', 'Stock', 'Active?']}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      contextMenu={true}\n      exportFile={{ engines: { xlsx: ExcelJS } }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  </>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json
index 46872a14b..739af93b7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotData = [\n  ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n  ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n  ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n  ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n  ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n  ['TOTALS', '', null, '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: hotData,\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n  customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  afterInit() {\n    this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n    this.render();\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function exportFile(): Promise<void> {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n\n  await exportPlugin?.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"exportFile\">\n          Export XLSX\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotData = [\n  ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n  ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n  ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n  ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n  ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n  ['TOTALS', '', null, '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: hotData,\n  nestedHeaders: [\n    [\n      { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n      { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n    ],\n    ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n    { type: 'text' },\n  ],\n  columnSummary: [\n    {\n      sourceColumn: 2,\n      destinationRow: 5,\n      destinationColumn: 2,\n      type: 'sum',\n      forceNumeric: true,\n    },\n  ],\n  mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n  customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n  cell: [\n    { row: 5, col: 0, readOnly: true },\n    { row: 5, col: 2, readOnly: true },\n  ],\n  fixedColumnsStart: 1,\n  rowHeaders: true,\n  colHeaders: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  afterInit() {\n    this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n    this.render();\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function exportFile(): Promise<void> {\n  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');\n\n  await exportPlugin?.downloadFileAsync('xlsx', {\n    filename: 'Q1-Sales-Report',\n    colHeaders: true,\n    rowHeaders: true,\n    exportFormulas: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"exportFile\">\n          Export XLSX\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json
index 6c7736ea4..4444f3d5a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotQ1Ref = useTemplateRef<InstanceType<typeof HotTable>>('hotQ1Ref');\nconst hotQ2Ref = useTemplateRef<InstanceType<typeof HotTable>>('hotQ2Ref');\n\nconst q1Data = [\n  ['Alice Martin', 'North', 142000, true],\n  ['Bob Chen', 'East', 98500, true],\n  ['Carol Davies', 'South', 76200, false],\n  ['David Kim', 'West', 115300, true],\n  ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin', 'North', 158000, true],\n  ['Bob Chen', 'East', 112400, true],\n  ['Carol Davies', 'South', 89100, true],\n  ['David Kim', 'West', 97600, false],\n  ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedSettings: GridSettings = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1Settings = ref<GridSettings>({ ...sharedSettings, data: q1Data });\nconst hotQ2Settings = ref<GridSettings>({ ...sharedSettings, data: q2Data });\n\nasync function exportSheets(): Promise<void> {\n  const hotQ1 = hotQ1Ref.value?.hotInstance;\n  const hotQ2 = hotQ2Ref.value?.hotInstance;\n  const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n  if (!hotQ1 || !hotQ2 || !exportPlugin) {\n    return;\n  }\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"exportSheets\">\n          Export XLSX\n        </button>\n      </div>\n    </div>\n    <p><strong>Q1 Sales</strong></p>\n    <HotTable ref=\"hotQ1Ref\" :settings=\"hotQ1Settings\" />\n    <p><strong>Q2 Sales</strong></p>\n    <HotTable ref=\"hotQ2Ref\" :settings=\"hotQ2Settings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotQ1Ref = useTemplateRef<InstanceType<typeof HotTable>>('hotQ1Ref');\nconst hotQ2Ref = useTemplateRef<InstanceType<typeof HotTable>>('hotQ2Ref');\n\nconst q1Data = [\n  ['Alice Martin', 'North', 142000, true],\n  ['Bob Chen', 'East', 98500, true],\n  ['Carol Davies', 'South', 76200, false],\n  ['David Kim', 'West', 115300, true],\n  ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n  ['Alice Martin', 'North', 158000, true],\n  ['Bob Chen', 'East', 112400, true],\n  ['Carol Davies', 'South', 89100, true],\n  ['David Kim', 'West', 97600, false],\n  ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedSettings: GridSettings = {\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1Settings = ref<GridSettings>({ ...sharedSettings, data: q1Data });\nconst hotQ2Settings = ref<GridSettings>({ ...sharedSettings, data: q2Data });\n\nasync function exportSheets(): Promise<void> {\n  const hotQ1 = hotQ1Ref.value?.hotInstance;\n  const hotQ2 = hotQ2Ref.value?.hotInstance;\n  const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n  if (!hotQ1 || !hotQ2 || !exportPlugin) {\n    return;\n  }\n\n  await exportPlugin.downloadFileAsync('xlsx', {\n    filename: 'Annual-Sales-Report',\n    sheets: [\n      { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n      { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n    ],\n  });\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"exportSheets\">\n          Export XLSX\n        </button>\n      </div>\n    </div>\n    <p><strong>Q1 Sales</strong></p>\n    <HotTable ref=\"hotQ1Ref\" :settings=\"hotQ1Settings\" />\n    <p><strong>Q2 Sales</strong></p>\n    <HotTable ref=\"hotQ2Ref\" :settings=\"hotQ2Settings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json
index 5b92f0553..44c432f06 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true],\n    ['Wireless Mouse', 'Accessories', 29.99, 214, true],\n    ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true],\n    ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n    ['Mech Keyboard', 'Accessories', 119.99, 65, true],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true],\n    ['Wireless Mouse', 'Accessories', 29.99, 214, true],\n    ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true],\n    ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n    ['Mech Keyboard', 'Accessories', 119.99, 65, true],\n  ],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { type: 'numeric' },\n    { type: 'checkbox' },\n  ],\n  colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  contextMenu: true,\n  exportFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <p>Right-click any cell to open the context menu.</p>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__angular__example1.ts.json
index 5044c703a..a8e13f287 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"import-file\">Import XLSX</label>\n        <input type=\"file\" id=\"import-file\" accept=\".xlsx\" (change)=\"importFile($event)\">\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n    ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n    ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n    ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n    ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n      { type: 'text' },\n      { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n      { type: 'checkbox' },\n      { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    importFile: { engines: { xlsx: ExcelJS } },\n  };\n\n  async importFile(event: Event): Promise<void> {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n\n    if (!file) {\n      return;\n    }\n\n    const importPlugin = this.hotTable.hotInstance!.getPlugin('importFile');\n    const result = await importPlugin.importFromBlob('xlsx', file, {\n      colHeaders: 'firstRow',\n    });\n\n    console.log('Dropped features:', result.dropped);\n\n    input.value = '';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/import-from-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"import-file\">Import XLSX</label>\n        <input type=\"file\" id=\"import-file\" accept=\".xlsx\" (change)=\"importFile($event)\">\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n    ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n    ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n    ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n    ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n    columns: [\n      { type: 'text' },\n      { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n      { type: 'text' },\n      { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n      { type: 'checkbox' },\n      { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    importFile: { engines: { xlsx: ExcelJS } },\n  };\n\n  async importFile(event: Event): Promise<void> {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n\n    if (!file) {\n      return;\n    }\n\n    const importPlugin = this.hotTable.hotInstance!.getPlugin('importFile');\n    const result = await importPlugin.importFromBlob('xlsx', file, {\n      colHeaders: 'firstRow',\n    });\n\n    console.log('Dropped features:', result.dropped);\n\n    input.value = '';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/import-from-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.js.json
index 76b85ad92..6a68d86f9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"import-file\">Import XLSX</label>\n      <input type=\"file\" id=\"import-file\" accept=\".xlsx\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 98000, true, '2022-03-14'],\n    ['James Okafor', 'Marketing', 'Marketing Manager', 87500, true, '2021-07-01'],\n    ['Li Wei', 'Engineering', 'Product Manager', 104000, false, '2020-11-23'],\n    ['Priya Nair', 'Sales', 'Account Executive', 76200, true, '2023-01-09'],\n    ['Tom Bakker', 'Support', 'Support Specialist', 58900, true, '2019-05-30'],\n  ],\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst importPlugin = hot.getPlugin('importFile');\nconst fileInput = document.querySelector('#import-file');\n\nfileInput.addEventListener('change', async () => {\n  const file = fileInput.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const result = await importPlugin.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result.dropped);\n\n  fileInput.value = '';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/import-from-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"import-file\">Import XLSX</label>\n      <input type=\"file\" id=\"import-file\" accept=\".xlsx\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 98000, true, '2022-03-14'],\n    ['James Okafor', 'Marketing', 'Marketing Manager', 87500, true, '2021-07-01'],\n    ['Li Wei', 'Engineering', 'Product Manager', 104000, false, '2020-11-23'],\n    ['Priya Nair', 'Sales', 'Account Executive', 76200, true, '2023-01-09'],\n    ['Tom Bakker', 'Support', 'Support Specialist', 58900, true, '2019-05-30'],\n  ],\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst importPlugin = hot.getPlugin('importFile');\nconst fileInput = document.querySelector('#import-file');\n\nfileInput.addEventListener('change', async () => {\n  const file = fileInput.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const result = await importPlugin.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result.dropped);\n\n  fileInput.value = '';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/import-from-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.ts.json
index b1e1d1c42..7f345fdd4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"import-file\">Import XLSX</label>\n      <input type=\"file\" id=\"import-file\" accept=\".xlsx\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n    ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n    ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n    ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n    ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n  ],\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst importPlugin = hot.getPlugin('importFile');\nconst fileInput = document.querySelector<HTMLInputElement>('#import-file')!;\n\nfileInput.addEventListener('change', async() => {\n  const file = fileInput.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const result = await importPlugin.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result.dropped);\n\n  fileInput.value = '';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/import-from-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"import-file\">Import XLSX</label>\n      <input type=\"file\" id=\"import-file\" accept=\".xlsx\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n    ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n    ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n    ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n    ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n  ],\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst importPlugin = hot.getPlugin('importFile');\nconst fileInput = document.querySelector<HTMLInputElement>('#import-file')!;\n\nfileInput.addEventListener('change', async() => {\n  const file = fileInput.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const result = await importPlugin.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result.dropped);\n\n  fileInput.value = '';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/import-from-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__react__example1.tsx.json
index 394b6a473..5a448575c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n  ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n  ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n  ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n  ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const importFile = async (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n\n    if (!file) {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n    const importPlugin = hot?.getPlugin('importFile');\n    const result = await importPlugin?.importFromBlob('xlsx', file, {\n      colHeaders: 'firstRow',\n    });\n\n    console.log('Dropped features:', result?.dropped);\n\n    event.target.value = '';\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"import-file\">Import XLSX</label>\n          <input type=\"file\" id=\"import-file\" accept=\".xlsx\" onChange={importFile} />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={hotData}\n        colHeaders={['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date']}\n        columns={[\n          { type: 'text' },\n          { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n          { type: 'text' },\n          { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n          { type: 'checkbox' },\n          { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        importFile={{ engines: { xlsx: ExcelJS } }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/import-from-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n  ['Ana García',    'Engineering', 'Senior Engineer',    98000, true,  '2022-03-14'],\n  ['James Okafor',  'Marketing',   'Marketing Manager',  87500, true,  '2021-07-01'],\n  ['Li Wei',        'Engineering', 'Product Manager',   104000, false, '2020-11-23'],\n  ['Priya Nair',    'Sales',       'Account Executive',  76200, true,  '2023-01-09'],\n  ['Tom Bakker',    'Support',     'Support Specialist',  58900, true, '2019-05-30'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const importFile = async (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n\n    if (!file) {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n    const importPlugin = hot?.getPlugin('importFile');\n    const result = await importPlugin?.importFromBlob('xlsx', file, {\n      colHeaders: 'firstRow',\n    });\n\n    console.log('Dropped features:', result?.dropped);\n\n    event.target.value = '';\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"import-file\">Import XLSX</label>\n          <input type=\"file\" id=\"import-file\" accept=\".xlsx\" onChange={importFile} />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={hotData}\n        colHeaders={['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date']}\n        columns={[\n          { type: 'text' },\n          { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n          { type: 'text' },\n          { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n          { type: 'checkbox' },\n          { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        importFile={{ engines: { xlsx: ExcelJS } }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/import-from-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__vue__example1.vue.json
index 2215efb35..f1e4a697c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__import-from-excel__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotData = [\n  ['Ana García', 'Engineering', 'Senior Engineer', 98000, true, '2022-03-14'],\n  ['James Okafor', 'Marketing', 'Marketing Manager', 87500, true, '2021-07-01'],\n  ['Li Wei', 'Engineering', 'Product Manager', 104000, false, '2020-11-23'],\n  ['Priya Nair', 'Sales', 'Account Executive', 76200, true, '2023-01-09'],\n  ['Tom Bakker', 'Support', 'Support Specialist', 58900, true, '2019-05-30'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: hotData,\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function importFile(event: Event): Promise<void> {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const importPlugin = hotRef.value?.hotInstance?.getPlugin('importFile');\n  const result = await importPlugin?.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result?.dropped);\n\n  input.value = '';\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"import-file\">Import XLSX</label>\n        <input type=\"file\" id=\"import-file\" accept=\".xlsx\" @change=\"importFile\">\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/import-from-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Import from Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"exceljs\": \"4.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotData = [\n  ['Ana García', 'Engineering', 'Senior Engineer', 98000, true, '2022-03-14'],\n  ['James Okafor', 'Marketing', 'Marketing Manager', 87500, true, '2021-07-01'],\n  ['Li Wei', 'Engineering', 'Product Manager', 104000, false, '2020-11-23'],\n  ['Priya Nair', 'Sales', 'Account Executive', 76200, true, '2023-01-09'],\n  ['Tom Bakker', 'Support', 'Support Specialist', 58900, true, '2019-05-30'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: hotData,\n  colHeaders: ['Name', 'Department', 'Job title', 'Salary ($)', 'Active', 'Hire date'],\n  columns: [\n    { type: 'text' },\n    { type: 'dropdown', source: ['Engineering', 'Marketing', 'Sales', 'Support'] },\n    { type: 'text' },\n    { type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    { type: 'checkbox' },\n    { type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  importFile: { engines: { xlsx: ExcelJS } },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function importFile(event: Event): Promise<void> {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n\n  if (!file) {\n    return;\n  }\n\n  const importPlugin = hotRef.value?.hotInstance?.getPlugin('importFile');\n  const result = await importPlugin?.importFromBlob('xlsx', file, {\n    colHeaders: 'firstRow',\n  });\n\n  console.log('Dropped features:', result?.dropped);\n\n  input.value = '';\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"import-file\">Import XLSX</label>\n        <input type=\"file\" id=\"import-file\" accept=\".xlsx\" @change=\"importFile\">\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/import-from-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Import from Excel"],"guide":"guides/accessories-and-menus/import-from-excel/import-from-excel.md","guideTitle":"Import from Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/import-from-excel","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example1.ts.json
index 797715744..05f8a9f26 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotSettings: GridSettings = {\n    sheetsBar: {\n      sheets: [\n        {\n          name: 'Budget',\n          data: [\n            ['Marketing', 4200, 5100],\n            ['Engineering', 18700, 19200],\n            ['Operations', 3100, 2900],\n          ],\n          settings: {\n            colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n          },\n        },\n        {\n          name: 'Notes',\n          data: [\n            ['Reviewed by Ana García on 2026-03-14'],\n            ['Pending sign-off from Finance'],\n          ],\n          settings: {\n            colHeaders: ['Note • A'],\n          },\n        },\n      ],\n      activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/sheets-bar/angular/example1.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/sheets-bar","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotSettings: GridSettings = {\n    sheetsBar: {\n      sheets: [\n        {\n          name: 'Budget',\n          data: [\n            ['Marketing', 4200, 5100],\n            ['Engineering', 18700, 19200],\n            ['Operations', 3100, 2900],\n          ],\n          settings: {\n            colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n          },\n        },\n        {\n          name: 'Notes',\n          data: [\n            ['Reviewed by Ana García on 2026-03-14'],\n            ['Pending sign-off from Finance'],\n          ],\n          settings: {\n            colHeaders: ['Note • A'],\n          },\n        },\n      ],\n      activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/sheets-bar/angular/example1.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/sheets-bar","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example2.ts.json
index 75dc7bc01..5296fe734 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotSettings: GridSettings = {\n    sheetsBar: {\n      sheets: [\n        {\n          name: 'Budget',\n          data: [\n            ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n            ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n            ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n            ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n            ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n            ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n          ],\n          settings: {\n            colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n            formulas: { engine, sheetName: 'Budget' },\n          },\n        },\n        {\n          name: 'Rates',\n          data: ratesData,\n          settings: {\n            colHeaders: ['Rate • A', 'Value • B'],\n            formulas: { engine, sheetName: 'Rates' },\n          },\n        },\n      ],\n      activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/sheets-bar/angular/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\n@Component({\n  selector: 'app-example2',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotSettings: GridSettings = {\n    sheetsBar: {\n      sheets: [\n        {\n          name: 'Budget',\n          data: [\n            ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n            ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n            ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n            ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n            ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n            ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n          ],\n          settings: {\n            colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n            formulas: { engine, sheetName: 'Budget' },\n          },\n        },\n        {\n          name: 'Rates',\n          data: ratesData,\n          settings: {\n            colHeaders: ['Rate • A', 'Value • B'],\n            formulas: { engine, sheetName: 'Rates' },\n          },\n        },\n      ],\n      activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/sheets-bar/angular/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.js.json
index 0ad6dce55..82876be35 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n    sheetsBar: {\n        sheets: [\n            {\n                name: 'Budget',\n                data: [\n                    ['Marketing', 4200, 5100],\n                    ['Engineering', 18700, 19200],\n                    ['Operations', 3100, 2900],\n                ],\n                settings: {\n                    colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n                },\n            },\n            {\n                name: 'Notes',\n                data: [\n                    ['Reviewed by Ana García on 2026-03-14'],\n                    ['Pending sign-off from Finance'],\n                ],\n                settings: {\n                    colHeaders: ['Note • A'],\n                },\n            },\n        ],\n        activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example.js","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n    sheetsBar: {\n        sheets: [\n            {\n                name: 'Budget',\n                data: [\n                    ['Marketing', 4200, 5100],\n                    ['Engineering', 18700, 19200],\n                    ['Operations', 3100, 2900],\n                ],\n                settings: {\n                    colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n                },\n            },\n            {\n                name: 'Notes',\n                data: [\n                    ['Reviewed by Ana García on 2026-03-14'],\n                    ['Pending sign-off from Finance'],\n                ],\n                settings: {\n                    colHeaders: ['Note • A'],\n                },\n            },\n        ],\n        activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example.js","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.ts.json
index 80316ecd4..9763da06b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Marketing', 4200, 5100],\n          ['Engineering', 18700, 19200],\n          ['Operations', 3100, 2900],\n        ],\n        settings: {\n          colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n        },\n      },\n      {\n        name: 'Notes',\n        data: [\n          ['Reviewed by Ana García on 2026-03-14'],\n          ['Pending sign-off from Finance'],\n        ],\n        settings: {\n          colHeaders: ['Note • A'],\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Marketing', 4200, 5100],\n          ['Engineering', 18700, 19200],\n          ['Operations', 3100, 2900],\n        ],\n        settings: {\n          colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n        },\n      },\n      {\n        name: 'Notes',\n        data: [\n          ['Reviewed by Ana García on 2026-03-14'],\n          ['Pending sign-off from Finance'],\n        ],\n        settings: {\n          colHeaders: ['Note • A'],\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.js.json
index 8a6b49963..e824df916 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n// Register all Handsontable's modules.\nregisterAllModules();\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n});\nconst ratesData = [\n    ['VAT rate', 0.23],\n    ['Service fee', 0.05],\n];\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    sheetsBar: {\n        sheets: [\n            {\n                name: 'Budget',\n                data: [\n                    ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n                    ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n                    ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n                    ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n                    ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n                    ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n                ],\n                settings: {\n                    colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n                    formulas: { engine, sheetName: 'Budget' },\n                },\n            },\n            {\n                name: 'Rates',\n                data: ratesData,\n                settings: {\n                    colHeaders: ['Rate • A', 'Value • B'],\n                    formulas: { engine, sheetName: 'Rates' },\n                },\n            },\n        ],\n        activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example2.js","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n// Register all Handsontable's modules.\nregisterAllModules();\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n});\nconst ratesData = [\n    ['VAT rate', 0.23],\n    ['Service fee', 0.05],\n];\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    sheetsBar: {\n        sheets: [\n            {\n                name: 'Budget',\n                data: [\n                    ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n                    ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n                    ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n                    ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n                    ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n                    ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n                ],\n                settings: {\n                    colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n                    formulas: { engine, sheetName: 'Budget' },\n                },\n            },\n            {\n                name: 'Rates',\n                data: ratesData,\n                settings: {\n                    colHeaders: ['Rate • A', 'Value • B'],\n                    formulas: { engine, sheetName: 'Rates' },\n                },\n            },\n        ],\n        activeSheet: 0,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 240,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example2.js","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.ts.json
index 31a933191..e03342018 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n          ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n          ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n          ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n          ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n          ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n        ],\n        settings: {\n          colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n          formulas: { engine, sheetName: 'Budget' },\n        },\n      },\n      {\n        name: 'Rates',\n        data: ratesData,\n        settings: {\n          colHeaders: ['Rate • A', 'Value • B'],\n          formulas: { engine, sheetName: 'Rates' },\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n          ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n          ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n          ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n          ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n          ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n        ],\n        settings: {\n          colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n          formulas: { engine, sheetName: 'Budget' },\n        },\n      },\n      {\n        name: 'Rates',\n        data: ratesData,\n        settings: {\n          colHeaders: ['Rate • A', 'Value • B'],\n          formulas: { engine, sheetName: 'Rates' },\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/sheets-bar/javascript/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example.tsx.json
index 9367dce20..128d83565 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst budgetData = [\n  ['Marketing', 4200, 5100],\n  ['Engineering', 18700, 19200],\n  ['Operations', 3100, 2900],\n];\n\nconst notesData = [\n  ['Reviewed by Ana García on 2026-03-14'],\n  ['Pending sign-off from Finance'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      sheetsBar={{\n        sheets: [\n          {\n            name: 'Budget',\n            data: budgetData,\n            settings: {\n              colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n            },\n          },\n          {\n            name: 'Notes',\n            data: notesData,\n            settings: {\n              colHeaders: ['Note • A'],\n            },\n          },\n        ],\n        activeSheet: 0,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height={240}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/sheets-bar/react/example.tsx","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst budgetData = [\n  ['Marketing', 4200, 5100],\n  ['Engineering', 18700, 19200],\n  ['Operations', 3100, 2900],\n];\n\nconst notesData = [\n  ['Reviewed by Ana García on 2026-03-14'],\n  ['Pending sign-off from Finance'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      sheetsBar={{\n        sheets: [\n          {\n            name: 'Budget',\n            data: budgetData,\n            settings: {\n              colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n            },\n          },\n          {\n            name: 'Notes',\n            data: notesData,\n            settings: {\n              colHeaders: ['Note • A'],\n            },\n          },\n        ],\n        activeSheet: 0,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height={240}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/sheets-bar/react/example.tsx","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example2.tsx.json
index 6c7bb64d6..c69347314 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst budgetData = [\n  ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n  ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n  ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n  ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n  ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n  ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n];\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      sheetsBar={{\n        sheets: [\n          {\n            name: 'Budget',\n            data: budgetData,\n            settings: {\n              colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n              formulas: { engine, sheetName: 'Budget' },\n            },\n          },\n          {\n            name: 'Rates',\n            data: ratesData,\n            settings: {\n              colHeaders: ['Rate • A', 'Value • B'],\n              formulas: { engine, sheetName: 'Rates' },\n            },\n          },\n        ],\n        activeSheet: 0,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height={240}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/sheets-bar/react/example2.tsx","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst budgetData = [\n  ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n  ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n  ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n  ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n  ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n  ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n];\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      sheetsBar={{\n        sheets: [\n          {\n            name: 'Budget',\n            data: budgetData,\n            settings: {\n              colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n              formulas: { engine, sheetName: 'Budget' },\n            },\n          },\n          {\n            name: 'Rates',\n            data: ratesData,\n            settings: {\n              colHeaders: ['Rate • A', 'Value • B'],\n              formulas: { engine, sheetName: 'Rates' },\n            },\n          },\n        ],\n        activeSheet: 0,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height={240}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/sheets-bar/react/example2.tsx","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example.vue.json
index 17ce03c38..8f002c360 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Marketing', 4200, 5100],\n          ['Engineering', 18700, 19200],\n          ['Operations', 3100, 2900],\n        ],\n        settings: {\n          colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n        },\n      },\n      {\n        name: 'Notes',\n        data: [\n          ['Reviewed by Ana García on 2026-03-14'],\n          ['Pending sign-off from Finance'],\n        ],\n        settings: {\n          colHeaders: ['Note • A'],\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/sheets-bar/vue/example.vue","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Sheets bar · Enable the sheets bar · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Marketing', 4200, 5100],\n          ['Engineering', 18700, 19200],\n          ['Operations', 3100, 2900],\n        ],\n        settings: {\n          colHeaders: ['Category • A', 'Q1 2026 • B', 'Q2 2026 • C'],\n        },\n      },\n      {\n        name: 'Notes',\n        data: [\n          ['Reviewed by Ana García on 2026-03-14'],\n          ['Pending sign-off from Finance'],\n        ],\n        settings: {\n          colHeaders: ['Note • A'],\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/sheets-bar/vue/example.vue","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example","exampleTitle":"Enable the sheets bar","docPermalink":"/sheets-bar","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example2.vue.json
index a8db95acd..0e945f8be 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__sheets-bar__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst hotSettings: GridSettings = {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n          ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n          ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n          ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n          ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n          ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n        ],\n        settings: {\n          colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n          formulas: { engine, sheetName: 'Budget' },\n        },\n      },\n      {\n        name: 'Rates',\n        data: ratesData,\n        settings: {\n          colHeaders: ['Rate • A', 'Value • B'],\n          formulas: { engine, sheetName: 'Rates' },\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/sheets-bar/vue/example2.vue","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n  ['VAT rate', 0.23],\n  ['Service fee', 0.05],\n];\n\nconst hotSettings: GridSettings = {\n  sheetsBar: {\n    sheets: [\n      {\n        name: 'Budget',\n        data: [\n          ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n          ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n          ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n          ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n          ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n          ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n        ],\n        settings: {\n          colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n          formulas: { engine, sheetName: 'Budget' },\n        },\n      },\n      {\n        name: 'Rates',\n        data: ratesData,\n        settings: {\n          colHeaders: ['Rate • A', 'Value • B'],\n          formulas: { engine, sheetName: 'Rates' },\n        },\n      },\n    ],\n    activeSheet: 0,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/sheets-bar/vue/example2.vue","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json
index 1d2e8bc12..4c43758fb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ Undo and redo · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',  74000, '2026-04-25'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/undo-redo/angular/example1.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/undo-redo","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ Undo and redo · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',  74000, '2026-04-25'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/undo-redo/angular/example1.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/undo-redo","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json
index ee21c2f10..3da69eb8c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n        ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n    ],\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.js","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n        ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n    ],\n    rowHeaders: true,\n    colHeaders: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.js","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json
index 1bc74d23b..2b38b41aa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n    ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n    ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n    ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n    ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n    ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n    ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n    ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n    ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n    ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n    ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n    ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n    ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n    ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n    ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json
index a535e6d1b..4e502377c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n  ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n  ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n  ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n  ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n  ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n  ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n  ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n  ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/undo-redo/react/example.tsx","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n  ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n  ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n  ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n  ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n  ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n  ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n  ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n  ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/undo-redo/react/example.tsx","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json
index 04d30d2cd..419cea141 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n    ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n    ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n    ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n    ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n    ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n    ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n    ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/undo-redo/vue/example.vue","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n    ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n    ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n    ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n    ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n    ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n    ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n    ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/undo-redo/vue/example.vue","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json
index 9406930b2..9dd349114 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example1.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example1.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
index 396c6ad62..170e5a046 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@lucide/angular\": \"1.49.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { GridSettings, HotCellRendererComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { LucideFlag, LucideFlagOff } from '@lucide/angular';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in the template. No `data-lucide` placeholder and no\n// `createIcons()` scan - Angular renders the `<svg>` itself.\n@Component({\n  selector: 'app-flag-renderer',\n  standalone: true,\n  imports: [LucideFlag, LucideFlagOff],\n  // Each icon is its own standalone component, applied as an attribute on an\n  // `<svg>` element. The icon has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does. `currentColor` is\n  // Lucide's default stroke, so the icon stays visible in both themes.\n  template: `\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"label\"\n      style=\"background: none; border: none; cursor: pointer; padding: 0.25rem;\"\n      (click)=\"toggle()\"\n    >\n      @if (value) {\n        <svg lucideFlag size=\"18\"></svg>\n      } @else {\n        <svg lucideFlagOff size=\"18\"></svg>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagRendererComponent extends HotCellRendererComponent<boolean> {\n  get label(): string {\n    const taskName = String(this.instance.getDataAtCell(this.row, 0));\n\n    return this.value\n      ? `Remove the follow-up flag from ${taskName}`\n      : `Flag ${taskName} for follow-up`;\n  }\n\n  toggle(): void {\n    this.instance.setDataAtCell(this.row, 3, !this.value);\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: FlagRendererComponent, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@lucide/angular\": \"1.50.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { GridSettings, HotCellRendererComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { LucideFlag, LucideFlagOff } from '@lucide/angular';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in the template. No `data-lucide` placeholder and no\n// `createIcons()` scan - Angular renders the `<svg>` itself.\n@Component({\n  selector: 'app-flag-renderer',\n  standalone: true,\n  imports: [LucideFlag, LucideFlagOff],\n  // Each icon is its own standalone component, applied as an attribute on an\n  // `<svg>` element. The icon has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does. `currentColor` is\n  // Lucide's default stroke, so the icon stays visible in both themes.\n  template: `\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"label\"\n      style=\"background: none; border: none; cursor: pointer; padding: 0.25rem;\"\n      (click)=\"toggle()\"\n    >\n      @if (value) {\n        <svg lucideFlag size=\"18\"></svg>\n      } @else {\n        <svg lucideFlagOff size=\"18\"></svg>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagRendererComponent extends HotCellRendererComponent<boolean> {\n  get label(): string {\n    const taskName = String(this.instance.getDataAtCell(this.row, 0));\n\n    return this.value\n      ? `Remove the follow-up flag from ${taskName}`\n      : `Flag ${taskName} for follow-up`;\n  }\n\n  toggle(): void {\n    this.instance.setDataAtCell(this.row, 3, !this.value);\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: FlagRendererComponent, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json
index 148b713ba..1bb7a5131 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    return td;\n};\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example1.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    return td;\n};\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example1.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json
index 567af20a1..ff5a8aeed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example1.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example1.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
index 5bca6e1ed..413e2a304 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"lucide\": \"1.49.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n    // The icon has no accessible name, so the button carries an `aria-label`\n    // that describes what clicking it does.\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n    // document on every cell render, which a grid does once per visible cell.\n    // `currentColor` keeps the icon visible in both light and dark themes.\n    createIcons({\n        icons: { Flag, FlagOff },\n        attrs: { width: '18', height: '18', stroke: 'currentColor' },\n        root: td,\n    });\n    return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n    // The icon has no accessible name, so the button carries an `aria-label`\n    // that describes what clicking it does.\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n    // document on every cell render, which a grid does once per visible cell.\n    // `currentColor` keeps the icon visible in both light and dark themes.\n    createIcons({\n        icons: { Flag, FlagOff },\n        attrs: { width: '18', height: '18', stroke: 'currentColor' },\n        root: td,\n    });\n    return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
index e6e94f87b..65e832aa3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"lucide\": \"1.49.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json
index 9a359dc96..75a99c573 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\nconst ExampleComponent = () => {\n  // The icon itself has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does.\n  const flagRenderer: BaseRenderer = (\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue\n  ) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n    button.setAttribute(\n      'aria-label',\n      value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n    );\n    button.addEventListener('click', () => {\n      instance.setDataAtCell(row, 3, !value);\n    });\n\n    td.innerText = '';\n    td.appendChild(button);\n\n    return td;\n  };\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      columns={[\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example1.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\nconst ExampleComponent = () => {\n  // The icon itself has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does.\n  const flagRenderer: BaseRenderer = (\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue\n  ) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n    button.setAttribute(\n      'aria-label',\n      value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n    );\n    button.addEventListener('click', () => {\n      instance.setDataAtCell(row, 3, !value);\n    });\n\n    td.innerText = '';\n    td.appendChild(button);\n\n    return td;\n  };\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      columns={[\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example1.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
index d5f5e39f2..92910ef2f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"lucide-react\": \"1.49.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, HotRendererProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Flag, FlagOff } from 'lucide-react';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in as JSX. No `data-lucide` placeholder and no\n// `createIcons()` scan - React renders the `<svg>` itself.\n//\n// Pass a renderer component through `<HotColumn renderer={...}>`, not through\n// a `renderer` key in the `columns` array. Only the prop is wrapped for React;\n// a component in `columns` reaches the grid as a plain renderer function and\n// is called with `(instance, TD, row, ...)` instead of a props object.\nconst FlagCell = ({ instance, row, value }: HotRendererProps) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const flagged = Boolean(value);\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  const label = flagged\n    ? `Remove the follow-up flag from ${taskName}`\n    : `Flag ${taskName} for follow-up`;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}\n      onClick={() => instance.setDataAtCell(row, 3, !flagged)}\n    >\n      {/* `currentColor` is Lucide's default stroke, so the icon stays visible\n          in both light and dark themes. */}\n      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}\n    </button>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\" />\n      <HotColumn data=\"assignee\" />\n      <HotColumn\n        data=\"dueDate\"\n        type=\"date\"\n        dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }}\n      />\n      <HotColumn data=\"flagged\" className=\"htCenter\" renderer={FlagCell} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example2.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"lucide-react\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, HotRendererProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Flag, FlagOff } from 'lucide-react';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in as JSX. No `data-lucide` placeholder and no\n// `createIcons()` scan - React renders the `<svg>` itself.\n//\n// Pass a renderer component through `<HotColumn renderer={...}>`, not through\n// a `renderer` key in the `columns` array. Only the prop is wrapped for React;\n// a component in `columns` reaches the grid as a plain renderer function and\n// is called with `(instance, TD, row, ...)` instead of a props object.\nconst FlagCell = ({ instance, row, value }: HotRendererProps) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const flagged = Boolean(value);\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  const label = flagged\n    ? `Remove the follow-up flag from ${taskName}`\n    : `Flag ${taskName} for follow-up`;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}\n      onClick={() => instance.setDataAtCell(row, 3, !flagged)}\n    >\n      {/* `currentColor` is Lucide's default stroke, so the icon stays visible\n          in both light and dark themes. */}\n      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}\n    </button>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\" />\n      <HotColumn data=\"assignee\" />\n      <HotColumn\n        data=\"dueDate\"\n        type=\"date\"\n        dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }}\n      />\n      <HotColumn data=\"flagged\" className=\"htCenter\" renderer={FlagCell} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example2.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json
index 4cb555334..a3e3575a3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example1.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M6,4.8H5V20H6V13.21c4.18,2.51,8.37-2.51,12.56,0V4.8C14.38,2.29,10.19,7.31,6,4.8Z\"/></svg>';\nconst FLAG_EMPTY_ICON =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\" opacity=\"0.6\"><path d=\"M15.87,4.08c-2.41,0-4.83,1.45-7.25,1.45A5,5,0,0,1,6,4.81v0H5V20H6V13.29A5,5,0,0,0,8.62,14c2.42,0,4.84-1.45,7.25-1.45a5,5,0,0,1,2.66.72V4.8A5,5,0,0,0,15.87,4.08Zm1.66,7.68a6.45,6.45,0,0,0-1.66-.21,13.64,13.64,0,0,0-3.91.77A12.11,12.11,0,0,1,8.62,13,4.17,4.17,0,0,1,7,12.67l-1-.43V5.9l1,.41a6,6,0,0,0,1.66.22,13.51,13.51,0,0,0,3.91-.77,12.11,12.11,0,0,1,3.34-.68,4,4,0,0,1,1.66.33Z\"/></svg>';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example1.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
index 26286096a..bf0dd3ba1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"lucide\": \"1.49.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// The Vue wrapper renders cells through a renderer function rather than a\n// component, so this uses the same `data-lucide` placeholder as vanilla\n// JavaScript: write the placeholder, then let Lucide swap it for an `<svg>`.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example2.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// The Vue wrapper renders cells through a renderer function rather than a\n// component, so this uses the same `data-lucide` placeholder as vanilla\n// JavaScript: write the placeholder, then let Lucide swap it for an `<svg>`.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example2.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json
index f32314ac8..27fa352d5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-autofill-values></example1-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-autofill-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-autofill-values></example1-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-autofill-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', '', '', '', ''],\n    ['Boron', '', '', '', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    colWidths: [80, 62, 110, 118, 110],\n    stretchH: 'all',\n    fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json
index 462425827..2c97265f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-autofill-values></example2-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-autofill-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    fillHandle: {\n      direction: 'vertical',\n      autoInsertRow: true,\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-autofill-values></example2-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-autofill-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', '', '', '', ''],\n    ['Boron', '', '', '', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    colWidths: [80, 62, 110, 118, 110],\n    stretchH: 'all',\n    fillHandle: {\n      direction: 'vertical',\n      autoInsertRow: true,\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json
index 93848fbde..c6a03330a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-autofill-values></example3-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport type { CellRange } from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example3-autofill-values',\n  template: `\n    <output class=\"console\" id=\"output\">{{ output }}</output>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n  ];\n\n  output = 'Drag the fill handle to see the affected range logged here.';\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    fillHandle: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeAutofill: (selectionData: Handsontable.CellValue[][]) =>\n      // This dealership reports sales in batches of 5 cars, so round every\n      // filled value up to the nearest multiple of 5.\n      selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))),\n    afterAutofill: (\n      fillData: Handsontable.CellValue[][],\n      sourceRange: CellRange,\n      targetRange: CellRange,\n      direction: 'up' | 'down' | 'left' | 'right'\n    ) => {\n      this.output =\n        `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n        `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-autofill-values></example3-autofill-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport type { CellRange } from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example3-autofill-values',\n  template: `\n    <output class=\"console\" id=\"output\">{{ output }}</output>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', '', '', '', ''],\n    ['Boron', '', '', '', ''],\n  ];\n\n  output = 'Drag the fill handle to see the affected range logged here.';\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    colWidths: [80, 62, 110, 118, 110],\n    stretchH: 'all',\n    fillHandle: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeAutofill: (selectionData: Handsontable.CellValue[][]) =>\n      // Round every filled number up to the nearest multiple of 5.\n      selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))),\n    afterAutofill: (\n      fillData: Handsontable.CellValue[][],\n      sourceRange: CellRange,\n      targetRange: CellRange,\n      direction: 'up' | 'down' | 'left' | 'right'\n    ) => {\n      this.output =\n        `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n        `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json
index 65d8101dc..b4bbb3bc1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json
index 2f1848205..f4226d8c2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json
index d9ede81e9..e056cdf69 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json
index 32e0493a3..b49679ce6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json
index ad5271477..32dd07fb6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Drag the fill handle to see the affected range logged here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n];\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#output');\nnew Handsontable(container, {\n    data,\n    rowHeaders: true,\n    colHeaders: true,\n    fillHandle: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n    beforeAutofill(selectionData) {\n        // This dealership reports sales in batches of 5 cars, so round every\n        // filled value up to the nearest multiple of 5.\n        return selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)));\n    },\n    afterAutofill(fillData, sourceRange, targetRange, direction) {\n        output.innerText =\n            `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n                `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n    },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Drag the fill handle to see the affected range logged here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#output');\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeAutofill(selectionData) {\n    // Round every filled number up to the nearest multiple of 5.\n    return selectionData.map((row) =>\n      row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)),\n    );\n  },\n  afterAutofill(fillData, sourceRange, targetRange, direction) {\n    output.innerText =\n      `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n      `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json
index 9ba11b102..a1296ae32 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Drag the fill handle to see the affected range logged here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeAutofill(selectionData) {\n    // This dealership reports sales in batches of 5 cars, so round every\n    // filled value up to the nearest multiple of 5.\n    return selectionData.map((row) =>\n      row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n    );\n  },\n  afterAutofill(fillData, sourceRange, targetRange, direction) {\n    output.innerText =\n      `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n      `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Drag the fill handle to see the affected range logged here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeAutofill(selectionData) {\n    // Round every filled number up to the nearest multiple of 5.\n    return selectionData.map((row) =>\n      row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n    );\n  },\n  afterAutofill(fillData, sourceRange, targetRange, direction) {\n    output.innerText =\n      `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n      `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json
index d5d583500..f68041601 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Autofill values · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      fillHandle={true} // possible values: true, false, \"horizontal\", \"vertical\",\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example1.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Autofill values · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', '', '', '', ''],\n    ['Boron', '', '', '', ''],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      colWidths={[80, 62, 110, 118, 110]}\n      stretchH=\"all\"\n      fillHandle={true} // possible values: true, false, \"horizontal\", \"vertical\",\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example1.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json
index e416a1690..11b1df564 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n    ['2017', 10, 11, 12, 13],\n    ['2018', 20, 11, 14, 13],\n    ['2019', 30, 15, 12, 13],\n    ['2020', '', '', '', ''],\n    ['2021', '', '', '', ''],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      fillHandle={{\n        direction: 'vertical',\n        autoInsertRow: true,\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example2.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', '', '', '', ''],\n    ['Boron', '', '', '', ''],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      colWidths={[80, 62, 110, 118, 110]}\n      stretchH=\"all\"\n      fillHandle={{\n        direction: 'vertical',\n        autoInsertRow: true,\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example2.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json
index c60a2ce62..8ad27faae 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Defined outside the component so autofill can mutate this array in place\n// without a re-render (triggered by `setOutput`) resetting it to its initial values.\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('Drag the fill handle to see the affected range logged here.');\n\n  return (\n    <>\n      <output className=\"console\" id=\"output\">\n        {output}\n      </output>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        colHeaders={true}\n        fillHandle={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        beforeAutofill={(selectionData) =>\n          // This dealership reports sales in batches of 5 cars, so round every\n          // filled value up to the nearest multiple of 5.\n          selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)))\n        }\n        afterAutofill={(fillData, sourceRange, targetRange, direction) => {\n          setOutput(\n            `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n              `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`\n          );\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example3.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Defined outside the component so autofill can mutate this array in place\n// without a re-render (triggered by `setOutput`) resetting it to its initial values.\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('Drag the fill handle to see the affected range logged here.');\n\n  return (\n    <>\n      <output className=\"console\" id=\"output\">\n        {output}\n      </output>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n        colWidths={[80, 62, 110, 118, 110]}\n        stretchH=\"all\"\n        fillHandle={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        beforeAutofill={(selectionData) =>\n          // Round every filled number up to the nearest multiple of 5.\n          selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)))\n        }\n        afterAutofill={(fillData, sourceRange, targetRange, direction) => {\n          setOutput(\n            `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n              `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`\n          );\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example3.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json
index 318d7422d..e550c5acb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example1.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example1.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json
index c137e9e31..ede7b782b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example2.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: {\n    direction: 'vertical',\n    autoInsertRow: true,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example2.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json
index 1795ae783..96bf49a7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst output = ref('Drag the fill handle to see the affected range logged here.');\n\nconst data: GridSettings['data'] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n  ['2017', 10, 11, 12, 13],\n  ['2018', 20, 11, 14, 13],\n  ['2019', 30, 15, 12, 13],\n  ['2020', '', '', '', ''],\n  ['2021', '', '', '', ''],\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeAutofill(selectionData) {\n    // This dealership reports sales in batches of 5 cars, so round every\n    // filled value up to the nearest multiple of 5.\n    return selectionData.map((row) =>\n      row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n    );\n  },\n  afterAutofill(fillData, sourceRange, targetRange, direction) {\n    output.value =\n      `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n      `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n  },\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <output class=\"console\" id=\"output\">{{ output }}</output>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example3.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst output = ref('Drag the fill handle to see the affected range logged here.');\n\nconst data: GridSettings['data'] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', '', '', '', ''],\n  ['Boron', '', '', '', ''],\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  colWidths: [80, 62, 110, 118, 110],\n  stretchH: 'all',\n  fillHandle: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeAutofill(selectionData) {\n    // Round every filled number up to the nearest multiple of 5.\n    return selectionData.map((row) =>\n      row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n    );\n  },\n  afterAutofill(fillData, sourceRange, targetRange, direction) {\n    output.value =\n      `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n      `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n  },\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <output class=\"console\" id=\"output\">{{ output }}</output>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/autofill-values/vue/example3.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example1.ts.json
index 1c42ab744..a3b6b0151 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clickable links · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-clickable-links></example1-clickable-links>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-clickable-links',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 120, 260, 220, 320],\n    height: 'auto',\n    autoLink: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clickable-links/angular/example1.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clickable links · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-clickable-links></example1-clickable-links>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-clickable-links',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 120, 260, 220, 320],\n    height: 'auto',\n    autoLink: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clickable-links/angular/example1.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example2.ts.json
index b63e584f1..8d27aaba7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clickable links · Configure the links · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-clickable-links></example2-clickable-links>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-clickable-links',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 260, 220, 320],\n    height: 'auto',\n    // Open links in the same tab, link web URLs only, and add a class to every link.\n    autoLink: {\n      target: '_self',\n      schemes: ['http', 'https'],\n      className: 'tracker-link',\n    },\n    columns: [\n      {},\n      // Link only a cell whose whole value is a URL.\n      { autoLink: { inline: false } },\n      // Keep the contact column as plain text.\n      { autoLink: false },\n      {},\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clickable-links/angular/example2.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clickable links · Configure the links · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-clickable-links></example2-clickable-links>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-clickable-links',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 260, 220, 320],\n    height: 'auto',\n    // Open links in the same tab, link web URLs only, and add a class to every link.\n    autoLink: {\n      target: '_self',\n      schemes: ['http', 'https'],\n      className: 'tracker-link',\n    },\n    columns: [\n      {},\n      // Link only a cell whose whole value is a URL.\n      { autoLink: { inline: false } },\n      // Keep the contact column as plain text.\n      { autoLink: false },\n      {},\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clickable-links/angular/example2.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.js.json
index 88f76dc56..1dee6bcf0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clickable links · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n        ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n        ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n        ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n        ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n    ],\n    colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 120, 260, 220, 320],\n    height: 'auto',\n    autoLink: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example1.js","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clickable links · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n        ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n        ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n        ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n        ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n    ],\n    colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 120, 260, 220, 320],\n    height: 'auto',\n    autoLink: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example1.js","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.ts.json
index 37be4d389..843077243 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clickable links · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 120, 260, 220, 320],\n  height: 'auto',\n  autoLink: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example1.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clickable links · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 120, 260, 220, 320],\n  height: 'auto',\n  autoLink: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example1.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.js.json
index 0361ce2cc..3a2c48d87 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clickable links · Configure the links · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n        ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n        ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n        ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n        ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n    ],\n    colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 260, 220, 320],\n    height: 'auto',\n    // Open links in the same tab, link web URLs only, and add a class to every link.\n    autoLink: {\n        target: '_self',\n        schemes: ['http', 'https'],\n        className: 'tracker-link',\n    },\n    columns: [\n        {},\n        // Link only a cell whose whole value is a URL.\n        { autoLink: { inline: false } },\n        // Keep the contact column as plain text.\n        { autoLink: false },\n        {},\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example2.js","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clickable links · Configure the links · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n        ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n        ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n        ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n        ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n    ],\n    colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n    colWidths: [180, 260, 220, 320],\n    height: 'auto',\n    // Open links in the same tab, link web URLs only, and add a class to every link.\n    autoLink: {\n        target: '_self',\n        schemes: ['http', 'https'],\n        className: 'tracker-link',\n    },\n    columns: [\n        {},\n        // Link only a cell whose whole value is a URL.\n        { autoLink: { inline: false } },\n        // Keep the contact column as plain text.\n        { autoLink: false },\n        {},\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example2.js","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.ts.json
index d9540e743..4d1ca5092 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clickable links · Configure the links · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 260, 220, 320],\n  height: 'auto',\n  // Open links in the same tab, link web URLs only, and add a class to every link.\n  autoLink: {\n    target: '_self',\n    schemes: ['http', 'https'],\n    className: 'tracker-link',\n  },\n  columns: [\n    {},\n    // Link only a cell whose whole value is a URL.\n    { autoLink: { inline: false } },\n    // Keep the contact column as plain text.\n    { autoLink: false },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example2.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clickable links · Configure the links · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 260, 220, 320],\n  height: 'auto',\n  // Open links in the same tab, link web URLs only, and add a class to every link.\n  autoLink: {\n    target: '_self',\n    schemes: ['http', 'https'],\n    className: 'tracker-link',\n  },\n  columns: [\n    {},\n    // Link only a cell whose whole value is a URL.\n    { autoLink: { inline: false } },\n    // Keep the contact column as plain text.\n    { autoLink: false },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clickable-links/javascript/example2.ts","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example1.tsx.json
index af58ecd69..b4d255812 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clickable links · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n  ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n  ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n  ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n  ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Owner', 'Tracker', 'Contact', 'Notes']}\n      colWidths={[180, 120, 260, 220, 320]}\n      height=\"auto\"\n      autoLink={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clickable-links/react/example1.tsx","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clickable links · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n  ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n  ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n  ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n  ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Owner', 'Tracker', 'Contact', 'Notes']}\n      colWidths={[180, 120, 260, 220, 320]}\n      height=\"auto\"\n      autoLink={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clickable-links/react/example1.tsx","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example2.tsx.json
index 0fcbaf4b6..d44227571 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clickable links · Configure the links · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n  ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n  ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n  ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n  ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Tracker', 'Contact', 'Notes']}\n      colWidths={[180, 260, 220, 320]}\n      height=\"auto\"\n      // Open links in the same tab, link web URLs only, and add a class to every link.\n      autoLink={{\n        target: '_self',\n        schemes: ['http', 'https'],\n        className: 'tracker-link',\n      }}\n      columns={[\n        {},\n        // Link only a cell whose whole value is a URL.\n        { autoLink: { inline: false } },\n        // Keep the contact column as plain text.\n        { autoLink: false },\n        {},\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clickable-links/react/example2.tsx","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clickable links · Configure the links · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n  ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n  ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n  ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n  ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Tracker', 'Contact', 'Notes']}\n      colWidths={[180, 260, 220, 320]}\n      height=\"auto\"\n      // Open links in the same tab, link web URLs only, and add a class to every link.\n      autoLink={{\n        target: '_self',\n        schemes: ['http', 'https'],\n        className: 'tracker-link',\n      }}\n      columns={[\n        {},\n        // Link only a cell whose whole value is a URL.\n        { autoLink: { inline: false } },\n        // Keep the contact column as plain text.\n        { autoLink: false },\n        {},\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clickable-links/react/example2.tsx","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example1.vue.json
index dc7aa1f93..776386d1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clickable links · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 120, 260, 220, 320],\n  height: 'auto',\n  autoLink: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clickable-links/vue/example1.vue","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clickable links · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'Ana García', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs, review by Friday.'],\n    ['Deploy hotfix', 'James Okafor', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'Li Wei', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'Priya Nair', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls for the checklist.'],\n    ['Audit access logs', 'Tomás Rivera', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Owner', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 120, 260, 220, 320],\n  height: 'auto',\n  autoLink: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clickable-links/vue/example1.vue","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/clickable-links","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example2.vue.json
index 7dc59ef22..38c20d400 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clickable-links__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clickable links · Configure the links · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 260, 220, 320],\n  height: 'auto',\n  // Open links in the same tab, link web URLs only, and add a class to every link.\n  autoLink: {\n    target: '_self',\n    schemes: ['http', 'https'],\n    className: 'tracker-link',\n  },\n  columns: [\n    {},\n    // Link only a cell whose whole value is a URL.\n    { autoLink: { inline: false } },\n    // Keep the contact column as plain text.\n    { autoLink: false },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clickable-links/vue/example2.vue","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clickable links · Configure the links · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'https://tracker.example.com/tasks/4821', 'mailto:ana.garcia@example.com', 'Draft at https://wiki.example.com/api-docs'],\n    ['Deploy hotfix', 'https://tracker.example.com/tasks/4830', 'mailto:james.okafor@example.com', 'Rollback plan: https://wiki.example.com/rollback'],\n    ['Migrate CI runners', 'https://tracker.example.com/tasks/4835', 'tel:+48123456789', 'Blocked on vendor call.'],\n    ['Renew TLS certificates', 'https://tracker.example.com/tasks/4841', 'mailto:priya.nair@example.com', 'See https://wiki.example.com/tls'],\n    ['Audit access logs', 'https://tracker.example.com/tasks/4846', 'tel:+48987654321', 'Report due 2025-06-30.'],\n  ],\n  colHeaders: ['Task', 'Tracker', 'Contact', 'Notes'],\n  colWidths: [180, 260, 220, 320],\n  height: 'auto',\n  // Open links in the same tab, link web URLs only, and add a class to every link.\n  autoLink: {\n    target: '_self',\n    schemes: ['http', 'https'],\n    className: 'tracker-link',\n  },\n  columns: [\n    {},\n    // Link only a cell whose whole value is a URL.\n    { autoLink: { inline: false } },\n    // Keep the contact column as plain text.\n    { autoLink: false },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clickable-links/vue/example2.vue","breadcrumb":["Cell Features","Clickable links"],"guide":"guides/cell-features/clickable-links/clickable-links.md","guideTitle":"Clickable links","exampleId":"example2","exampleTitle":"Configure the links","docPermalink":"/clickable-links","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json
index 4eed9fd2a..3b18c7171 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-clipboard></example1-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Update API docs',  'Backend', 'In progress', 'Ana García',      '2026-05-10'],\n    ['Deploy hotfix',    'DevOps',  'Done',         'David Kim',       '2026-04-02'],\n    ['Write tests',      'QA',      'Blocked',      'Sara Johansson',  '2026-05-20'],\n    ['Review PRs',       'Backend', 'In progress',  'Li Wei',          '2026-04-15'],\n    ['Update README',    'Docs',    'Done',          'Emma Wilson',     '2026-03-28'],\n  ];\n\n  readonly gridSettings: GridSettings ={\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: ['copy', 'cut'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-clipboard></example1-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Update API docs',  'Backend', 'In progress', 'Ana García',      '2026-05-10'],\n    ['Deploy hotfix',    'DevOps',  'Done',         'David Kim',       '2026-04-02'],\n    ['Write tests',      'QA',      'Blocked',      'Sara Johansson',  '2026-05-20'],\n    ['Review PRs',       'Backend', 'In progress',  'Li Wei',          '2026-04-15'],\n    ['Update README',    'Docs',    'Done',          'Emma Wilson',     '2026-03-28'],\n  ];\n\n  readonly gridSettings: GridSettings ={\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: ['copy', 'cut'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json
index 561042e4c..946609f37 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy with headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-clipboard></example2-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['EMEA',   142000, 48,  168000, 53,  195000, 61,  221000, 72,  726000],\n    ['APAC',    98000, 31,  115000, 38,  134000, 44,  158000, 52,  505000],\n    ['AMER',   213000, 68,  247000, 79,  289000, 91,  334000, 108, 1083000],\n    ['LATAM',   54000, 17,   63000, 20,   74000, 24,   87000, 28,  278000],\n    ['MEA',     38000, 12,   44000, 14,   52000, 17,   61000, 20,  195000],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    contextMenu: true,\n    copyPaste: {\n      copyColumnHeaders: true,\n      copyColumnGroupHeaders: true,\n      copyColumnHeadersOnly: true,\n    },\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      [\n        'A',\n        { label: 'B', colspan: 2 },\n        { label: 'C', colspan: 2 },\n        { label: 'D', colspan: 2 },\n        { label: 'E', colspan: 2 },\n        'F',\n      ],\n      ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy with headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-clipboard></example2-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['EMEA',   142000, 48,  168000, 53,  195000, 61,  221000, 72,  726000],\n    ['APAC',    98000, 31,  115000, 38,  134000, 44,  158000, 52,  505000],\n    ['AMER',   213000, 68,  247000, 79,  289000, 91,  334000, 108, 1083000],\n    ['LATAM',   54000, 17,   63000, 20,   74000, 24,   87000, 28,  278000],\n    ['MEA',     38000, 12,   44000, 14,   52000, 17,   61000, 20,  195000],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    contextMenu: true,\n    copyPaste: {\n      copyColumnHeaders: true,\n      copyColumnGroupHeaders: true,\n      copyColumnHeadersOnly: true,\n    },\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      [\n        'A',\n        { label: 'B', colspan: 2 },\n        { label: 'C', colspan: 2 },\n        { label: 'D', colspan: 2 },\n        { label: 'E', colspan: 2 },\n        'F',\n      ],\n      ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json
index 760d32c5a..cafd7e0f0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-clipboard></example3-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"copy\"\n          (mousedown)=\"copyBtnMousedown()\"\n          (click)=\"copyBtnClick()\"\n        >\n          Select and copy cell B2\n        </button>&nbsp;\n        <button id=\"cut\" (mousedown)=\"cutBtnMousedown()\" (click)=\"cutBtnClick()\">\n          Select and cut cell B2\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`\n  ,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Update API docs',  'Backend', 'In progress', 'Ana García',      '2026-05-10'],\n    ['Deploy hotfix',    'DevOps',  'Done',         'David Kim',       '2026-04-02'],\n    ['Write tests',      'QA',      'Blocked',      'Sara Johansson',  '2026-05-20'],\n    ['Review PRs',       'Backend', 'In progress',  'Li Wei',          '2026-04-15'],\n    ['Update README',    'Docs',    'Done',          'Emma Wilson',     '2026-03-28'],\n  ];\n\n  readonly gridSettings:GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  copyBtnClick(): void {\n    document.execCommand('copy');\n  }\n\n  cutBtnClick(): void {\n    document.execCommand('cut');\n  }\n\n  copyBtnMousedown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  }\n\n  cutBtnMousedown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-clipboard></example3-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"copy\"\n          (mousedown)=\"copyBtnMousedown()\"\n          (click)=\"copyBtnClick()\"\n        >\n          Select and copy cell B2\n        </button>&nbsp;\n        <button id=\"cut\" (mousedown)=\"cutBtnMousedown()\" (click)=\"cutBtnClick()\">\n          Select and cut cell B2\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`\n  ,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Update API docs',  'Backend', 'In progress', 'Ana García',      '2026-05-10'],\n    ['Deploy hotfix',    'DevOps',  'Done',         'David Kim',       '2026-04-02'],\n    ['Write tests',      'QA',      'Blocked',      'Sara Johansson',  '2026-05-20'],\n    ['Review PRs',       'Backend', 'In progress',  'Li Wei',          '2026-04-15'],\n    ['Update README',    'Docs',    'Done',          'Emma Wilson',     '2026-03-28'],\n  ];\n\n  readonly gridSettings:GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  copyBtnClick(): void {\n    document.execCommand('copy');\n  }\n\n  cutBtnClick(): void {\n    document.execCommand('cut');\n  }\n\n  copyBtnMousedown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  }\n\n  cutBtnMousedown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json
index 81a73d4e5..8a748ea8b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-clipboard></example4-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col)['className'] as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\n@Component({\n  selector: 'example4-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  copiedClassNames: string[][] = [];\n\n  readonly data = [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    cell: [\n      { row: 0, col: 1, className: 'htRight' },\n      { row: 0, col: 2, className: 'htCenter' },\n      { row: 2, col: 1, className: 'htRight htDimmed' },\n      { row: 2, col: 2, className: 'htCenter htDimmed' },\n    ],\n    afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n    },\n    afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n    },\n    afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n      const target = coords[0];\n      const hot = this.hotTable.hotInstance!;\n\n      if (!target) {\n        return;\n      }\n\n      hot.batch(() => {\n        this.copiedClassNames.forEach((rowClassNames, rowOffset) => {\n          rowClassNames.forEach((className, colOffset) => {\n            hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n          });\n        });\n      });\n\n      hot.render();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-clipboard></example4-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col)['className'] as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\n@Component({\n  selector: 'example4-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  copiedClassNames: string[][] = [];\n\n  readonly data = [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    cell: [\n      { row: 0, col: 1, className: 'htRight' },\n      { row: 0, col: 2, className: 'htCenter' },\n      { row: 2, col: 1, className: 'htRight htDimmed' },\n      { row: 2, col: 2, className: 'htCenter htDimmed' },\n    ],\n    afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n    },\n    afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n    },\n    afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n      const target = coords[0];\n      const hot = this.hotTable.hotInstance!;\n\n      if (!target) {\n        return;\n      }\n\n      hot.batch(() => {\n        this.copiedClassNames.forEach((rowClassNames, rowOffset) => {\n          rowClassNames.forEach((className, colOffset) => {\n            hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n          });\n        });\n      });\n\n      hot.render();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json
index 1b1ba08af..dc5ab0f19 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-clipboard></example5-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\n@Component({\n  selector: 'example5-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  copiedComments: (string | undefined)[][] = [];\n\n  readonly data = [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n      { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n      { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n      { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n    ],\n    afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n    },\n    afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n    },\n    afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n      const target = coords[0];\n      const hot = this.hotTable.hotInstance!;\n      const comments = hot.getPlugin('comments');\n\n      if (!target) {\n        return;\n      }\n\n      hot.batch(() => {\n        this.copiedComments.forEach((rowComments, rowOffset) => {\n          rowComments.forEach((comment, colOffset) => {\n            const row = target.startRow + rowOffset;\n            const col = target.startCol + colOffset;\n\n            if (comment) {\n              comments.setCommentAtCell(row, col, comment);\n            } else {\n              comments.removeCommentAtCell(row, col, false);\n            }\n          });\n        });\n      });\n\n      hot.render();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-clipboard></example5-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\n@Component({\n  selector: 'example5-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false })\n  readonly hotTable!: HotTableComponent;\n\n  copiedComments: (string | undefined)[][] = [];\n\n  readonly data = [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n      { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n      { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n      { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n    ],\n    afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n    },\n    afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n      this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n    },\n    afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n      const target = coords[0];\n      const hot = this.hotTable.hotInstance!;\n      const comments = hot.getPlugin('comments');\n\n      if (!target) {\n        return;\n      }\n\n      hot.batch(() => {\n        this.copiedComments.forEach((rowComments, rowOffset) => {\n          rowComments.forEach((comment, colOffset) => {\n            const row = target.startRow + rowOffset;\n            const col = target.startCol + colOffset;\n\n            if (comment) {\n              comments.setCommentAtCell(row, col, comment);\n            } else {\n              comments.removeCommentAtCell(row, col, false);\n            }\n          });\n        });\n      });\n\n      hot.render();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example6.ts.json
new file mode 100644
index 000000000..f711f370b
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example6.ts.json
@@ -0,0 +1 @@
+{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Clean up pasted content before it is parsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-clipboard></example6-clipboard>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type { PasteClipboardData } from 'handsontable/base';\n\n// Convert \"1 234,50\" (space or non-breaking space as the thousands separator,\n// comma as the decimal separator) to \"1234.50\".\nfunction toPlainNumbers(text: string): string {\n  return text.replace(/(\\d)[\\u00a0\\u202f ](?=\\d{3}\\b)/g, '$1').replace(/(\\d),(\\d)/g, '$1.$2');\n}\n\n@Component({\n  selector: 'example6-clipboard',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Wireless mouse', 24.9, 142],\n    ['USB-C cable', 9.5, 67],\n    ['Mechanical keyboard', 89, 0],\n    ['Laptop stand', 45.25, 38],\n    ['HDMI adapter', 12.75, 210],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Unit price', 'Stock'],\n    columns: [{}, { type: 'numeric', numericFormat: { pattern: '0,0.00' } }, { type: 'numeric' }],\n    rowHeaders: true,\n    beforePasteParse: (clipboardData: PasteClipboardData) => {\n      clipboardData.setData('text/plain', toPlainNumbers(clipboardData.getData('text/plain')));\n      // A spreadsheet also puts a <table> in text/html, and it wins over text/plain.\n      clipboardData.clearData('text/html');\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example6.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example6","exampleTitle":"Clean up pasted content before it is parsed","docPermalink":"/basic-clipboard","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json
index 3955d0bf6..b1c08af74 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json
index ab0ab00e1..ae146e7b5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json
index 85350e4ab..9ebeedf8d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy with headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy with headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json
index 1518867ba..9fbf3c02b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy with headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy with headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json
index 4468ad205..364be118c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"copy\">Select and copy cell B2</button>\n      <button id=\"cut\">Select and cut cell B2</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy');\n\ncopyBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\ncopyBtn.addEventListener('click', () => {\n  document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut');\n\ncutBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\ncutBtn.addEventListener('click', () => {\n  document.execCommand('cut');\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"copy\">Select and copy cell B2</button>\n      <button id=\"cut\">Select and cut cell B2</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy');\n\ncopyBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\ncopyBtn.addEventListener('click', () => {\n  document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut');\n\ncutBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\ncutBtn.addEventListener('click', () => {\n  document.execCommand('cut');\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json
index c792f78a7..13c4760de 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"copy\">Select and copy cell B2</button>\n      <button id=\"cut\">Select and cut cell B2</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy')!;\n\ncopyBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\n\ncopyBtn.addEventListener('click', () => {\n  document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut')!;\n\ncutBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\n\ncutBtn.addEventListener('click', () => {\n  document.execCommand('cut');\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"copy\">Select and copy cell B2</button>\n      <button id=\"cut\">Select and cut cell B2</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  rowHeaders: true,\n  colHeaders: true,\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy')!;\n\ncopyBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\n\ncopyBtn.addEventListener('click', () => {\n  document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut')!;\n\ncutBtn.addEventListener('mousedown', () => {\n  hot.selectCell(1, 1);\n});\n\ncutBtn.addEventListener('click', () => {\n  document.execCommand('cut');\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json
index f3def9bb3..4a27fec92 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nlet copiedClassNames = [];\nfunction collectClassNames(hot, coords) {\n    const source = coords[0];\n    const classNames = [];\n    if (!source) {\n        return classNames;\n    }\n    for (let row = source.startRow; row <= source.endRow; row += 1) {\n        const rowClassNames = [];\n        for (let col = source.startCol; col <= source.endCol; col += 1) {\n            rowClassNames.push(hot.getCellMeta(row, col).className ?? '');\n        }\n        classNames.push(rowClassNames);\n    }\n    return classNames;\n}\nfunction applyClassNames(hot, coords) {\n    const target = coords[0];\n    if (!target) {\n        return;\n    }\n    hot.batch(() => {\n        copiedClassNames.forEach((rowClassNames, rowOffset) => {\n            rowClassNames.forEach((className, colOffset) => {\n                hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n            });\n        });\n    });\n    hot.render();\n}\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142, 'In stock'],\n        ['USB-C cable', 67, 'In stock'],\n        ['Mechanical keyboard', 0, 'Backordered'],\n        ['Laptop stand', 38, 'In stock'],\n        ['HDMI adapter', 210, 'In stock'],\n    ],\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    cell: [\n        { row: 0, col: 1, className: 'htRight' },\n        { row: 0, col: 2, className: 'htCenter' },\n        { row: 2, col: 1, className: 'htRight htDimmed' },\n        { row: 2, col: 2, className: 'htCenter htDimmed' },\n    ],\n    afterCopy(_data, coords) {\n        copiedClassNames = collectClassNames(this, coords);\n    },\n    afterCut(_data, coords) {\n        copiedClassNames = collectClassNames(this, coords);\n    },\n    afterPaste(_data, coords) {\n        applyClassNames(this, coords);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nlet copiedClassNames = [];\nfunction collectClassNames(hot, coords) {\n    const source = coords[0];\n    const classNames = [];\n    if (!source) {\n        return classNames;\n    }\n    for (let row = source.startRow; row <= source.endRow; row += 1) {\n        const rowClassNames = [];\n        for (let col = source.startCol; col <= source.endCol; col += 1) {\n            rowClassNames.push(hot.getCellMeta(row, col).className ?? '');\n        }\n        classNames.push(rowClassNames);\n    }\n    return classNames;\n}\nfunction applyClassNames(hot, coords) {\n    const target = coords[0];\n    if (!target) {\n        return;\n    }\n    hot.batch(() => {\n        copiedClassNames.forEach((rowClassNames, rowOffset) => {\n            rowClassNames.forEach((className, colOffset) => {\n                hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n            });\n        });\n    });\n    hot.render();\n}\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142, 'In stock'],\n        ['USB-C cable', 67, 'In stock'],\n        ['Mechanical keyboard', 0, 'Backordered'],\n        ['Laptop stand', 38, 'In stock'],\n        ['HDMI adapter', 210, 'In stock'],\n    ],\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    cell: [\n        { row: 0, col: 1, className: 'htRight' },\n        { row: 0, col: 2, className: 'htCenter' },\n        { row: 2, col: 1, className: 'htRight htDimmed' },\n        { row: 2, col: 2, className: 'htCenter htDimmed' },\n    ],\n    afterCopy(_data, coords) {\n        copiedClassNames = collectClassNames(this, coords);\n    },\n    afterCut(_data, coords) {\n        copiedClassNames = collectClassNames(this, coords);\n    },\n    afterPaste(_data, coords) {\n        applyClassNames(this, coords);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json
index 34eba3d3d..bb443f19f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nlet copiedClassNames: string[][] = [];\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nfunction applyClassNames(hot: Handsontable, coords: CopyRange[]): void {\n  const target = coords[0];\n\n  if (!target) {\n    return;\n  }\n\n  hot.batch(() => {\n    copiedClassNames.forEach((rowClassNames, rowOffset) => {\n      rowClassNames.forEach((className, colOffset) => {\n        hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n      });\n    });\n  });\n\n  hot.render();\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  cell: [\n    { row: 0, col: 1, className: 'htRight' },\n    { row: 0, col: 2, className: 'htCenter' },\n    { row: 2, col: 1, className: 'htRight htDimmed' },\n    { row: 2, col: 2, className: 'htCenter htDimmed' },\n  ],\n  afterCopy(_data, coords) {\n    copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterCut(_data, coords) {\n    copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterPaste(_data, coords) {\n    applyClassNames(this, coords as CopyRange[]);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nlet copiedClassNames: string[][] = [];\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nfunction applyClassNames(hot: Handsontable, coords: CopyRange[]): void {\n  const target = coords[0];\n\n  if (!target) {\n    return;\n  }\n\n  hot.batch(() => {\n    copiedClassNames.forEach((rowClassNames, rowOffset) => {\n      rowClassNames.forEach((className, colOffset) => {\n        hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n      });\n    });\n  });\n\n  hot.render();\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  cell: [\n    { row: 0, col: 1, className: 'htRight' },\n    { row: 0, col: 2, className: 'htCenter' },\n    { row: 2, col: 1, className: 'htRight htDimmed' },\n    { row: 2, col: 2, className: 'htCenter htDimmed' },\n  ],\n  afterCopy(_data, coords) {\n    copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterCut(_data, coords) {\n    copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterPaste(_data, coords) {\n    applyClassNames(this, coords as CopyRange[]);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json
index 37c3a8bee..6fe43e235 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nlet copiedComments = [];\nfunction collectComments(hot, coords) {\n    const source = coords[0];\n    const comments = hot.getPlugin('comments');\n    const copied = [];\n    if (!source) {\n        return copied;\n    }\n    for (let row = source.startRow; row <= source.endRow; row += 1) {\n        const rowComments = [];\n        for (let col = source.startCol; col <= source.endCol; col += 1) {\n            rowComments.push(comments.getCommentAtCell(row, col));\n        }\n        copied.push(rowComments);\n    }\n    return copied;\n}\nfunction applyComments(hot, coords) {\n    const target = coords[0];\n    const comments = hot.getPlugin('comments');\n    if (!target) {\n        return;\n    }\n    hot.batch(() => {\n        copiedComments.forEach((rowComments, rowOffset) => {\n            rowComments.forEach((comment, colOffset) => {\n                const row = target.startRow + rowOffset;\n                const col = target.startCol + colOffset;\n                if (comment) {\n                    comments.setCommentAtCell(row, col, comment);\n                }\n                else {\n                    comments.removeCommentAtCell(row, col, false);\n                }\n            });\n        });\n    });\n    hot.render();\n}\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142, 'In stock'],\n        ['USB-C cable', 67, 'In stock'],\n        ['Mechanical keyboard', 0, 'Backordered'],\n        ['Laptop stand', 38, 'In stock'],\n        ['HDMI adapter', 210, 'In stock'],\n    ],\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n        { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n        { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n        { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n    ],\n    afterCopy(_data, coords) {\n        copiedComments = collectComments(this, coords);\n    },\n    afterCut(_data, coords) {\n        copiedComments = collectComments(this, coords);\n    },\n    afterPaste(_data, coords) {\n        applyComments(this, coords);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nlet copiedComments = [];\nfunction collectComments(hot, coords) {\n    const source = coords[0];\n    const comments = hot.getPlugin('comments');\n    const copied = [];\n    if (!source) {\n        return copied;\n    }\n    for (let row = source.startRow; row <= source.endRow; row += 1) {\n        const rowComments = [];\n        for (let col = source.startCol; col <= source.endCol; col += 1) {\n            rowComments.push(comments.getCommentAtCell(row, col));\n        }\n        copied.push(rowComments);\n    }\n    return copied;\n}\nfunction applyComments(hot, coords) {\n    const target = coords[0];\n    const comments = hot.getPlugin('comments');\n    if (!target) {\n        return;\n    }\n    hot.batch(() => {\n        copiedComments.forEach((rowComments, rowOffset) => {\n            rowComments.forEach((comment, colOffset) => {\n                const row = target.startRow + rowOffset;\n                const col = target.startCol + colOffset;\n                if (comment) {\n                    comments.setCommentAtCell(row, col, comment);\n                }\n                else {\n                    comments.removeCommentAtCell(row, col, false);\n                }\n            });\n        });\n    });\n    hot.render();\n}\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142, 'In stock'],\n        ['USB-C cable', 67, 'In stock'],\n        ['Mechanical keyboard', 0, 'Backordered'],\n        ['Laptop stand', 38, 'In stock'],\n        ['HDMI adapter', 210, 'In stock'],\n    ],\n    colHeaders: ['Product', 'Stock', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n        { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n        { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n        { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n    ],\n    afterCopy(_data, coords) {\n        copiedComments = collectComments(this, coords);\n    },\n    afterCut(_data, coords) {\n        copiedComments = collectComments(this, coords);\n    },\n    afterPaste(_data, coords) {\n        applyComments(this, coords);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json
index 496f1b828..4c91a9de5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nlet copiedComments: (string | undefined)[][] = [];\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nfunction applyComments(hot: Handsontable, coords: CopyRange[]): void {\n  const target = coords[0];\n  const comments = hot.getPlugin('comments');\n\n  if (!target) {\n    return;\n  }\n\n  hot.batch(() => {\n    copiedComments.forEach((rowComments, rowOffset) => {\n      rowComments.forEach((comment, colOffset) => {\n        const row = target.startRow + rowOffset;\n        const col = target.startCol + colOffset;\n\n        if (comment) {\n          comments.setCommentAtCell(row, col, comment);\n        } else {\n          comments.removeCommentAtCell(row, col, false);\n        }\n      });\n    });\n  });\n\n  hot.render();\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n    { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n    { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n  ],\n  afterCopy(_data, coords) {\n    copiedComments = collectComments(this, coords as CopyRange[]);\n  },\n  afterCut(_data, coords) {\n    copiedComments = collectComments(this, coords as CopyRange[]);\n  },\n  afterPaste(_data, coords) {\n    applyComments(this, coords as CopyRange[]);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nlet copiedComments: (string | undefined)[][] = [];\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nfunction applyComments(hot: Handsontable, coords: CopyRange[]): void {\n  const target = coords[0];\n  const comments = hot.getPlugin('comments');\n\n  if (!target) {\n    return;\n  }\n\n  hot.batch(() => {\n    copiedComments.forEach((rowComments, rowOffset) => {\n      rowComments.forEach((comment, colOffset) => {\n        const row = target.startRow + rowOffset;\n        const col = target.startCol + colOffset;\n\n        if (comment) {\n          comments.setCommentAtCell(row, col, comment);\n        } else {\n          comments.removeCommentAtCell(row, col, false);\n        }\n      });\n    });\n  });\n\n  hot.render();\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n    { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n    { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n  ],\n  afterCopy(_data, coords) {\n    copiedComments = collectComments(this, coords as CopyRange[]);\n  },\n  afterCut(_data, coords) {\n    copiedComments = collectComments(this, coords as CopyRange[]);\n  },\n  afterPaste(_data, coords) {\n    applyComments(this, coords as CopyRange[]);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.js.json
new file mode 100644
index 000000000..3de6453c7
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.js.json
@@ -0,0 +1 @@
+{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Clean up pasted content before it is parsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\n// Convert \"1 234,50\" (space or non-breaking space as the thousands separator,\n// comma as the decimal separator) to \"1234.50\".\nfunction toPlainNumbers(text) {\n  return text.replace(/(\\d)[\\u00a0\\u202f ](?=\\d{3}\\b)/g, '$1').replace(/(\\d),(\\d)/g, '$1.$2');\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 24.9, 142],\n    ['USB-C cable', 9.5, 67],\n    ['Mechanical keyboard', 89, 0],\n    ['Laptop stand', 45.25, 38],\n    ['HDMI adapter', 12.75, 210],\n  ],\n  colHeaders: ['Product', 'Unit price', 'Stock'],\n  columns: [{}, { type: 'numeric', numericFormat: { pattern: '0,0.00' } }, { type: 'numeric' }],\n  rowHeaders: true,\n  beforePasteParse(clipboardData) {\n    clipboardData.setData('text/plain', toPlainNumbers(clipboardData.getData('text/plain')));\n    // A spreadsheet also puts a <table> in text/html, and it wins over text/plain.\n    clipboardData.clearData('text/html');\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example6.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example6","exampleTitle":"Clean up pasted content before it is parsed","docPermalink":"/basic-clipboard","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.ts.json
new file mode 100644
index 000000000..f6769167e
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example6.ts.json
@@ -0,0 +1 @@
+{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Clean up pasted content before it is parsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport type { PasteClipboardData } from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\n// Convert \"1 234,50\" (space or non-breaking space as the thousands separator,\n// comma as the decimal separator) to \"1234.50\".\nfunction toPlainNumbers(text: string): string {\n  return text.replace(/(\\d)[\\u00a0\\u202f ](?=\\d{3}\\b)/g, '$1').replace(/(\\d),(\\d)/g, '$1.$2');\n}\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 24.9, 142],\n    ['USB-C cable', 9.5, 67],\n    ['Mechanical keyboard', 89, 0],\n    ['Laptop stand', 45.25, 38],\n    ['HDMI adapter', 12.75, 210],\n  ],\n  colHeaders: ['Product', 'Unit price', 'Stock'],\n  columns: [{}, { type: 'numeric', numericFormat: { pattern: '0,0.00' } }, { type: 'numeric' }],\n  rowHeaders: true,\n  beforePasteParse(clipboardData: PasteClipboardData) {\n    clipboardData.setData('text/plain', toPlainNumbers(clipboardData.getData('text/plain')));\n    // A spreadsheet also puts a <table> in text/html, and it wins over text/plain.\n    clipboardData.clearData('text/html');\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example6.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example6","exampleTitle":"Clean up pasted content before it is parsed","docPermalink":"/basic-clipboard","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json
index 66863ecaf..7ea0077ec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clipboard · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={['copy', 'cut']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example1.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={['copy', 'cut']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example1.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json
index f9663e951..31b7f8dd7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy with headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      contextMenu={true}\n      copyPaste={{\n        copyColumnHeaders: true,\n        copyColumnGroupHeaders: true,\n        copyColumnHeadersOnly: true,\n      }}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      nestedHeaders={[\n        [\n          'A',\n          { label: 'B', colspan: 2 },\n          { label: 'C', colspan: 2 },\n          { label: 'D', colspan: 2 },\n          { label: 'E', colspan: 2 },\n          'F',\n        ],\n        ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example2.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy with headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      contextMenu={true}\n      copyPaste={{\n        copyColumnHeaders: true,\n        copyColumnGroupHeaders: true,\n        copyColumnHeadersOnly: true,\n      }}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      nestedHeaders={[\n        [\n          'A',\n          { label: 'B', colspan: 2 },\n          { label: 'C', colspan: 2 },\n          { label: 'D', colspan: 2 },\n          { label: 'E', colspan: 2 },\n          'F',\n        ],\n        ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example2.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json
index 6178f8f2d..bec4f0b83 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const copyBtnClickCallback = function () {\n    document.execCommand('copy');\n  };\n\n  const cutBtnClickCallback = function () {\n    document.execCommand('cut');\n  };\n\n  const copyBtnMousedownCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  };\n\n  const cutBtnMousedownCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"copy\" onMouseDown={() => copyBtnMousedownCallback()} onClick={() => copyBtnClickCallback()}>\n            Select and copy cell B2\n          </button>\n          <button id=\"cut\" onMouseDown={() => cutBtnMousedownCallback()} onClick={() => cutBtnClickCallback()}>\n            Select and cut cell B2\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        rowHeaders={true}\n        colHeaders={true}\n        data={data}\n        outsideClickDeselects={false}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example3.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const copyBtnClickCallback = function () {\n    document.execCommand('copy');\n  };\n\n  const cutBtnClickCallback = function () {\n    document.execCommand('cut');\n  };\n\n  const copyBtnMousedownCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  };\n\n  const cutBtnMousedownCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.selectCell(1, 1);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"copy\" onMouseDown={() => copyBtnMousedownCallback()} onClick={() => copyBtnClickCallback()}>\n            Select and copy cell B2\n          </button>\n          <button id=\"cut\" onMouseDown={() => cutBtnMousedownCallback()} onClick={() => cutBtnClickCallback()}>\n            Select and cut cell B2\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        rowHeaders={true}\n        colHeaders={true}\n        data={data}\n        outsideClickDeselects={false}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example3.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json
index 841eaec8b..834b9d4ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nconst data = [\n  ['Wireless mouse', 142, 'In stock'],\n  ['USB-C cable', 67, 'In stock'],\n  ['Mechanical keyboard', 0, 'Backordered'],\n  ['Laptop stand', 38, 'In stock'],\n  ['HDMI adapter', 210, 'In stock'],\n];\n\nconst ExampleComponent = () => {\n  const copiedClassNames = useRef<string[][]>([]);\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock', 'Status']}\n      rowHeaders={true}\n      cell={[\n        { row: 0, col: 1, className: 'htRight' },\n        { row: 0, col: 2, className: 'htCenter' },\n        { row: 2, col: 1, className: 'htRight htDimmed' },\n        { row: 2, col: 2, className: 'htCenter htDimmed' },\n      ]}\n      afterCopy={function (this: Handsontable, _data, coords) {\n        copiedClassNames.current = collectClassNames(this, coords as CopyRange[]);\n      }}\n      afterCut={function (this: Handsontable, _data, coords) {\n        copiedClassNames.current = collectClassNames(this, coords as CopyRange[]);\n      }}\n      afterPaste={function (this: Handsontable, _data, coords) {\n        const target = (coords as CopyRange[])[0];\n\n        if (!target) {\n          return;\n        }\n\n        this.batch(() => {\n          copiedClassNames.current.forEach((rowClassNames, rowOffset) => {\n            rowClassNames.forEach((className, colOffset) => {\n              this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n            });\n          });\n        });\n\n        this.render();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example4.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nconst data = [\n  ['Wireless mouse', 142, 'In stock'],\n  ['USB-C cable', 67, 'In stock'],\n  ['Mechanical keyboard', 0, 'Backordered'],\n  ['Laptop stand', 38, 'In stock'],\n  ['HDMI adapter', 210, 'In stock'],\n];\n\nconst ExampleComponent = () => {\n  const copiedClassNames = useRef<string[][]>([]);\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock', 'Status']}\n      rowHeaders={true}\n      cell={[\n        { row: 0, col: 1, className: 'htRight' },\n        { row: 0, col: 2, className: 'htCenter' },\n        { row: 2, col: 1, className: 'htRight htDimmed' },\n        { row: 2, col: 2, className: 'htCenter htDimmed' },\n      ]}\n      afterCopy={function (this: Handsontable, _data, coords) {\n        copiedClassNames.current = collectClassNames(this, coords as CopyRange[]);\n      }}\n      afterCut={function (this: Handsontable, _data, coords) {\n        copiedClassNames.current = collectClassNames(this, coords as CopyRange[]);\n      }}\n      afterPaste={function (this: Handsontable, _data, coords) {\n        const target = (coords as CopyRange[])[0];\n\n        if (!target) {\n          return;\n        }\n\n        this.batch(() => {\n          copiedClassNames.current.forEach((rowClassNames, rowOffset) => {\n            rowClassNames.forEach((className, colOffset) => {\n              this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n            });\n          });\n        });\n\n        this.render();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example4.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json
index 9d06235bc..30c25bd8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nconst data = [\n  ['Wireless mouse', 142, 'In stock'],\n  ['USB-C cable', 67, 'In stock'],\n  ['Mechanical keyboard', 0, 'Backordered'],\n  ['Laptop stand', 38, 'In stock'],\n  ['HDMI adapter', 210, 'In stock'],\n];\n\nconst ExampleComponent = () => {\n  const copiedComments = useRef<(string | undefined)[][]>([]);\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock', 'Status']}\n      rowHeaders={true}\n      comments={true}\n      cell={[\n        { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n        { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n        { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n      ]}\n      afterCopy={function (this: Handsontable, _data, coords) {\n        copiedComments.current = collectComments(this, coords as CopyRange[]);\n      }}\n      afterCut={function (this: Handsontable, _data, coords) {\n        copiedComments.current = collectComments(this, coords as CopyRange[]);\n      }}\n      afterPaste={function (this: Handsontable, _data, coords) {\n        const target = (coords as CopyRange[])[0];\n        const comments = this.getPlugin('comments');\n\n        if (!target) {\n          return;\n        }\n\n        this.batch(() => {\n          copiedComments.current.forEach((rowComments, rowOffset) => {\n            rowComments.forEach((comment, colOffset) => {\n              const row = target.startRow + rowOffset;\n              const col = target.startCol + colOffset;\n\n              if (comment) {\n                comments.setCommentAtCell(row, col, comment);\n              } else {\n                comments.removeCommentAtCell(row, col, false);\n              }\n            });\n          });\n        });\n\n        this.render();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example5.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nconst data = [\n  ['Wireless mouse', 142, 'In stock'],\n  ['USB-C cable', 67, 'In stock'],\n  ['Mechanical keyboard', 0, 'Backordered'],\n  ['Laptop stand', 38, 'In stock'],\n  ['HDMI adapter', 210, 'In stock'],\n];\n\nconst ExampleComponent = () => {\n  const copiedComments = useRef<(string | undefined)[][]>([]);\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock', 'Status']}\n      rowHeaders={true}\n      comments={true}\n      cell={[\n        { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n        { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n        { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n      ]}\n      afterCopy={function (this: Handsontable, _data, coords) {\n        copiedComments.current = collectComments(this, coords as CopyRange[]);\n      }}\n      afterCut={function (this: Handsontable, _data, coords) {\n        copiedComments.current = collectComments(this, coords as CopyRange[]);\n      }}\n      afterPaste={function (this: Handsontable, _data, coords) {\n        const target = (coords as CopyRange[])[0];\n        const comments = this.getPlugin('comments');\n\n        if (!target) {\n          return;\n        }\n\n        this.batch(() => {\n          copiedComments.current.forEach((rowComments, rowOffset) => {\n            rowComments.forEach((comment, colOffset) => {\n              const row = target.startRow + rowOffset;\n              const col = target.startCol + colOffset;\n\n              if (comment) {\n                comments.setCommentAtCell(row, col, comment);\n              } else {\n                comments.removeCommentAtCell(row, col, false);\n              }\n            });\n          });\n        });\n\n        this.render();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example5.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example6.tsx.json
new file mode 100644
index 000000000..59e9a37fb
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example6.tsx.json
@@ -0,0 +1 @@
+{"framework":"react","displayName":"Cell Features ▸ Clipboard · Clean up pasted content before it is parsed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport type { PasteClipboardData } from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Convert \"1 234,50\" (space or non-breaking space as the thousands separator,\n// comma as the decimal separator) to \"1234.50\".\nfunction toPlainNumbers(text: string): string {\n  return text.replace(/(\\d)[\\u00a0\\u202f ](?=\\d{3}\\b)/g, '$1').replace(/(\\d),(\\d)/g, '$1.$2');\n}\n\nconst data = [\n  ['Wireless mouse', 24.9, 142],\n  ['USB-C cable', 9.5, 67],\n  ['Mechanical keyboard', 89, 0],\n  ['Laptop stand', 45.25, 38],\n  ['HDMI adapter', 12.75, 210],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Unit price', 'Stock']}\n      columns={[{}, { type: 'numeric', numericFormat: { pattern: '0,0.00' } }, { type: 'numeric' }]}\n      rowHeaders={true}\n      beforePasteParse={(clipboardData: PasteClipboardData) => {\n        clipboardData.setData('text/plain', toPlainNumbers(clipboardData.getData('text/plain')));\n        // A spreadsheet also puts a <table> in text/html, and it wins over text/plain.\n        clipboardData.clearData('text/html');\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example6.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example6","exampleTitle":"Clean up pasted content before it is parsed","docPermalink":"/basic-clipboard","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json
index 2ff5577e0..31bf822f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example1.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: ['copy', 'cut'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example1.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json
index 06e2b7af0..01c285045 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy with headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example2.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy with headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  contextMenu: true,\n  copyPaste: {\n    copyColumnHeaders: true,\n    copyColumnGroupHeaders: true,\n    copyColumnHeadersOnly: true,\n  },\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    [\n      'A',\n      { label: 'B', colspan: 2 },\n      { label: 'C', colspan: 2 },\n      { label: 'D', colspan: 2 },\n      { label: 'E', colspan: 2 },\n      'F',\n    ],\n    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example2.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json
index e258824c7..af9007d65 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtnClickCallback = () => {\n  document.execCommand('copy');\n};\n\nconst cutBtnClickCallback = () => {\n  document.execCommand('cut');\n};\n\nconst copyBtnMousedownCallback = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n\nconst cutBtnMousedownCallback = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"copy\"\n          type=\"button\"\n          @mousedown=\"copyBtnMousedownCallback\"\n          @click=\"copyBtnClickCallback\"\n        >\n          Select and copy cell B2\n        </button>\n        <button\n          id=\"cut\"\n          type=\"button\"\n          @mousedown=\"cutBtnMousedownCallback\"\n          @click=\"cutBtnClickCallback\"\n        >\n          Select and cut cell B2\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example3.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtnClickCallback = () => {\n  document.execCommand('copy');\n};\n\nconst cutBtnClickCallback = () => {\n  document.execCommand('cut');\n};\n\nconst copyBtnMousedownCallback = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n\nconst cutBtnMousedownCallback = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"copy\"\n          type=\"button\"\n          @mousedown=\"copyBtnMousedownCallback\"\n          @click=\"copyBtnClickCallback\"\n        >\n          Select and copy cell B2\n        </button>\n        <button\n          id=\"cut\"\n          type=\"button\"\n          @mousedown=\"cutBtnMousedownCallback\"\n          @click=\"cutBtnClickCallback\"\n        >\n          Select and cut cell B2\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example3.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json
index 799d6fe3d..6ec270a3a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nregisterAllModules();\n\nconst copiedClassNames = ref<string[][]>([]);\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  cell: [\n    { row: 0, col: 1, className: 'htRight' },\n    { row: 0, col: 2, className: 'htCenter' },\n    { row: 2, col: 1, className: 'htRight htDimmed' },\n    { row: 2, col: 2, className: 'htCenter htDimmed' },\n  ],\n  afterCopy(this: Handsontable, _data, coords) {\n    copiedClassNames.value = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterCut(this: Handsontable, _data, coords) {\n    copiedClassNames.value = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterPaste(this: Handsontable, _data, coords) {\n    const target = (coords as CopyRange[])[0];\n\n    if (!target) {\n      return;\n    }\n\n    this.batch(() => {\n      copiedClassNames.value.forEach((rowClassNames, rowOffset) => {\n        rowClassNames.forEach((className, colOffset) => {\n          this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n        });\n      });\n    });\n\n    this.render();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example4.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nregisterAllModules();\n\nconst copiedClassNames = ref<string[][]>([]);\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n  const source = coords[0];\n  const classNames: string[][] = [];\n\n  if (!source) {\n    return classNames;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowClassNames: string[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n    }\n\n    classNames.push(rowClassNames);\n  }\n\n  return classNames;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  cell: [\n    { row: 0, col: 1, className: 'htRight' },\n    { row: 0, col: 2, className: 'htCenter' },\n    { row: 2, col: 1, className: 'htRight htDimmed' },\n    { row: 2, col: 2, className: 'htCenter htDimmed' },\n  ],\n  afterCopy(this: Handsontable, _data, coords) {\n    copiedClassNames.value = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterCut(this: Handsontable, _data, coords) {\n    copiedClassNames.value = collectClassNames(this, coords as CopyRange[]);\n  },\n  afterPaste(this: Handsontable, _data, coords) {\n    const target = (coords as CopyRange[])[0];\n\n    if (!target) {\n      return;\n    }\n\n    this.batch(() => {\n      copiedClassNames.value.forEach((rowClassNames, rowOffset) => {\n        rowClassNames.forEach((className, colOffset) => {\n          this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n        });\n      });\n    });\n\n    this.render();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example4.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json
index 28ba0bdee..1c27d3529 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nregisterAllModules();\n\nconst copiedComments = ref<(string | undefined)[][]>([]);\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n    { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n    { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n  ],\n  afterCopy(this: Handsontable, _data, coords) {\n    copiedComments.value = collectComments(this, coords as CopyRange[]);\n  },\n  afterCut(this: Handsontable, _data, coords) {\n    copiedComments.value = collectComments(this, coords as CopyRange[]);\n  },\n  afterPaste(this: Handsontable, _data, coords) {\n    const target = (coords as CopyRange[])[0];\n    const comments = this.getPlugin('comments');\n\n    if (!target) {\n      return;\n    }\n\n    this.batch(() => {\n      copiedComments.value.forEach((rowComments, rowOffset) => {\n        rowComments.forEach((comment, colOffset) => {\n          const row = target.startRow + rowOffset;\n          const col = target.startCol + colOffset;\n\n          if (comment) {\n            comments.setCommentAtCell(row, col, comment);\n          } else {\n            comments.removeCommentAtCell(row, col, false);\n          }\n        });\n      });\n    });\n\n    this.render();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example5.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nregisterAllModules();\n\nconst copiedComments = ref<(string | undefined)[][]>([]);\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n  const source = coords[0];\n  const comments = hot.getPlugin('comments');\n  const copied: (string | undefined)[][] = [];\n\n  if (!source) {\n    return copied;\n  }\n\n  for (let row = source.startRow; row <= source.endRow; row += 1) {\n    const rowComments: (string | undefined)[] = [];\n\n    for (let col = source.startCol; col <= source.endCol; col += 1) {\n      rowComments.push(comments.getCommentAtCell(row, col));\n    }\n\n    copied.push(rowComments);\n  }\n\n  return copied;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142, 'In stock'],\n    ['USB-C cable', 67, 'In stock'],\n    ['Mechanical keyboard', 0, 'Backordered'],\n    ['Laptop stand', 38, 'In stock'],\n    ['HDMI adapter', 210, 'In stock'],\n  ],\n  colHeaders: ['Product', 'Stock', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n    { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n    { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n  ],\n  afterCopy(this: Handsontable, _data, coords) {\n    copiedComments.value = collectComments(this, coords as CopyRange[]);\n  },\n  afterCut(this: Handsontable, _data, coords) {\n    copiedComments.value = collectComments(this, coords as CopyRange[]);\n  },\n  afterPaste(this: Handsontable, _data, coords) {\n    const target = (coords as CopyRange[])[0];\n    const comments = this.getPlugin('comments');\n\n    if (!target) {\n      return;\n    }\n\n    this.batch(() => {\n      copiedComments.value.forEach((rowComments, rowOffset) => {\n        rowComments.forEach((comment, colOffset) => {\n          const row = target.startRow + rowOffset;\n          const col = target.startCol + colOffset;\n\n          if (comment) {\n            comments.setCommentAtCell(row, col, comment);\n          } else {\n            comments.removeCommentAtCell(row, col, false);\n          }\n        });\n      });\n    });\n\n    this.render();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example5.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example6.vue.json
new file mode 100644
index 000000000..a6b4107d0
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example6.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Clean up pasted content before it is parsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { PasteClipboardData } from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// Convert \"1 234,50\" (space or non-breaking space as the thousands separator,\n// comma as the decimal separator) to \"1234.50\".\nfunction toPlainNumbers(text: string): string {\n  return text.replace(/(\\d)[\\u00a0\\u202f ](?=\\d{3}\\b)/g, '$1').replace(/(\\d),(\\d)/g, '$1.$2');\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 24.9, 142],\n    ['USB-C cable', 9.5, 67],\n    ['Mechanical keyboard', 89, 0],\n    ['Laptop stand', 45.25, 38],\n    ['HDMI adapter', 12.75, 210],\n  ],\n  colHeaders: ['Product', 'Unit price', 'Stock'],\n  columns: [{}, { type: 'numeric', numericFormat: { pattern: '0,0.00' } }, { type: 'numeric' }],\n  rowHeaders: true,\n  beforePasteParse(clipboardData: PasteClipboardData) {\n    clipboardData.setData('text/plain', toPlainNumbers(clipboardData.getData('text/plain')));\n    // A spreadsheet also puts a <table> in text/html, and it wins over text/plain.\n    clipboardData.clearData('text/html');\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/clipboard/vue/example6.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example6","exampleTitle":"Clean up pasted content before it is parsed","docPermalink":"/basic-clipboard","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json
index 5dc02cf5b..42ca13b8d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-comments></example1-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 1, comment: { value: 'Some comment' } },\n      { row: 2, col: 2, comment: { value: 'More comments' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-comments></example1-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 1, comment: { value: 'Some comment' } },\n      { row: 2, col: 2, comment: { value: 'More comments' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json
index b45de3d13..265a25912 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Make a comment read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-comments></example2-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        comment: { value: 'A read-only comment.', readOnly: true },\n      },\n      { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Make a comment read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-comments></example2-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        comment: { value: 'A read-only comment.', readOnly: true },\n      },\n      { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json
index cc2598b1c..63f0a3fdb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a comment box's size · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-comments></example3-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 1, comment: { value: 'Some comment' } },\n      // add the `style` parameter\n      {\n        row: 2,\n        col: 2,\n        comment: {\n          value: 'Comment 200x50 px',\n          style: { width: 200, height: 50 },\n        },\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a comment box's size · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-comments></example3-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 1, comment: { value: 'Some comment' } },\n      // add the `style` parameter\n      {\n        row: 2,\n        col: 2,\n        comment: {\n          value: 'Comment 200x50 px',\n          style: { width: 200, height: 50 },\n        },\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json
index 6d107409b..e5e739bb0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-comments></example4-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: {\n      // on mouseover, wait 2 seconds before the comment box displays\n      displayDelay: 2000,\n    },\n    cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-comments></example4-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    contextMenu: true,\n    comments: {\n      // on mouseover, wait 2 seconds before the comment box displays\n      displayDelay: 2000,\n    },\n    cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json
index d0b59d338..b0ee0cd6b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-comments></example5-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock'],\n    rowHeaders: true,\n    comments: true,\n    columns: [\n      {},\n      {\n        type: 'numeric',\n        validator(value: any, callback: (valid: boolean) => void) {\n          callback(Number.isInteger(value) && value >= 0);\n        },\n      },\n    ],\n    // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n    afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n      const column = this.propToCol(prop);\n\n      // Skip a property that names no column.\n      if (column === null) {\n        return;\n      }\n\n      const comments = this.getPlugin('comments');\n\n      if (!isValid) {\n        comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n      } else {\n        comments.removeCommentAtCell(row, column);\n      }\n    },\n    // Validate every cell on load so the pre-existing invalid value is flagged right away.\n    afterInit(this: Handsontable) {\n      this.validateCells();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-comments></example5-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Stock'],\n    rowHeaders: true,\n    comments: true,\n    columns: [\n      {},\n      {\n        type: 'numeric',\n        validator(value: any, callback: (valid: boolean) => void) {\n          callback(Number.isInteger(value) && value >= 0);\n        },\n      },\n    ],\n    // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n    afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n      const column = this.propToCol(prop);\n\n      // Skip a property that names no column.\n      if (column === null) {\n        return;\n      }\n\n      const comments = this.getPlugin('comments');\n\n      if (!isValid) {\n        comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n      } else {\n        comments.removeCommentAtCell(row, column);\n      }\n    },\n    // Validate every cell on load so the pre-existing invalid value is flagged right away.\n    afterInit(this: Handsontable) {\n      this.validateCells();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json
index d10a432f1..1588f2aa9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-comments></example6-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"list-comments\" (click)=\"listComments()\">List all comments</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n    <output class=\"comments-output\" style=\"white-space: pre-wrap\">{{ output }}</output>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n      { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n      { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  listComments(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const found: string[] = [];\n\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n      hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n        const comment = cellMeta['comment'] as { value?: string } | undefined;\n\n        if (comment?.value !== undefined) {\n          found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n        }\n      });\n    }\n\n    this.output = found.length > 0 ? found.join('\\n') : 'No comments found.';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-comments></example6-comments>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-comments',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"list-comments\" (click)=\"listComments()\">List all comments</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n    <output class=\"comments-output\" style=\"white-space: pre-wrap\">{{ output }}</output>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n      { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n      { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n      { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  listComments(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const found: string[] = [];\n\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n      hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n        const comment = cellMeta['comment'] as { value?: string } | undefined;\n\n        if (comment?.value !== undefined) {\n          found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n        }\n      });\n    }\n\n    this.output = found.length > 0 ? found.join('\\n') : 'No comments found.';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/comments/angular/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json
index 9535e0fb7..9f6ed28d6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example1.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example1.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json
index 9300ba6b9..3c3bc71bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json
index a22b517fb..2ca1d5ef0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Make a comment read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example2.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Make a comment read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example2.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json
index ff956e1d9..a53950f3c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Make a comment read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Make a comment read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json
index b4e5d0e3f..ef50366db 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a comment box's size · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    // add the `style` parameter\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example3.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a comment box's size · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    // add the `style` parameter\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example3.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json
index 78578ab9d..c56b762f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a comment box's size · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    // add the `style` parameter\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a comment box's size · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    // add the `style` parameter\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json
index eff24eccc..2e94a7dab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    // on mouseover, wait 2 seconds before the comment box displays\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example4.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    // on mouseover, wait 2 seconds before the comment box displays\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example4.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json
index b08296159..950227615 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    // on mouseover, wait 2 seconds before the comment box displays\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    // on mouseover, wait 2 seconds before the comment box displays\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json
index 0c6c99dee..d23be0bd6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142],\n        ['USB-C cable', 67],\n        ['Mechanical keyboard', -5],\n        ['Laptop stand', 38],\n        ['HDMI adapter', 210],\n    ],\n    colHeaders: ['Product', 'Stock'],\n    rowHeaders: true,\n    comments: true,\n    columns: [\n        {},\n        {\n            type: 'numeric',\n            validator(value, callback) {\n                callback(Number.isInteger(value) && value >= 0);\n            },\n        },\n    ],\n    // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n    afterValidate(isValid, value, row, prop) {\n        const column = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (column === null) {\n            return;\n        }\n        const comments = this.getPlugin('comments');\n        if (!isValid) {\n            comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n        }\n        else {\n            comments.removeCommentAtCell(row, column);\n        }\n    },\n    // Validate every cell on load so the pre-existing invalid value is flagged right away.\n    afterInit() {\n        this.validateCells();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example5.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    data: [\n        ['Wireless mouse', 142],\n        ['USB-C cable', 67],\n        ['Mechanical keyboard', -5],\n        ['Laptop stand', 38],\n        ['HDMI adapter', 210],\n    ],\n    colHeaders: ['Product', 'Stock'],\n    rowHeaders: true,\n    comments: true,\n    columns: [\n        {},\n        {\n            type: 'numeric',\n            validator(value, callback) {\n                callback(Number.isInteger(value) && value >= 0);\n            },\n        },\n    ],\n    // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n    afterValidate(isValid, value, row, prop) {\n        const column = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (column === null) {\n            return;\n        }\n        const comments = this.getPlugin('comments');\n        if (!isValid) {\n            comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n        }\n        else {\n            comments.removeCommentAtCell(row, column);\n        }\n    },\n    // Validate every cell on load so the pre-existing invalid value is flagged right away.\n    afterInit() {\n        this.validateCells();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example5.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json
index 6af3d95f7..ac330e528 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ],\n  colHeaders: ['Product', 'Stock'],\n  rowHeaders: true,\n  comments: true,\n  columns: [\n    {},\n    {\n      type: 'numeric',\n      validator(value: any, callback: (valid: boolean) => void) {\n        callback(Number.isInteger(value) && value >= 0);\n      },\n    },\n  ],\n  // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n  afterValidate(isValid, value, row, prop) {\n    const column = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const comments = this.getPlugin('comments');\n\n    if (!isValid) {\n      comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n    } else {\n      comments.removeCommentAtCell(row, column);\n    }\n  },\n  // Validate every cell on load so the pre-existing invalid value is flagged right away.\n  afterInit() {\n    this.validateCells();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ],\n  colHeaders: ['Product', 'Stock'],\n  rowHeaders: true,\n  comments: true,\n  columns: [\n    {},\n    {\n      type: 'numeric',\n      validator(value: any, callback: (valid: boolean) => void) {\n        callback(Number.isInteger(value) && value >= 0);\n      },\n    },\n  ],\n  // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n  afterValidate(isValid, value, row, prop) {\n    const column = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const comments = this.getPlugin('comments');\n\n    if (!isValid) {\n      comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n    } else {\n      comments.removeCommentAtCell(row, column);\n    }\n  },\n  // Validate every cell on load so the pre-existing invalid value is flagged right away.\n  afterInit() {\n    this.validateCells();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json
index f3be32e7e..c8bc958d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"list-comments\">List all comments</button>\n    </div>\n  </div>\n  <div id=\"example6\"></div>\n  <output id=\"comments-output\" class=\"comments-output\" style=\"white-space: pre-wrap;\"></output>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Update API docs', 'Ana García', 'In progress'],\n        ['Deploy hotfix', 'James Okafor', 'Blocked'],\n        ['Review pull requests', 'Li Wei', 'Done'],\n        ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n        ['Refactor auth module', 'David Kim', 'In review'],\n    ],\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n        { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n        { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n        { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst button = document.querySelector('#list-comments');\nconst output = document.querySelector('#comments-output');\nbutton.addEventListener('click', () => {\n    const found = [];\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n        hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n            const comment = cellMeta.comment;\n            if (comment?.value !== undefined) {\n                found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n            }\n        });\n    }\n    output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example6.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"list-comments\">List all comments</button>\n    </div>\n  </div>\n  <div id=\"example6\"></div>\n  <output id=\"comments-output\" class=\"comments-output\" style=\"white-space: pre-wrap;\"></output>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Update API docs', 'Ana García', 'In progress'],\n        ['Deploy hotfix', 'James Okafor', 'Blocked'],\n        ['Review pull requests', 'Li Wei', 'Done'],\n        ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n        ['Refactor auth module', 'David Kim', 'In review'],\n    ],\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    comments: true,\n    cell: [\n        { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n        { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n        { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst button = document.querySelector('#list-comments');\nconst output = document.querySelector('#comments-output');\nbutton.addEventListener('click', () => {\n    const found = [];\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n        hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n            const comment = cellMeta.comment;\n            if (comment?.value !== undefined) {\n                found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n            }\n        });\n    }\n    output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example6.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json
index 549bf9531..5b3cd7b24 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"list-comments\">List all comments</button>\n    </div>\n  </div>\n  <div id=\"example6\"></div>\n  <output id=\"comments-output\" class=\"comments-output\" style=\"white-space: pre-wrap;\"></output>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n    { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n    { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#list-comments')!;\nconst output = document.querySelector('#comments-output')!;\n\nbutton.addEventListener('click', () => {\n  const found: string[] = [];\n\n  // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n  for (let row = 0; row < hot.countRows(); row += 1) {\n    hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n      const comment = cellMeta.comment as { value?: string } | undefined;\n\n      if (comment?.value !== undefined) {\n        found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n      }\n    });\n  }\n\n  output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"list-comments\">List all comments</button>\n    </div>\n  </div>\n  <div id=\"example6\"></div>\n  <output id=\"comments-output\" class=\"comments-output\" style=\"white-space: pre-wrap;\"></output>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n    { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n    { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#list-comments')!;\nconst output = document.querySelector('#comments-output')!;\n\nbutton.addEventListener('click', () => {\n  const found: string[] = [];\n\n  // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n  for (let row = 0; row < hot.countRows(); row += 1) {\n    hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n      const comment = cellMeta.comment as { value?: string } | undefined;\n\n      if (comment?.value !== undefined) {\n        found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n      }\n    });\n  }\n\n  output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json
index 5ba65dc85..62758e014 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        { row: 1, col: 1, comment: { value: 'Some comment' } },\n        { row: 2, col: 2, comment: { value: 'More comments' } },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example1.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        { row: 1, col: 1, comment: { value: 'Some comment' } },\n        { row: 2, col: 2, comment: { value: 'More comments' } },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example1.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json
index 0bd88936c..b8e30625e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Make a comment read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          comment: { value: 'A read-only comment.', readOnly: true },\n        },\n        { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example2.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Make a comment read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          comment: { value: 'A read-only comment.', readOnly: true },\n        },\n        { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example2.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json
index b025db055..5ebc587de 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Set a comment box's size · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        { row: 1, col: 1, comment: { value: 'Some comment' } },\n        // add the `style` parameter\n        {\n          row: 2,\n          col: 2,\n          comment: {\n            value: 'Comment 200x50 px',\n            style: { width: 200, height: 50 },\n          },\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example3.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Set a comment box's size · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={true}\n      cell={[\n        { row: 1, col: 1, comment: { value: 'Some comment' } },\n        // add the `style` parameter\n        {\n          row: 2,\n          col: 2,\n          comment: {\n            value: 'Comment 200x50 px',\n            style: { width: 200, height: 50 },\n          },\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example3.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json
index 273908c39..75bc679cd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={{\n        // on mouseover, wait 2 seconds before the comment box displays\n        displayDelay: 2000,\n      }}\n      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example4.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      contextMenu={true}\n      comments={{\n        // on mouseover, wait 2 seconds before the comment box displays\n        displayDelay: 2000,\n      }}\n      cell={[{ row: 1, col: 1, comment: { value: 'Some comment' } }]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example4.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json
index e92ae312d..3488ace8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Wireless mouse', 142],\n  ['USB-C cable', 67],\n  ['Mechanical keyboard', -5],\n  ['Laptop stand', 38],\n  ['HDMI adapter', 210],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock']}\n      rowHeaders={true}\n      comments={true}\n      columns={[\n        {},\n        {\n          type: 'numeric',\n          validator(value: any, callback: (valid: boolean) => void) {\n            callback(Number.isInteger(value) && value >= 0);\n          },\n        },\n      ]}\n      // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n      afterValidate={function (this: Handsontable, isValid, value, row, prop) {\n        const column = this.propToCol(prop);\n\n        // Skip a property that names no column.\n        if (column === null) {\n          return;\n        }\n\n        const comments = this.getPlugin('comments');\n\n        if (!isValid) {\n          comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n        } else {\n          comments.removeCommentAtCell(row, column);\n        }\n      }}\n      // Validate every cell on load so the pre-existing invalid value is flagged right away.\n      afterInit={function (this: Handsontable) {\n        this.validateCells();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example5.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Wireless mouse', 142],\n  ['USB-C cable', 67],\n  ['Mechanical keyboard', -5],\n  ['Laptop stand', 38],\n  ['HDMI adapter', 210],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Stock']}\n      rowHeaders={true}\n      comments={true}\n      columns={[\n        {},\n        {\n          type: 'numeric',\n          validator(value: any, callback: (valid: boolean) => void) {\n            callback(Number.isInteger(value) && value >= 0);\n          },\n        },\n      ]}\n      // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n      afterValidate={function (this: Handsontable, isValid, value, row, prop) {\n        const column = this.propToCol(prop);\n\n        // Skip a property that names no column.\n        if (column === null) {\n          return;\n        }\n\n        const comments = this.getPlugin('comments');\n\n        if (!isValid) {\n          comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n        } else {\n          comments.removeCommentAtCell(row, column);\n        }\n      }}\n      // Validate every cell on load so the pre-existing invalid value is flagged right away.\n      afterInit={function (this: Handsontable) {\n        this.validateCells();\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example5.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json
index 185e5ff56..182410e2c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Comments · Read all comments programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'Ana García', 'In progress'],\n  ['Deploy hotfix', 'James Okafor', 'Blocked'],\n  ['Review pull requests', 'Li Wei', 'Done'],\n  ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n  ['Refactor auth module', 'David Kim', 'In review'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('');\n\n  const listComments = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const found: string[] = [];\n\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n      hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n        const comment = cellMeta.comment as { value?: string } | undefined;\n\n        if (comment?.value !== undefined) {\n          found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n        }\n      });\n    }\n\n    setOutput(found.length > 0 ? found.join('\\n') : 'No comments found.');\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"list-comments\" onClick={() => listComments()}>\n            List all comments\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Task', 'Assignee', 'Status']}\n        rowHeaders={true}\n        comments={true}\n        cell={[\n          { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n          { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n          { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n        ]}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <output className=\"comments-output\" style={{ whiteSpace: 'pre-wrap' }}>\n        {output}\n      </output>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example6.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Comments · Read all comments programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Update API docs', 'Ana García', 'In progress'],\n  ['Deploy hotfix', 'James Okafor', 'Blocked'],\n  ['Review pull requests', 'Li Wei', 'Done'],\n  ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n  ['Refactor auth module', 'David Kim', 'In review'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('');\n\n  const listComments = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const found: string[] = [];\n\n    // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n    for (let row = 0; row < hot.countRows(); row += 1) {\n      hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n        const comment = cellMeta.comment as { value?: string } | undefined;\n\n        if (comment?.value !== undefined) {\n          found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n        }\n      });\n    }\n\n    setOutput(found.length > 0 ? found.join('\\n') : 'No comments found.');\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"list-comments\" onClick={() => listComments()}>\n            List all comments\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Task', 'Assignee', 'Status']}\n        rowHeaders={true}\n        comments={true}\n        cell={[\n          { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n          { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n          { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n        ]}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <output className=\"comments-output\" style={{ whiteSpace: 'pre-wrap' }}>\n        {output}\n      </output>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example6.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json
index d58ed0141..ab366e3bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example1.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    { row: 2, col: 2, comment: { value: 'More comments' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example1.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json
index ce039a97b..20d64972a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Make a comment read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example2.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Make a comment read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      comment: { value: 'A read-only comment.', readOnly: true },\n    },\n    { row: 1, col: 0, comment: { value: 'You can edit this comment' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example2.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json
index 4fbc4bd10..d44203272 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a comment box's size · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example3.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a comment box's size · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 1, comment: { value: 'Some comment' } },\n    {\n      row: 2,\n      col: 2,\n      comment: {\n        value: 'Comment 200x50 px',\n        style: { width: 200, height: 50 },\n      },\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example3.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json
index 36842fb26..988250b63 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example4.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  contextMenu: true,\n  comments: {\n    displayDelay: 2000,\n  },\n  cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example4.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json
index a06249538..9a7ebe263 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ],\n  colHeaders: ['Product', 'Stock'],\n  rowHeaders: true,\n  comments: true,\n  columns: [\n    {},\n    {\n      type: 'numeric',\n      validator(value: any, callback: (valid: boolean) => void) {\n        callback(Number.isInteger(value) && value >= 0);\n      },\n    },\n  ],\n  // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n  afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n    const column = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const comments = this.getPlugin('comments');\n\n    if (!isValid) {\n      comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n    } else {\n      comments.removeCommentAtCell(row, column);\n    }\n  },\n  // Validate every cell on load so the pre-existing invalid value is flagged right away.\n  afterInit(this: Handsontable) {\n    this.validateCells();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example5.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport Handsontable from 'handsontable/base';\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Wireless mouse', 142],\n    ['USB-C cable', 67],\n    ['Mechanical keyboard', -5],\n    ['Laptop stand', 38],\n    ['HDMI adapter', 210],\n  ],\n  colHeaders: ['Product', 'Stock'],\n  rowHeaders: true,\n  comments: true,\n  columns: [\n    {},\n    {\n      type: 'numeric',\n      validator(value: any, callback: (valid: boolean) => void) {\n        callback(Number.isInteger(value) && value >= 0);\n      },\n    },\n  ],\n  // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n  afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n    const column = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const comments = this.getPlugin('comments');\n\n    if (!isValid) {\n      comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n    } else {\n      comments.removeCommentAtCell(row, column);\n    }\n  },\n  // Validate every cell on load so the pre-existing invalid value is flagged right away.\n  afterInit(this: Handsontable) {\n    this.validateCells();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example5.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json
index d67774491..5cb52a252 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst output = ref('');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n    { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n    { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst listComments = () => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const found: string[] = [];\n\n  // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n  for (let row = 0; row < hot.countRows(); row += 1) {\n    hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n      const comment = cellMeta.comment as { value?: string } | undefined;\n\n      if (comment?.value !== undefined) {\n        found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n      }\n    });\n  }\n\n  output.value = found.length > 0 ? found.join('\\n') : 'No comments found.';\n};\n</script>\n\n<template>\n  <div id=\"example6\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"list-comments\" type=\"button\" @click=\"listComments\">List all comments</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n    <output class=\"comments-output\" style=\"white-space: pre-wrap\">{{ output }}</output>\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example6.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst output = ref('');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update API docs', 'Ana García', 'In progress'],\n    ['Deploy hotfix', 'James Okafor', 'Blocked'],\n    ['Review pull requests', 'Li Wei', 'Done'],\n    ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n    ['Refactor auth module', 'David Kim', 'In review'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  comments: true,\n  cell: [\n    { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n    { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n    { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst listComments = () => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const found: string[] = [];\n\n  // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n  for (let row = 0; row < hot.countRows(); row += 1) {\n    hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n      const comment = cellMeta.comment as { value?: string } | undefined;\n\n      if (comment?.value !== undefined) {\n        found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n      }\n    });\n  }\n\n  output.value = found.length > 0 ? found.join('\\n') : 'No comments found.';\n};\n</script>\n\n<template>\n  <div id=\"example6\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"list-comments\" type=\"button\" @click=\"listComments\">List all comments</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n    <output class=\"comments-output\" style=\"white-space: pre-wrap\">{{ output }}</output>\n  </div>\n</template>"},"docsPath":"guides/cell-features/comments/vue/example6.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json
index 3ad5b7445..9c63a5ae4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-conditional-formatting></example1-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n@Component({\n  selector: 'example1-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `example1-conditional-formatting .handsontable td.company-name {\n    font-weight: 600;\n}\nexample1-conditional-formatting .handsontable td.loss {\n    color: #d81e2c;\n    background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n    background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\nexample1-conditional-formatting .handsontable td.loss::before {\n    content: \"▼ \";\n}\nexample1-conditional-formatting .handsontable td.strong-quarter {\n    color: #157a3d;\n    font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.loss {\n    color: #ff5c70;\n    background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.strong-quarter {\n    color: #22c55e;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      { className: 'company-name' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n    ],\n    cells(row: number, col: number) {\n      const cellProperties: Handsontable.CellMeta = {};\n\n      if (col > 0) {\n        cellProperties.className = '';\n\n        const value = data[row]?.[col];\n\n        if (typeof value === 'number' && value < 0) {\n          cellProperties.className = 'loss';\n        } else if (typeof value === 'number' && value > 10) {\n          cellProperties.className = 'strong-quarter';\n        }\n      }\n\n      return cellProperties;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-conditional-formatting></example1-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n@Component({\n  selector: 'example1-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `example1-conditional-formatting .handsontable td.company-name {\n    font-weight: 600;\n}\nexample1-conditional-formatting .handsontable td.loss {\n    color: #d81e2c;\n    background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n    background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\nexample1-conditional-formatting .handsontable td.loss::before {\n    content: \"▼ \";\n}\nexample1-conditional-formatting .handsontable td.strong-quarter {\n    color: #157a3d;\n    font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.loss {\n    color: #ff5c70;\n    background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.strong-quarter {\n    color: #22c55e;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      { className: 'company-name' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n    ],\n    cells(row: number, col: number) {\n      const cellProperties: Handsontable.CellMeta = {};\n\n      if (col > 0) {\n        cellProperties.className = '';\n\n        const value = data[row]?.[col];\n\n        if (typeof value === 'number' && value < 0) {\n          cellProperties.className = 'loss';\n        } else if (typeof value === 'number' && value > 10) {\n          cellProperties.className = 'strong-quarter';\n        }\n      }\n\n      return cellProperties;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json
index e3a8ad609..e32d7ec0b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-conditional-formatting></example2-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\n@Component({\n  selector: 'example2-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `example2-conditional-formatting .handsontable td.loss-cell {\n    color: #d81e2c;\n    font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example2-conditional-formatting .handsontable td.loss-cell {\n    color: #ff5c70;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      {},\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-conditional-formatting></example2-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\n@Component({\n  selector: 'example2-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `example2-conditional-formatting .handsontable td.loss-cell {\n    color: #d81e2c;\n    font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example2-conditional-formatting .handsontable td.loss-cell {\n    color: #ff5c70;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      {},\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n      { renderer: 'profitRenderer' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json
index 975ad22b7..ad2f5e810 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-conditional-formatting></example3-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\n@Component({\n  selector: 'example3-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      {},\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-conditional-formatting></example3-conditional-formatting>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\n@Component({\n  selector: 'example3-conditional-formatting',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    height: 'auto',\n    columns: [\n      {},\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n      { renderer: 'heatmapRenderer' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json
index be877d8c5..55ef93359 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        { className: 'company-name' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n    ],\n    cells(row, col) {\n        const cellProperties = {};\n        if (col > 0) {\n            cellProperties.className = '';\n            const value = data[row]?.[col];\n            if (typeof value === 'number' && value < 0) {\n                cellProperties.className = 'loss';\n            }\n            else if (typeof value === 'number' && value > 10) {\n                cellProperties.className = 'strong-quarter';\n            }\n        }\n        return cellProperties;\n    },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        { className: 'company-name' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n    ],\n    cells(row, col) {\n        const cellProperties = {};\n        if (col > 0) {\n            cellProperties.className = '';\n            const value = data[row]?.[col];\n            if (typeof value === 'number' && value < 0) {\n                cellProperties.className = 'loss';\n            }\n            else if (typeof value === 'number' && value > 10) {\n                cellProperties.className = 'strong-quarter';\n            }\n        }\n        return cellProperties;\n    },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json
index b2f15588d..60abc4ab4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    { className: 'company-name' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  cells(row, col) {\n    const cellProperties: Handsontable.CellMeta = {};\n\n    if (col > 0) {\n      cellProperties.className = '';\n\n      const value = data[row]?.[col];\n\n      if (typeof value === 'number' && value < 0) {\n        cellProperties.className = 'loss';\n      } else if (typeof value === 'number' && value > 10) {\n        cellProperties.className = 'strong-quarter';\n      }\n    }\n\n    return cellProperties;\n  },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    { className: 'company-name' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  cells(row, col) {\n    const cellProperties: Handsontable.CellMeta = {};\n\n    if (col > 0) {\n      cellProperties.className = '';\n\n      const value = data[row]?.[col];\n\n      if (typeof value === 'number' && value < 0) {\n        cellProperties.className = 'loss';\n      } else if (typeof value === 'number' && value > 10) {\n        cellProperties.className = 'strong-quarter';\n      }\n    }\n\n    return cellProperties;\n  },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json
index c1bb00b7d..48aea6bc2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n    const amount = Number(value);\n    td.classList.remove('loss-cell');\n    if (!Number.isFinite(amount)) {\n        textRenderer(instance, td, row, col, prop, value, cellProperties);\n        return;\n    }\n    const formatted = amount < 0\n        ? `($${Math.abs(amount).toFixed(1)}M)`\n        : `$${amount.toFixed(1)}M`;\n    textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n    if (amount < 0) {\n        td.classList.add('loss-cell');\n    }\n};\nregisterRenderer('profitRenderer', profitRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        {},\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n    ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n    const amount = Number(value);\n    td.classList.remove('loss-cell');\n    if (!Number.isFinite(amount)) {\n        textRenderer(instance, td, row, col, prop, value, cellProperties);\n        return;\n    }\n    const formatted = amount < 0\n        ? `($${Math.abs(amount).toFixed(1)}M)`\n        : `$${amount.toFixed(1)}M`;\n    textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n    if (amount < 0) {\n        td.classList.add('loss-cell');\n    }\n};\nregisterRenderer('profitRenderer', profitRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        {},\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n    ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json
index 775f82316..0b8d01006 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n  ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n  ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json
index 98afeb440..ad9361e24 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n    const amount = Number(value);\n    if (Number.isFinite(amount)) {\n        const values = instance.getData()\n            .flatMap((rowData) => rowData.slice(1))\n            .map(Number)\n            .filter((cellValue) => Number.isFinite(cellValue));\n        const min = Math.min(...values);\n        const max = Math.max(...values);\n        const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n        const hue = Math.round(ratio * 120);\n        td.style.background = `hsl(${hue}, 75%, 85%)`;\n        td.style.color = '#1b1b1b';\n    }\n};\nregisterRenderer('heatmapRenderer', heatmapRenderer);\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        {},\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n    ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n    ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n    ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n    ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n    ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n    ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n    const amount = Number(value);\n    if (Number.isFinite(amount)) {\n        const values = instance.getData()\n            .flatMap((rowData) => rowData.slice(1))\n            .map(Number)\n            .filter((cellValue) => Number.isFinite(cellValue));\n        const min = Math.min(...values);\n        const max = Math.max(...values);\n        const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n        const hue = Math.round(ratio * 120);\n        td.style.background = `hsl(${hue}, 75%, 85%)`;\n        td.style.color = '#1b1b1b';\n    }\n};\nregisterRenderer('heatmapRenderer', heatmapRenderer);\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n    licenseKey: 'non-commercial-and-evaluation',\n    height: 'auto',\n    columns: [\n        {},\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n    ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json
index bcfe27798..db4998959 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n  ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n  ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json
index 37d7e3997..0d603d824 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        { className: 'company-name' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n      ]}\n      cells={function (row, col) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (col > 0) {\n          cellProperties.className = '';\n\n          const value = data[row]?.[col];\n\n          if (typeof value === 'number' && value < 0) {\n            cellProperties.className = 'loss';\n          } else if (typeof value === 'number' && value > 10) {\n            cellProperties.className = 'strong-quarter';\n          }\n        }\n\n        return cellProperties;\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example1.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        { className: 'company-name' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n      ]}\n      cells={function (row, col) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (col > 0) {\n          cellProperties.className = '';\n\n          const value = data[row]?.[col];\n\n          if (typeof value === 'number' && value < 0) {\n            cellProperties.className = 'loss';\n          } else if (typeof value === 'number' && value > 10) {\n            cellProperties.className = 'strong-quarter';\n          }\n        }\n\n        return cellProperties;\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example1.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json
index 54ebf933c..194974162 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        {},\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example2.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        {},\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n        { renderer: 'profitRenderer' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example2.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json
index 5891c886d..960985ff9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        {},\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/conditional-formatting/react/example3.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Company', 'Q1', 'Q2', 'Q3', 'Q4']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      columns={[\n        {},\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n        { renderer: 'heatmapRenderer' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/conditional-formatting/react/example3.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json
index 9d2f203fd..7222f208a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    { className: 'company-name' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  cells(row, col) {\n    const cellProperties: Handsontable.CellMeta = {};\n    const value = data[row]?.[col];\n\n    if (col > 0) {\n      cellProperties.className = '';\n\n      if (typeof value === 'number' && value < 0) {\n        cellProperties.className = 'loss';\n      } else if (typeof value === 'number' && value > 10) {\n        cellProperties.className = 'strong-quarter';\n      }\n    }\n\n    return cellProperties;\n  },\n};\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}\n</style>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example1.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    { className: 'company-name' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  cells(row, col) {\n    const cellProperties: Handsontable.CellMeta = {};\n    const value = data[row]?.[col];\n\n    if (col > 0) {\n      cellProperties.className = '';\n\n      if (typeof value === 'number' && value < 0) {\n        cellProperties.className = 'loss';\n      } else if (typeof value === 'number' && value > 10) {\n        cellProperties.className = 'strong-quarter';\n      }\n    }\n\n    return cellProperties;\n  },\n};\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example1 .handsontable td.company-name {\n  font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n  color: #d81e2c;\n  background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n  background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n  content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n  color: #157a3d;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n  color: #ff5c70;\n  background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n  color: #22c55e;\n}\n</style>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example1.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json
index 1aa0ad813..6464a2b61 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n  ],\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}\n</style>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example2.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  const amount = Number(value);\n\n  td.classList.remove('loss-cell');\n\n  if (!Number.isFinite(amount)) {\n    textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n    return;\n  }\n\n  const formatted = amount < 0\n    ? `($${Math.abs(amount).toFixed(1)}M)`\n    : `$${amount.toFixed(1)}M`;\n\n  textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n  if (amount < 0) {\n    td.classList.add('loss-cell');\n  }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n    { renderer: 'profitRenderer' },\n  ],\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example2 .handsontable td.loss-cell {\n  color: #d81e2c;\n  font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n  color: #ff5c70;\n}\n</style>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example2.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json
index ffba28efd..0e2df0e52 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n  ],\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example3.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n  ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n  ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n  ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n  ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n  ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const amount = Number(value);\n\n  if (Number.isFinite(amount)) {\n    const values = instance.getData()\n      .flatMap((rowData) => rowData.slice(1))\n      .map(Number)\n      .filter((cellValue) => Number.isFinite(cellValue));\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n    const hue = Math.round(ratio * 120);\n\n    td.style.background = `hsl(${hue}, 75%, 85%)`;\n    td.style.color = '#1b1b1b';\n  }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  columns: [\n    {},\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n    { renderer: 'heatmapRenderer' },\n  ],\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/conditional-formatting/vue/example3.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json
index 02dbd9585..f15ef858a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-formatting-cells></example1-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `hot-table td.custom-cell {\n    color: #fff !important;\n    background-color: #254ac6 !important;\n}\nhot-table .custom-table thead th:nth-child(even),\nhot-table .custom-table tbody tr:nth-child(odd) th {\n    color: #fff !important;\n    background-color: #254ac6 !important;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    className: 'custom-table',\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        className: 'custom-cell',\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-formatting-cells></example1-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  styles: `hot-table td.custom-cell {\n    color: #fff !important;\n    background-color: #254ac6 !important;\n}\nhot-table .custom-table thead th:nth-child(even),\nhot-table .custom-table tbody tr:nth-child(odd) th {\n    color: #fff !important;\n    background-color: #254ac6 !important;\n}\n`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    className: 'custom-table',\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        className: 'custom-cell',\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json
index d213261e2..cd5cf7eac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-formatting-cells></example2-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n  textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n});\n\n@Component({\n  selector: 'example2-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        renderer: 'customStylesRenderer',\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-formatting-cells></example2-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n  textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n});\n\n@Component({\n  selector: 'example2-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    cell: [\n      {\n        row: 0,\n        col: 0,\n        renderer: 'customStylesRenderer',\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json
index 6801b8688..afd77a9e5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-formatting-cells></example3-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n  textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n});\n\n@Component({\n  selector: 'example3-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    customBorders: [\n      {\n        range: {\n          from: {\n            row: 1,\n            col: 1,\n          },\n          to: {\n            row: 3,\n            col: 4,\n          },\n        },\n        top: {\n          width: 2,\n          color: '#5292F7',\n          style: 'dotted',\n        },\n        bottom: {\n          width: 2,\n          color: 'red',\n        },\n        start: {\n          width: 2,\n          color: 'orange',\n          style: 'dashed',\n        },\n        end: {\n          width: 2,\n          color: 'magenta',\n        },\n      },\n      {\n        row: 2,\n        col: 2,\n        start: {\n          width: 2,\n          color: 'red',\n        },\n        end: {\n          width: 1,\n          color: 'green',\n        },\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-formatting-cells></example3-formatting-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n  textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n});\n\n@Component({\n  selector: 'example3-formatting-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Laptop Pro 15',    'Electronics', 149900,  42],\n    ['SKU-0093', 'Wireless Mouse',   'Peripherals',   2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals',   5499,   0],\n    ['SKU-3305', 'Mech. Keyboard',   'Peripherals',   8999,  67],\n    ['SKU-9140', '4K Monitor 27\"',   'Electronics',  34999,  15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    customBorders: [\n      {\n        range: {\n          from: {\n            row: 1,\n            col: 1,\n          },\n          to: {\n            row: 3,\n            col: 4,\n          },\n        },\n        top: {\n          width: 2,\n          color: '#5292F7',\n          style: 'dotted',\n        },\n        bottom: {\n          width: 2,\n          color: 'red',\n        },\n        start: {\n          width: 2,\n          color: 'orange',\n          style: 'dashed',\n        },\n        end: {\n          width: 2,\n          color: 'magenta',\n        },\n      },\n      {\n        row: 2,\n        col: 2,\n        start: {\n          width: 2,\n          color: 'red',\n        },\n        end: {\n          width: 1,\n          color: 'green',\n        },\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/formatting-cells/angular/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json
index 7e1cdd0e8..ae0634c3a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    className: 'custom-table',\n    cell: [\n        {\n            row: 0,\n            col: 0,\n            className: 'custom-cell',\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    className: 'custom-table',\n    cell: [\n        {\n            row: 0,\n            col: 0,\n            className: 'custom-cell',\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json
index 6ce973b05..7152704fb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  className: 'custom-table',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      className: 'custom-cell',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  className: 'custom-table',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      className: 'custom-cell',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json
index 894585a27..c3c84ad84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n// register Handsontable's modules\nregisterAllModules();\nconst customStylesRenderer = (hotInstance, TD, ...rest) => {\n    textRenderer(hotInstance, TD, ...rest);\n    TD.style.fontWeight = 'bold';\n    TD.style.color = 'green';\n    TD.style.background = '#d7f1e1';\n};\nregisterRenderer('customStylesRenderer', customStylesRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    cell: [\n        {\n            row: 0,\n            col: 0,\n            renderer: 'customStylesRenderer',\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n// register Handsontable's modules\nregisterAllModules();\nconst customStylesRenderer = (hotInstance, TD, ...rest) => {\n    textRenderer(hotInstance, TD, ...rest);\n    TD.style.fontWeight = 'bold';\n    TD.style.color = 'green';\n    TD.style.background = '#d7f1e1';\n};\nregisterRenderer('customStylesRenderer', customStylesRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    stretchH: 'all',\n    cell: [\n        {\n            row: 0,\n            col: 0,\n            renderer: 'customStylesRenderer',\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json
index 4815aa275..7c8bf007d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n  textRenderer(hotInstance, TD, ...rest);\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      renderer: 'customStylesRenderer',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n  textRenderer(hotInstance, TD, ...rest);\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      renderer: 'customStylesRenderer',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json
index 686b6045d..60d8ea781 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    customBorders: [\n        {\n            range: {\n                from: {\n                    row: 1,\n                    col: 1,\n                },\n                to: {\n                    row: 3,\n                    col: 4,\n                },\n            },\n            top: {\n                width: 2,\n                color: '#5292F7',\n                style: 'dotted',\n            },\n            bottom: {\n                width: 2,\n                color: 'red',\n            },\n            start: {\n                width: 2,\n                color: 'orange',\n                style: 'dashed',\n            },\n            end: {\n                width: 2,\n                color: 'magenta',\n            },\n        },\n        {\n            row: 2,\n            col: 2,\n            start: {\n                width: 2,\n                color: 'red',\n            },\n            end: {\n                width: 1,\n                color: 'green',\n            },\n        },\n    ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n        ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n    ],\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    customBorders: [\n        {\n            range: {\n                from: {\n                    row: 1,\n                    col: 1,\n                },\n                to: {\n                    row: 3,\n                    col: 4,\n                },\n            },\n            top: {\n                width: 2,\n                color: '#5292F7',\n                style: 'dotted',\n            },\n            bottom: {\n                width: 2,\n                color: 'red',\n            },\n            start: {\n                width: 2,\n                color: 'orange',\n                style: 'dashed',\n            },\n            end: {\n                width: 2,\n                color: 'magenta',\n            },\n        },\n        {\n            row: 2,\n            col: 2,\n            start: {\n                width: 2,\n                color: 'red',\n            },\n            end: {\n                width: 1,\n                color: 'green',\n            },\n        },\n    ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json
index 0576bfdb8..fb3a6eaab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  customBorders: [\n    {\n      range: {\n        from: {\n          row: 1,\n          col: 1,\n        },\n        to: {\n          row: 3,\n          col: 4,\n        },\n      },\n      top: {\n        width: 2,\n        color: '#5292F7',\n        style: 'dotted',\n      },\n      bottom: {\n        width: 2,\n        color: 'red',\n      },\n      start: {\n        width: 2,\n        color: 'orange',\n        style: 'dashed',\n      },\n      end: {\n        width: 2,\n        color: 'magenta',\n      },\n    },\n    {\n      row: 2,\n      col: 2,\n      start: {\n        width: 2,\n        color: 'red',\n      },\n      end: {\n        width: 1,\n        color: 'green',\n      },\n    },\n  ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  customBorders: [\n    {\n      range: {\n        from: {\n          row: 1,\n          col: 1,\n        },\n        to: {\n          row: 3,\n          col: 4,\n        },\n      },\n      top: {\n        width: 2,\n        color: '#5292F7',\n        style: 'dotted',\n      },\n      bottom: {\n        width: 2,\n        color: 'red',\n      },\n      start: {\n        width: 2,\n        color: 'orange',\n        style: 'dashed',\n      },\n      end: {\n        width: 2,\n        color: 'magenta',\n      },\n    },\n    {\n      row: 2,\n      col: 2,\n      start: {\n        width: 2,\n        color: 'red',\n      },\n      end: {\n        width: 1,\n        color: 'green',\n      },\n    },\n  ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json
index f9726a700..b411420c2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      className=\"custom-table\"\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          className: 'custom-cell',\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/react/example1.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      className=\"custom-table\"\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          className: 'custom-cell',\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"td.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/react/example1.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json
index 2d7fbe5fc..e0e7a640d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {\n    textRenderer(hotInstance, TD, ...rest);\n\n    TD.style.fontWeight = 'bold';\n    TD.style.color = 'green';\n    TD.style.background = '#d7f1e1';\n  });\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          renderer: 'customStylesRenderer',\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example2.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {\n    textRenderer(hotInstance, TD, ...rest);\n\n    TD.style.fontWeight = 'bold';\n    TD.style.color = 'green';\n    TD.style.background = '#d7f1e1';\n  });\n\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      cell={[\n        {\n          row: 0,\n          col: 0,\n          renderer: 'customStylesRenderer',\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example2.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json
index fac8a896d..54d766a63 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      customBorders={[\n        {\n          range: {\n            from: {\n              row: 1,\n              col: 1,\n            },\n            to: {\n              row: 3,\n              col: 4,\n            },\n          },\n          top: {\n            width: 2,\n            color: '#5292F7',\n            style: 'dotted',\n          },\n          bottom: {\n            width: 2,\n            color: 'red',\n          },\n          start: {\n            width: 2,\n            color: 'orange',\n            style: 'dashed',\n          },\n          end: {\n            width: 2,\n            color: 'magenta',\n          },\n        },\n        {\n          row: 2,\n          col: 2,\n          start: {\n            width: 2,\n            color: 'red',\n          },\n          end: {\n            width: 1,\n            color: 'green',\n          },\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example3.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n  ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n  ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n  ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n  ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      customBorders={[\n        {\n          range: {\n            from: {\n              row: 1,\n              col: 1,\n            },\n            to: {\n              row: 3,\n              col: 4,\n            },\n          },\n          top: {\n            width: 2,\n            color: '#5292F7',\n            style: 'dotted',\n          },\n          bottom: {\n            width: 2,\n            color: 'red',\n          },\n          start: {\n            width: 2,\n            color: 'orange',\n            style: 'dashed',\n          },\n          end: {\n            width: 2,\n            color: 'magenta',\n          },\n        },\n        {\n          row: 2,\n          col: 2,\n          start: {\n            width: 2,\n            color: 'red',\n          },\n          end: {\n            width: 1,\n            color: 'green',\n          },\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example3.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json
index acb6fd4cc..8c5b6b39a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  className: 'custom-table',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      className: 'custom-cell',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\ntd.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n</style>"},"docsPath":"guides/cell-features/formatting-cells/vue/example1.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  className: 'custom-table',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      className: 'custom-cell',\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\ntd.custom-cell {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n  color: #fff !important;\n  background-color: #254ac6 !important;\n}\n</style>"},"docsPath":"guides/cell-features/formatting-cells/vue/example1.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json
index 87522413a..777740aff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n  textRenderer(hotInstance, TD, ...rest);\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      renderer: customStylesRenderer,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/formatting-cells/vue/example2.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n  textRenderer(hotInstance, TD, ...rest);\n  TD.style.fontWeight = 'bold';\n  TD.style.color = 'green';\n  TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  stretchH: 'all',\n  cell: [\n    {\n      row: 0,\n      col: 0,\n      renderer: customStylesRenderer,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/formatting-cells/vue/example2.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json
index b9d598711..74ad4a711 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  customBorders: [\n    {\n      range: {\n        from: {\n          row: 1,\n          col: 1,\n        },\n        to: {\n          row: 3,\n          col: 4,\n        },\n      },\n      top: {\n        width: 2,\n        color: '#5292F7',\n        style: 'dotted',\n      },\n      bottom: {\n        width: 2,\n        color: 'red',\n      },\n      start: {\n        width: 2,\n        color: 'orange',\n        style: 'dashed',\n      },\n      end: {\n        width: 2,\n        color: 'magenta',\n      },\n    },\n    {\n      row: 2,\n      col: 2,\n      start: {\n        width: 2,\n        color: 'red',\n      },\n      end: {\n        width: 1,\n        color: 'green',\n      },\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/formatting-cells/vue/example3.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n    ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n    ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n    ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n    ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  customBorders: [\n    {\n      range: {\n        from: {\n          row: 1,\n          col: 1,\n        },\n        to: {\n          row: 3,\n          col: 4,\n        },\n      },\n      top: {\n        width: 2,\n        color: '#5292F7',\n        style: 'dotted',\n      },\n      bottom: {\n        width: 2,\n        color: 'red',\n      },\n      start: {\n        width: 2,\n        color: 'orange',\n        style: 'dashed',\n      },\n      end: {\n        width: 2,\n        color: 'magenta',\n      },\n    },\n    {\n      row: 2,\n      col: 2,\n      start: {\n        width: 2,\n        color: 'red',\n      },\n      end: {\n        width: 1,\n        color: 'green',\n      },\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/formatting-cells/vue/example3.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json
index d61696704..21eda9b96 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-merge-cells></example1-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    autoColumnSize: {\n      allowSampleDuplicates: true,\n      samplingRatio: 100,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: [\n      { row: 1, col: 1, rowspan: 3, colspan: 3 },\n      { row: 3, col: 4, rowspan: 2, colspan: 2 },\n      { row: 5, col: 6, rowspan: 3, colspan: 3 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-merge-cells></example1-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    autoColumnSize: {\n      allowSampleDuplicates: true,\n      samplingRatio: 100,\n    },\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: [\n      { row: 1, col: 1, rowspan: 3, colspan: 3 },\n      { row: 3, col: 4, rowspan: 2, colspan: 2 },\n      { row: 5, col: 6, rowspan: 3, colspan: 3 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json
index e8f4db75a..366430a60 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-merge-cells></example2-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = new Array(50) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(500) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: {\n      virtualized: true,\n      cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n    },\n    viewportColumnRenderingOffset: 15,\n    viewportColumnRenderingThreshold: 5,\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-merge-cells></example2-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = new Array(50) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(500) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: {\n      virtualized: true,\n      cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n    },\n    viewportColumnRenderingOffset: 15,\n    viewportColumnRenderingThreshold: 5,\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json
index 7b70e538d..edbceab50 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-merge-cells></example3-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { CellRange } from 'handsontable/base';\n\n@Component({\n  selector: 'example3-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <output class=\"console\" id=\"example3-output\">{{\n      output ||\n        'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n    }}</output>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  output = '';\n\n  readonly data = [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeMergeCells: (cellRange: CellRange) => {\n      this.logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterMergeCells: (\n      cellRange: CellRange,\n      mergeParent: { row: number; col: number; rowspan: number; colspan: number }\n    ) => {\n      this.logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n    },\n    beforeUnmergeCells: (cellRange: CellRange) => {\n      this.logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterUnmergeCells: (cellRange: CellRange) => {\n      this.logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n  };\n\n  private logEvent(message: string): void {\n    this.output = `${message}\\n${this.output}`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-merge-cells></example3-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { CellRange } from 'handsontable/base';\n\n@Component({\n  selector: 'example3-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <output class=\"console\" id=\"example3-output\">{{\n      output ||\n        'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n    }}</output>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  output = '';\n\n  readonly data = [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeMergeCells: (cellRange: CellRange) => {\n      this.logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterMergeCells: (\n      cellRange: CellRange,\n      mergeParent: { row: number; col: number; rowspan: number; colspan: number }\n    ) => {\n      this.logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n    },\n    beforeUnmergeCells: (cellRange: CellRange) => {\n      this.logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterUnmergeCells: (cellRange: CellRange) => {\n      this.logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n  };\n\n  private logEvent(message: string): void {\n    this.output = `${message}\\n${this.output}`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json
index 0ca3079e6..22a3b1cfc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-merge-cells></example4-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"example4-merge\" class=\"button button--primary\" (click)=\"mergeNoteRow()\">\n          Merge the note row\n        </button>\n        <button id=\"example4-unmerge\" class=\"button button--primary\" (click)=\"unmergeNoteRow()\">\n          Unmerge the note row\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  mergeNoteRow(): void {\n    this.hotTable?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n  }\n\n  unmergeNoteRow(): void {\n    this.hotTable?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-merge-cells></example4-merge-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-merge-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"example4-merge\" class=\"button button--primary\" (click)=\"mergeNoteRow()\">\n          Merge the note row\n        </button>\n        <button id=\"example4-unmerge\" class=\"button button--primary\" (click)=\"unmergeNoteRow()\">\n          Unmerge the note row\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  mergeNoteRow(): void {\n    this.hotTable?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n  }\n\n  unmergeNoteRow(): void {\n    this.hotTable?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json
index ecedc8d39..5a827d170 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json
index 1ea72ebc3..380f5e66a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json
index 6b490fd84..d0353659d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json
index 684cf8e86..3c4a4ce7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json
index 8929fbe53..a2536c42b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"example3-output\">Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#example3-output');\nlet loggedText = '';\nconst logEvent = (message) => {\n    loggedText = `${message}\\n${loggedText}`;\n    output.innerText = loggedText;\n};\nnew Handsontable(container, {\n    data: [\n        ['North America', 420000, 465000, 501000],\n        ['Europe', 388000, 402000, 411000],\n        ['APAC', 275000, 298000, 312000],\n        ['Latin America', 142000, 151000, 158000],\n        ['Middle East', 96000, 101000, 108000],\n    ],\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeMergeCells(cellRange) {\n        logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterMergeCells(cellRange, mergeParent) {\n        logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n    },\n    beforeUnmergeCells(cellRange) {\n        logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterUnmergeCells(cellRange) {\n        logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"example3-output\">Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#example3-output');\nlet loggedText = '';\nconst logEvent = (message) => {\n    loggedText = `${message}\\n${loggedText}`;\n    output.innerText = loggedText;\n};\nnew Handsontable(container, {\n    data: [\n        ['North America', 420000, 465000, 501000],\n        ['Europe', 388000, 402000, 411000],\n        ['APAC', 275000, 298000, 312000],\n        ['Latin America', 142000, 151000, 158000],\n        ['Middle East', 96000, 101000, 108000],\n    ],\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeMergeCells(cellRange) {\n        logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterMergeCells(cellRange, mergeParent) {\n        logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n    },\n    beforeUnmergeCells(cellRange) {\n        logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    afterUnmergeCells(cellRange) {\n        logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json
index fbe047d37..785675ace 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"example3-output\">Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#example3-output') as HTMLElement;\n\nlet loggedText = '';\n\nconst logEvent = (message: string) => {\n  loggedText = `${message}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nnew Handsontable(container, {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeMergeCells(cellRange) {\n    logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterMergeCells(cellRange, mergeParent) {\n    logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n  },\n  beforeUnmergeCells(cellRange) {\n    logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterUnmergeCells(cellRange) {\n    logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"example3-output\">Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.</output>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#example3-output') as HTMLElement;\n\nlet loggedText = '';\n\nconst logEvent = (message: string) => {\n  loggedText = `${message}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nnew Handsontable(container, {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeMergeCells(cellRange) {\n    logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterMergeCells(cellRange, mergeParent) {\n    logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n  },\n  beforeUnmergeCells(cellRange) {\n    logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterUnmergeCells(cellRange) {\n    logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json
index 6d4e83813..cdf4e57c8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"example4-merge\" class=\"button button--primary\">Merge the note row</button>\n      <button id=\"example4-unmerge\" class=\"button button--primary\">Unmerge the note row</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst mergeButton = document.querySelector('#example4-merge');\nconst unmergeButton = document.querySelector('#example4-unmerge');\nconst hot = new Handsontable(container, {\n    data: [\n        ['North America', 420000, 465000, 501000],\n        ['Europe', 388000, 402000, 411000],\n        ['APAC', 275000, 298000, 312000],\n        ['Latin America', 142000, 151000, 158000],\n        ['Middle East', 96000, 101000, 108000],\n        ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n    ],\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nmergeButton.addEventListener('click', () => {\n    hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\nunmergeButton.addEventListener('click', () => {\n    hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"example4-merge\" class=\"button button--primary\">Merge the note row</button>\n      <button id=\"example4-unmerge\" class=\"button button--primary\">Unmerge the note row</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst mergeButton = document.querySelector('#example4-merge');\nconst unmergeButton = document.querySelector('#example4-unmerge');\nconst hot = new Handsontable(container, {\n    data: [\n        ['North America', 420000, 465000, 501000],\n        ['Europe', 388000, 402000, 411000],\n        ['APAC', 275000, 298000, 312000],\n        ['Latin America', 142000, 151000, 158000],\n        ['Middle East', 96000, 101000, 108000],\n        ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n    ],\n    colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    mergeCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nmergeButton.addEventListener('click', () => {\n    hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\nunmergeButton.addEventListener('click', () => {\n    hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json
index 2cfd6fd02..7ef60f39d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"example4-merge\" class=\"button button--primary\">Merge the note row</button>\n      <button id=\"example4-unmerge\" class=\"button button--primary\">Unmerge the note row</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst mergeButton = document.querySelector('#example4-merge')!;\nconst unmergeButton = document.querySelector('#example4-unmerge')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nmergeButton.addEventListener('click', () => {\n  hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\n\nunmergeButton.addEventListener('click', () => {\n  hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"example4-merge\" class=\"button button--primary\">Merge the note row</button>\n      <button id=\"example4-unmerge\" class=\"button button--primary\">Unmerge the note row</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst mergeButton = document.querySelector('#example4-merge')!;\nconst unmergeButton = document.querySelector('#example4-unmerge')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nmergeButton.addEventListener('click', () => {\n  hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\n\nunmergeButton.addEventListener('click', () => {\n  hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json
index e9f5b010e..9ec011383 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Merge cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height={320}\n      autoColumnSize={{\n        allowSampleDuplicates: true,\n        samplingRatio: 100,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      mergeCells={[\n        { row: 1, col: 1, rowspan: 3, colspan: 3 },\n        { row: 3, col: 4, rowspan: 2, colspan: 2 },\n        { row: 5, col: 6, rowspan: 3, colspan: 3 },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example1.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Merge cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height={320}\n      autoColumnSize={{\n        allowSampleDuplicates: true,\n        samplingRatio: 100,\n      }}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      mergeCells={[\n        { row: 1, col: 1, rowspan: 3, colspan: 3 },\n        { row: 3, col: 4, rowspan: 2, colspan: 2 },\n        { row: 5, col: 6, rowspan: 3, colspan: 3 },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example1.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json
index 980a4fb61..5bb0afb8a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height={320}\n      colWidths={100}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      mergeCells={{\n        virtualized: true,\n        cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n      }}\n      viewportColumnRenderingOffset={15}\n      viewportColumnRenderingThreshold={5}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example2.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(500) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height={320}\n      colWidths={100}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      mergeCells={{\n        virtualized: true,\n        cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n      }}\n      viewportColumnRenderingOffset={15}\n      viewportColumnRenderingThreshold={5}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example2.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json
index 8824e79c9..e0a5304e3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 420000, 465000, 501000],\n  ['Europe', 388000, 402000, 411000],\n  ['APAC', 275000, 298000, 312000],\n  ['Latin America', 142000, 151000, 158000],\n  ['Middle East', 96000, 101000, 108000],\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('');\n\n  const logEvent = (message: string) => {\n    setOutput((previousOutput) => `${message}\\n${previousOutput}`);\n  };\n\n  return (\n    <>\n      <output className=\"console\" id=\"example3-output\">\n        {output ||\n          'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'}\n      </output>\n      <HotTable\n        data={data}\n        colHeaders={['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025']}\n        rowHeaders={true}\n        height=\"auto\"\n        contextMenu={true}\n        mergeCells={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        beforeMergeCells={(cellRange) => {\n          logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        afterMergeCells={(cellRange, mergeParent) => {\n          logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n        }}\n        beforeUnmergeCells={(cellRange) => {\n          logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        afterUnmergeCells={(cellRange) => {\n          logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example3.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 420000, 465000, 501000],\n  ['Europe', 388000, 402000, 411000],\n  ['APAC', 275000, 298000, 312000],\n  ['Latin America', 142000, 151000, 158000],\n  ['Middle East', 96000, 101000, 108000],\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('');\n\n  const logEvent = (message: string) => {\n    setOutput((previousOutput) => `${message}\\n${previousOutput}`);\n  };\n\n  return (\n    <>\n      <output className=\"console\" id=\"example3-output\">\n        {output ||\n          'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'}\n      </output>\n      <HotTable\n        data={data}\n        colHeaders={['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025']}\n        rowHeaders={true}\n        height=\"auto\"\n        contextMenu={true}\n        mergeCells={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        beforeMergeCells={(cellRange) => {\n          logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        afterMergeCells={(cellRange, mergeParent) => {\n          logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n        }}\n        beforeUnmergeCells={(cellRange) => {\n          logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        afterUnmergeCells={(cellRange) => {\n          logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example3.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json
index e3537ae24..a082abc71 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 420000, 465000, 501000],\n  ['Europe', 388000, 402000, 411000],\n  ['APAC', 275000, 298000, 312000],\n  ['Latin America', 142000, 151000, 158000],\n  ['Middle East', 96000, 101000, 108000],\n  ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const mergeNoteRow = () => {\n    hotRef.current?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n  };\n\n  const unmergeNoteRow = () => {\n    hotRef.current?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"example4-merge\" className=\"button button--primary\" onClick={mergeNoteRow}>\n            Merge the note row\n          </button>\n          <button id=\"example4-unmerge\" className=\"button button--primary\" onClick={unmergeNoteRow}>\n            Unmerge the note row\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025']}\n        rowHeaders={true}\n        height=\"auto\"\n        contextMenu={true}\n        mergeCells={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example4.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 420000, 465000, 501000],\n  ['Europe', 388000, 402000, 411000],\n  ['APAC', 275000, 298000, 312000],\n  ['Latin America', 142000, 151000, 158000],\n  ['Middle East', 96000, 101000, 108000],\n  ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const mergeNoteRow = () => {\n    hotRef.current?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n  };\n\n  const unmergeNoteRow = () => {\n    hotRef.current?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"example4-merge\" className=\"button button--primary\" onClick={mergeNoteRow}>\n            Merge the note row\n          </button>\n          <button id=\"example4-unmerge\" className=\"button button--primary\" onClick={unmergeNoteRow}>\n            Unmerge the note row\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025']}\n        rowHeaders={true}\n        height=\"auto\"\n        contextMenu={true}\n        mergeCells={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example4.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json
index 9072d88fa..0b300ac77 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(50)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example1.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(50)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 320,\n  autoColumnSize: {\n    allowSampleDuplicates: true,\n    samplingRatio: 100,\n  },\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    { row: 5, col: 6, rowspan: 3, colspan: 3 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example1.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json
index 46b7d6d27..4688e97ac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(50)\n  .fill(null)\n  .map((_, row) =>\n    new Array(500)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example2.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(50)\n  .fill(null)\n  .map((_, row) =>\n    new Array(500)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 320,\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  mergeCells: {\n    virtualized: true,\n    cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n  },\n  viewportColumnRenderingOffset: 15,\n  viewportColumnRenderingThreshold: 5,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example2.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json
index c9e47bb52..af70d4b19 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst output = ref('');\n\nconst logEvent = (message: string) => {\n  output.value = `${message}\\n${output.value}`;\n};\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeMergeCells: (cellRange) => {\n    logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterMergeCells: (cellRange, mergeParent) => {\n    logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n  },\n  beforeUnmergeCells: (cellRange) => {\n    logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterUnmergeCells: (cellRange) => {\n    logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <output class=\"console\" id=\"example3-output\">{{\n      output ||\n        'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n    }}</output>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example3.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst output = ref('');\n\nconst logEvent = (message: string) => {\n  output.value = `${message}\\n${output.value}`;\n};\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeMergeCells: (cellRange) => {\n    logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterMergeCells: (cellRange, mergeParent) => {\n    logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n  },\n  beforeUnmergeCells: (cellRange) => {\n    logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n  afterUnmergeCells: (cellRange) => {\n    logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n  },\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <output class=\"console\" id=\"example3-output\">{{\n      output ||\n        'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n    }}</output>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example3.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json
index 499bb0099..2452d6904 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nfunction mergeNoteRow() {\n  hotRef.value?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n}\n\nfunction unmergeNoteRow() {\n  hotRef.value?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"example4-merge\" class=\"button button--primary\" @click=\"mergeNoteRow\">\n          Merge the note row\n        </button>\n        <button id=\"example4-unmerge\" class=\"button button--primary\" @click=\"unmergeNoteRow\">\n          Unmerge the note row\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example4.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['North America', 420000, 465000, 501000],\n    ['Europe', 388000, 402000, 411000],\n    ['APAC', 275000, 298000, 312000],\n    ['Latin America', 142000, 151000, 158000],\n    ['Middle East', 96000, 101000, 108000],\n    ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n  ],\n  colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  mergeCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nfunction mergeNoteRow() {\n  hotRef.value?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n}\n\nfunction unmergeNoteRow() {\n  hotRef.value?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"example4-merge\" class=\"button button--primary\" @click=\"mergeNoteRow\">\n          Merge the note row\n        </button>\n        <button id=\"example4-unmerge\" class=\"button button--primary\" @click=\"unmergeNoteRow\">\n          Unmerge the note row\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/merge-cells/vue/example4.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__angular__example1.ts.json
index e96cb76f1..5b695480c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Move cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-move-cells></example1-move-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-move-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    moveCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit(): void {\n    // Pre-select an interior range so the move border is immediately discoverable.\n    this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/move-cells/angular/example1.ts","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Move cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-move-cells></example1-move-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-move-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    moveCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit(): void {\n    // Pre-select an interior range so the move border is immediately discoverable.\n    this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/move-cells/angular/example1.ts","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.js.json
index 87cd8c72b..cfcd5866b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Move cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 12],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 8],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 5],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 3],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 7],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 2],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 10],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 6],\n    ],\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    moveCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Pre-select an interior range so the move border is immediately discoverable.\nhot.selectCell(1, 1, 3, 3);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/move-cells/javascript/example1.js","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Move cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 12],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 8],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 5],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 3],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 7],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 2],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 10],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 6],\n    ],\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    moveCells: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Pre-select an interior range so the move border is immediately discoverable.\nhot.selectCell(1, 1, 3, 3);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/move-cells/javascript/example1.js","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.ts.json
index d8e28c60f..f06a92736 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Move cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  moveCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Pre-select an interior range so the move border is immediately discoverable.\nhot.selectCell(1, 1, 3, 3);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/move-cells/javascript/example1.ts","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Move cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  moveCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Pre-select an interior range so the move border is immediately discoverable.\nhot.selectCell(1, 1, 3, 3);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/move-cells/javascript/example1.ts","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__react__example1.tsx.json
index 4bc087f81..0184e9dce 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Move cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n  ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n  ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n  ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n  ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n  ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n  ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n  ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  // Pre-select an interior range so the move border is immediately discoverable.\n  useEffect(() => {\n    hotRef.current?.hotInstance?.selectCell(1, 1, 3, 3);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure']}\n      rowHeaders={true}\n      width=\"auto\"\n      height=\"auto\"\n      moveCells={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/move-cells/react/example1.tsx","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Move cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n  ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n  ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n  ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n  ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n  ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n  ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n  ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  // Pre-select an interior range so the move border is immediately discoverable.\n  useEffect(() => {\n    hotRef.current?.hotInstance?.selectCell(1, 1, 3, 3);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure']}\n      rowHeaders={true}\n      width=\"auto\"\n      height=\"auto\"\n      moveCells={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/move-cells/react/example1.tsx","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__vue__example1.vue.json
index 28c75e48f..bea10fb5b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__move-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Move cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  moveCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nonMounted(() => {\n  // Pre-select an interior range so the move border is immediately discoverable.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 3, 3);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/move-cells/vue/example1.vue","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Move cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  moveCells: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nonMounted(() => {\n  // Pre-select an interior range so the move border is immediately discoverable.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 3, 3);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/move-cells/vue/example1.vue","breadcrumb":["Cell Features","Move cells"],"guide":"guides/cell-features/move-cells/move-cells.md","guideTitle":"Move cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/move-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json
index a6aebec00..a1f1dff69 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-read-only-cells></example1-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\n@Component({\n  selector: 'example1-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'name',\n        readOnly: true,\n        renderer: dimmedTextRenderer,\n      },\n      {\n        data: 'symbol',\n      },\n      {\n        data: 'atomicNumber',\n      },\n      {\n        data: 'atomicMass',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-read-only-cells></example1-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\n@Component({\n  selector: 'example1-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'name',\n        readOnly: true,\n        renderer: dimmedTextRenderer,\n      },\n      {\n        data: 'symbol',\n      },\n      {\n        data: 'atomicNumber',\n      },\n      {\n        data: 'atomicMass',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json
index 634f1d79c..3d633bd22 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-read-only-cells></example2-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings ={\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row: number, col: number, _: any) => {\n        if (hot.getData()[row][col] === 'Helium') {\n          return { readOnly: true };\n        }\n\n        return {};\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-read-only-cells></example2-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings ={\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row: number, col: number, _: any) => {\n        if (hot.getData()[row][col] === 'Helium') {\n          return { readOnly: true };\n        }\n\n        return {};\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json
index 88dd7329f..abb5c7a61 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-read-only-cells></example3-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\n@Component({\n  selector: 'example3-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'name',\n        editor: false,\n        renderer: dimmedTextRenderer,\n      },\n      {\n        data: 'symbol',\n        editor: 'text',\n      },\n      {\n        data: 'atomicNumber',\n        editor: 'numeric',\n      },\n      {\n        data: 'atomicMass',\n        editor: 'numeric',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-read-only-cells></example3-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\n@Component({\n  selector: 'example3-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'name',\n        editor: false,\n        renderer: dimmedTextRenderer,\n      },\n      {\n        data: 'symbol',\n        editor: 'text',\n      },\n      {\n        data: 'atomicNumber',\n        editor: 'numeric',\n      },\n      {\n        data: 'atomicMass',\n        editor: 'numeric',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json
index 8e332472b..8192facd1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-read-only-cells></example4-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row, _col, prop) => {\n        if (hot.getDataAtRowProp(row, prop as string) === 'Helium') {\n          return { editor: false };\n        }\n        return { editor: 'text' };\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-read-only-cells></example4-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row, _col, prop) => {\n        if (hot.getDataAtRowProp(row, prop as string) === 'Helium') {\n          return { editor: false };\n        }\n        return { editor: 'text' };\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json
index 73f5c1807..76b7df5b7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-read-only-cells></example5-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings ={\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row: number) => {\n        return row === 1 ? { readOnly: true } : {};\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-read-only-cells></example5-read-only-cells>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-read-only-cells',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings ={\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      cells: (row: number) => {\n        return row === 1 ? { readOnly: true } : {};\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json
index 81ede5fa2..07b3cc7df 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-readonly-grid></example-readonly-grid>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-readonly-grid',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    readOnly: true,\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-readonly-grid></example-readonly-grid>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-readonly-grid',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    readOnly: true,\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json
index 5505152e4..f0e43711a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json
index 160a49f01..3afb2003a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json
index b2e947fc4..4d79872c1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, col) {\n    return hot.getData()[row][col] === 'Helium' ? { readOnly: true } : {};\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, col) {\n    return hot.getData()[row][col] === 'Helium' ? { readOnly: true } : {};\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json
index 076edaedf..b867ad2e6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, col) {\n    return hot.getData()[row][col] === 'Helium' ? { readOnly: true } : {};\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, col) {\n    return hot.getData()[row][col] === 'Helium' ? { readOnly: true } : {};\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json
index fb0032d54..7c84836f9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json
index 7a9ccbdf8..6e5ecda48 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json
index 02112d27c..04f87f86f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, _col, prop) {\n    return hot.getDataAtRowProp(row, prop) === 'Helium' ? { editor: false } : { editor: 'text' };\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, _col, prop) {\n    return hot.getDataAtRowProp(row, prop) === 'Helium' ? { editor: false } : { editor: 'text' };\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json
index b00fdced9..d0758d83d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, _col, prop) {\n    return hot.getDataAtRowProp(row, prop as string) === 'Helium' ? { editor: false } : { editor: 'text' };\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row, _col, prop) {\n    return hot.getDataAtRowProp(row, prop as string) === 'Helium' ? { editor: false } : { editor: 'text' };\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json
index d6c269bd9..12a2829c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json
index a2b5e09d8..3569510be 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json
index 86f1d24b7..24c80313b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid');\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  // make the entire grid read-only\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid');\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  // make the entire grid read-only\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json
index a65374a02..c200e9a18 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid')!;\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  // make the entire grid read-only\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid')!;\n\nnew Handsontable(container, {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  // make the entire grid read-only\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json
index d7f895fea..b30b3ab84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        {\n          data: 'name',\n          readOnly: true,\n          renderer: dimmedTextRenderer,\n        },\n        {\n          data: 'symbol',\n        },\n        {\n          data: 'atomicNumber',\n        },\n        {\n          data: 'atomicMass',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example1.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        {\n          data: 'name',\n          readOnly: true,\n          renderer: dimmedTextRenderer,\n        },\n        {\n          data: 'symbol',\n        },\n        {\n          data: 'atomicNumber',\n        },\n        {\n          data: 'atomicMass',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example1.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json
index 52b255945..737cdbf55 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row, col) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (hot.getData()[row][col] === 'Helium') {\n          cellProperties.readOnly = true;\n        }\n\n        return cellProperties;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example2.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row, col) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (hot.getData()[row][col] === 'Helium') {\n          cellProperties.readOnly = true;\n        }\n\n        return cellProperties;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example2.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json
index 2783a0d1f..a64660cb2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        {\n          data: 'name',\n          editor: false,\n          renderer: dimmedTextRenderer,\n        },\n        {\n          data: 'symbol',\n          editor: 'text',\n        },\n        {\n          data: 'atomicNumber',\n          editor: 'numeric',\n        },\n        {\n          data: 'atomicMass',\n          editor: 'numeric',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example3.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        {\n          data: 'name',\n          editor: false,\n          renderer: dimmedTextRenderer,\n        },\n        {\n          data: 'symbol',\n          editor: 'text',\n        },\n        {\n          data: 'atomicNumber',\n          editor: 'numeric',\n        },\n        {\n          data: 'atomicMass',\n          editor: 'numeric',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example3.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json
index 8ee9fe5cd..32f1425ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row, _col, prop) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (hot.getDataAtRowProp(row, prop as string) === 'Helium') {\n          cellProperties.editor = false;\n        } else {\n          cellProperties.editor = 'text';\n        }\n\n        return cellProperties;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example4.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row, _col, prop) {\n        const cellProperties: Handsontable.CellMeta = {};\n\n        if (hot.getDataAtRowProp(row, prop as string) === 'Helium') {\n          cellProperties.editor = false;\n        } else {\n          cellProperties.editor = 'text';\n        }\n\n        return cellProperties;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example4.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json
index f74c67efb..52ead11f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row) {\n        return row === 1 ? { readOnly: true } : {};\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example5.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      cells(row) {\n        return row === 1 ? { readOnly: true } : {};\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example5.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json
index 7e4c7837c..f1f0fc05d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      readOnly={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      readOnly={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json
index 516bd7737..d2fae5b39 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example1.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      readOnly: true,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n    },\n    {\n      data: 'atomicNumber',\n    },\n    {\n      data: 'atomicMass',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example1.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json
index ccf8546c3..2745712c5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ElementRow = {\n  name: string;\n  symbol: string;\n  atomicNumber: number;\n  atomicMass: number;\n};\n\nconst data: ElementRow[] = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst columnKeys: (keyof ElementRow)[] = ['name', 'symbol', 'atomicNumber', 'atomicMass'];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row, col) {\n    const key = columnKeys[col];\n\n    if (key !== undefined && data[row]?.[key] === 'Helium') {\n      return { readOnly: true };\n    }\n\n    return {};\n  },\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example2.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ElementRow = {\n  name: string;\n  symbol: string;\n  atomicNumber: number;\n  atomicMass: number;\n};\n\nconst data: ElementRow[] = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst columnKeys: (keyof ElementRow)[] = ['name', 'symbol', 'atomicNumber', 'atomicMass'];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row, col) {\n    const key = columnKeys[col];\n\n    if (key !== undefined && data[row]?.[key] === 'Helium') {\n      return { readOnly: true };\n    }\n\n    return {};\n  },\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example2.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json
index 479e06dac..3206225e9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example3.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.opacity = '0.6';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    {\n      data: 'name',\n      editor: false,\n      renderer: dimmedTextRenderer,\n    },\n    {\n      data: 'symbol',\n      editor: 'text',\n    },\n    {\n      data: 'atomicNumber',\n      editor: 'numeric',\n    },\n    {\n      data: 'atomicMass',\n      editor: 'numeric',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example3.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json
index 26d79b98b..2ae1656c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ElementRow = {\n  name: string;\n  symbol: string;\n  atomicNumber: number;\n  atomicMass: number;\n};\n\nconst data: ElementRow[] = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row, _col, prop) {\n    const propName = prop as keyof ElementRow;\n\n    if (data[row]?.[propName] === 'Helium') {\n      return { editor: false };\n    }\n\n    return { editor: 'text' };\n  },\n};\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example4.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ElementRow = {\n  name: string;\n  symbol: string;\n  atomicNumber: number;\n  atomicMass: number;\n};\n\nconst data: ElementRow[] = [\n  { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n  { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n  { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n  { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n  { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n];\n\nconst hotSettings: GridSettings = {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row, _col, prop) {\n    const propName = prop as keyof ElementRow;\n\n    if (data[row]?.[propName] === 'Helium') {\n      return { editor: false };\n    }\n\n    return { editor: 'text' };\n  },\n};\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example4.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json
index 436b3cb12..8beff2dc9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings: GridSettings = {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example5.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings: GridSettings = {\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  cells(row) {\n    return row === 1 ? { readOnly: true } : {};\n  },\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/example5.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json
index d668161d3..d8598c845 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"exampleReadOnlyGrid\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleReadOnlyGrid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { name: 'Hydrogen', symbol: 'H', atomicNumber: 1, atomicMass: 1.008 },\n    { name: 'Helium', symbol: 'He', atomicNumber: 2, atomicMass: 4.003 },\n    { name: 'Lithium', symbol: 'Li', atomicNumber: 3, atomicMass: 6.94 },\n    { name: 'Beryllium', symbol: 'Be', atomicNumber: 4, atomicMass: 9.012 },\n    { name: 'Boron', symbol: 'B', atomicNumber: 5, atomicMass: 10.81 },\n  ],\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  licenseKey: 'non-commercial-and-evaluation',\n  readOnly: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"exampleReadOnlyGrid\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json
index 602d36260..98516acdd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-selection></example1-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of options; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"selected === opt.value\"\n                  (click)=\"selectOption(opt.value)\"\n                >\n                  {{ opt.label }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  selected = 'multiple';\n\n  readonly options = [\n    { value: 'single', label: 'Single selection' },\n    { value: 'range', label: 'Range selection' },\n    { value: 'multiple', label: 'Multiple ranges selection' },\n  ];\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',   95000, 'Madrid',      'Spain',   'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',   88000, 'Lagos',       'Nigeria', 'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',      82000, 'Shanghai',    'China',   'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',     71000, 'Lisbon',      'Portugal','F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',       85000, 'Seoul',       'Korea',   'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',       68000, 'London',      'UK',      'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',        92000, 'Cairo',       'Egypt',   'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',       78000, 'Stockholm',   'Sweden',  'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',   74000, 'Mexico City', 'Mexico',  'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  get selectedLabel(): string {\n    return this.options.find((o) => o.value === this.selected)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(value: string): void {\n    this.selected = value;\n    this.isOpen = false;\n    type selection = 'multiple' | 'single' | 'range' | undefined;\n\n    this.hotTable?.hotInstance?.updateSettings({ selectionMode: value as selection });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-selection></example1-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of options; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"selected === opt.value\"\n                  (click)=\"selectOption(opt.value)\"\n                >\n                  {{ opt.label }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  selected = 'multiple';\n\n  readonly options = [\n    { value: 'single', label: 'Single selection' },\n    { value: 'range', label: 'Range selection' },\n    { value: 'multiple', label: 'Multiple ranges selection' },\n  ];\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',   95000, 'Madrid',      'Spain',   'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',   88000, 'Lagos',       'Nigeria', 'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',      82000, 'Shanghai',    'China',   'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',     71000, 'Lisbon',      'Portugal','F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',       85000, 'Seoul',       'Korea',   'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',       68000, 'London',      'UK',      'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',        92000, 'Cairo',       'Egypt',   'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',       78000, 'Stockholm',   'Sweden',  'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',   74000, 'Mexico City', 'Mexico',  'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  get selectedLabel(): string {\n    return this.options.find((o) => o.value === this.selected)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(value: string): void {\n    this.selected = value;\n    this.isOpen = false;\n    type selection = 'multiple' | 'single' | 'range' | undefined;\n\n    this.hotTable?.hotInstance?.updateSettings({ selectionMode: value as selection });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json
index 5ed79c04f..c98c31f59 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-selection></example2-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example2-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"getButton\" (click)=\"getButtonClick()\">Get data</button>\n      </div>\n      @if (output) {\n        <output class=\"console\" id=\"output\"> {{ output }} </output>\n      }\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',   95000, 'Madrid',      'Spain',   'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',   88000, 'Lagos',       'Nigeria', 'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',      82000, 'Shanghai',    'China',   'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',     71000, 'Lisbon',      'Portugal','F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',       85000, 'Seoul',       'Korea',   'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',       68000, 'London',      'UK',      'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',        92000, 'Cairo',       'Egypt',   'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',       78000, 'Stockholm',   'Sweden',  'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',   74000, 'Mexico City', 'Mexico',  'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  getButtonClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const selected = hot?.getSelected() || [];\n    let data: Handsontable.CellValue[] = [];\n\n    if (selected.length === 1) {\n      data = hot?.getData(...selected[0]!) || [];\n    } else {\n      for (let i = 0; i < selected.length; i += 1) {\n        const item = selected[i];\n\n        data.push(hot?.getData(...item));\n      }\n    }\n\n    this.output = JSON.stringify(data);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-selection></example2-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example2-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"getButton\" (click)=\"getButtonClick()\">Get data</button>\n      </div>\n      @if (output) {\n        <output class=\"console\" id=\"output\"> {{ output }} </output>\n      }\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',   95000, 'Madrid',      'Spain',   'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',   88000, 'Lagos',       'Nigeria', 'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',      82000, 'Shanghai',    'China',   'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',     71000, 'Lisbon',      'Portugal','F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',       85000, 'Seoul',       'Korea',   'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',       68000, 'London',      'UK',      'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',        92000, 'Cairo',       'Egypt',   'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',       78000, 'Stockholm',   'Sweden',  'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',   74000, 'Mexico City', 'Mexico',  'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  getButtonClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const selected = hot?.getSelected() || [];\n    let data: Handsontable.CellValue[] = [];\n\n    if (selected.length === 1) {\n      data = hot?.getData(...selected[0]!) || [];\n    } else {\n      for (let i = 0; i < selected.length; i += 1) {\n        const item = selected[i];\n\n        data.push(hot?.getData(...item));\n      }\n    }\n\n    this.output = JSON.stringify(data);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json
index 6488d763a..f026a4db0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Modify the selected cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-selection></example3-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"set-data-action\" (click)=\"buttonClick()\">\n          Click to modify the selected cells\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      'Spain',    'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        'Nigeria',  'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     'China',    'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       'Portugal', 'F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        'Korea',    'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       'UK',       'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',        'Egypt',    'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    'Sweden',   'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',  74000, 'Mexico City',  'Mexico',   'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  buttonClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const selected = hot?.getSelected() || [];\n\n    hot?.suspendRender();\n\n    for (let index = 0; index < selected.length; index += 1) {\n      const [row1, column1, row2, column2] = selected[index];\n      const startRow = Math.max(Math.min(row1, row2), 0);\n      const endRow = Math.max(row1, row2);\n      const startCol = Math.max(Math.min(column1, column2), 0);\n      const endCol = Math.max(column1, column2);\n\n      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n        for (\n          let columnIndex = startCol;\n          columnIndex <= endCol;\n          columnIndex += 1\n        ) {\n          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n        }\n      }\n    }\n\n    hot?.render();\n    hot?.resumeRender();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Modify the selected cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-selection></example3-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"set-data-action\" (click)=\"buttonClick()\">\n          Click to modify the selected cells\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      'Spain',    'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        'Nigeria',  'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     'China',    'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       'Portugal', 'F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        'Korea',    'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       'UK',       'F',  2, '2026-02-14'],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',        'Egypt',    'M', 10, '2026-06-30'],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    'Sweden',   'F',  6, '2026-09-12'],\n    ['Carlos Mendez',  'Sales',       'Account Manager',  74000, 'Mexico City',  'Mexico',   'M',  4, '2026-04-25'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output = '';\n\n  buttonClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const selected = hot?.getSelected() || [];\n\n    hot?.suspendRender();\n\n    for (let index = 0; index < selected.length; index += 1) {\n      const [row1, column1, row2, column2] = selected[index];\n      const startRow = Math.max(Math.min(row1, row2), 0);\n      const endRow = Math.max(row1, row2);\n      const startCol = Math.max(Math.min(column1, column2), 0);\n      const endCol = Math.max(column1, column2);\n\n      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n        for (\n          let columnIndex = startCol;\n          columnIndex <= endCol;\n          columnIndex += 1\n        ) {\n          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n        }\n      }\n    }\n\n    hot?.render();\n    hot?.resumeRender();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json
index 0110c1b49..8b40f236f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Style the selection area · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-selection></example4-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  styles: [`\n    #example4 td.area { background-color: rgba(75, 137, 255, 0.2); }\n    #example4 td.area.area-1 { background-color: rgba(75, 137, 255, 0.4); }\n    #example4 td.area.area-2 { background-color: rgba(75, 137, 255, 0.6); }\n  `],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      'Spain',    'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        'Nigeria',  'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     'China',    'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       'Portugal', 'F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        'Korea',    'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       'UK',       'F',  2, '2026-02-14'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Style the selection area · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-selection></example4-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  styles: [`\n    #example4 td.area { background-color: rgba(75, 137, 255, 0.2); }\n    #example4 td.area.area-1 { background-color: rgba(75, 137, 255, 0.4); }\n    #example4 td.area.area-2 { background-color: rgba(75, 137, 255, 0.6); }\n  `],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      'Spain',    'F', 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        'Nigeria',  'M',  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     'China',    'M',  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       'Portugal', 'F',  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        'Korea',    'M',  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       'UK',       'F',  2, '2026-02-14'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    selectionMode: 'multiple',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json
index 79e1eb4b7..032b14c91 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Select cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-selection></example5-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"selectCell()\">Select cell B2</button>\n        <button (click)=\"selectRange()\">Select range B2:D4</button>\n        <button (click)=\"deselect()\">Deselect</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000,  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000,  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000,  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000,  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000,  2, '2026-02-14'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  selectCell(): void {\n    // Select a single cell: row 1, col 1 (B2)\n    this.hotTable?.hotInstance?.selectCell(1, 1);\n  }\n\n  selectRange(): void {\n    // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n    this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n  }\n\n  deselect(): void {\n    this.hotTable?.hotInstance?.deselectCell();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Select cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-selection></example5-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"selectCell()\">Select cell B2</button>\n        <button (click)=\"selectRange()\">Select range B2:D4</button>\n        <button (click)=\"deselect()\">Deselect</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 12, '2026-03-14'],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000,  8, '2026-07-01'],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000,  5, '2026-01-10'],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000,  3, '2026-11-20'],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000,  7, '2026-08-05'],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000,  2, '2026-02-14'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    width: 'auto',\n    height: 'auto',\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    outsideClickDeselects: false,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  selectCell(): void {\n    // Select a single cell: row 1, col 1 (B2)\n    this.hotTable?.hotInstance?.selectCell(1, 1);\n  }\n\n  selectRange(): void {\n    // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n    this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n  }\n\n  deselect(): void {\n    this.hotTable?.hotInstance?.deselectCell();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json
index 827e37e99..13cd3914f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-selection></example6-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" checked (change)=\"toggleAutoWrapRow($event)\">\n          Wrap at the left/right edges (autoWrapRow)\n        </label>\n        <label>\n          <input type=\"checkbox\" checked (change)=\"toggleAutoWrapCol($event)\">\n          Wrap at the top/bottom edges (autoWrapCol)\n        </label>\n      </div>\n      <p>\n        Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or\n        <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n      </p>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  toggleAutoWrapRow(event: Event): void {\n    this.hotTable?.hotInstance?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n  }\n\n  toggleAutoWrapCol(event: Event): void {\n    this.hotTable?.hotInstance?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-selection></example6-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" checked (change)=\"toggleAutoWrapRow($event)\">\n          Wrap at the left/right edges (autoWrapRow)\n        </label>\n        <label>\n          <input type=\"checkbox\" checked (change)=\"toggleAutoWrapCol($event)\">\n          Wrap at the top/bottom edges (autoWrapCol)\n        </label>\n      </div>\n      <p>\n        Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or\n        <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n      </p>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  toggleAutoWrapRow(event: Event): void {\n    this.hotTable?.hotInstance?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n  }\n\n  toggleAutoWrapCol(event: Event): void {\n    this.hotTable?.hotInstance?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example7.ts.json
index f2d52779c..ed201cf07 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Resize a selection with handles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-selection></example7-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example7-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    selectionHandles: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit(): void {\n    // Pre-select an interior range so the handles are immediately visible.\n    this.hotTable?.hotInstance?.selectCell(1, 1, 4, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example7.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Resize a selection with handles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-selection></example7-selection>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example7-selection',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    selectionHandles: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit(): void {\n    // Pre-select an interior range so the handles are immediately visible.\n    this.hotTable?.hotInstance?.selectCell(1, 1, 4, 3);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/selection/angular/example7.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json
index 5d041919b..8e856ec13 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"selectionDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"selectionTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"selectionLabel\">Multiple ranges selection</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"selectionMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"single\">Single selection</li>\n          <li role=\"option\" data-value=\"range\">Range selection</li>\n          <li role=\"option\" data-value=\"multiple\" aria-selected=\"true\">Multiple ranges selection</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown');\nconst trigger = document.querySelector('#selectionTrigger');\nconst menu = document.querySelector('#selectionMenu');\nconst label = document.querySelector('#selectionLabel');\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ selectionMode: item.dataset.value });\n  }\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 {\n  z-index: 1;\n  position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"selectionDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"selectionTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"selectionLabel\">Multiple ranges selection</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"selectionMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"single\">Single selection</li>\n          <li role=\"option\" data-value=\"range\">Range selection</li>\n          <li role=\"option\" data-value=\"multiple\" aria-selected=\"true\">Multiple ranges selection</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown');\nconst trigger = document.querySelector('#selectionTrigger');\nconst menu = document.querySelector('#selectionMenu');\nconst label = document.querySelector('#selectionLabel');\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ selectionMode: item.dataset.value });\n  }\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 {\n  z-index: 1;\n  position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json
index c12eba575..ab2087fcc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"selectionDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"selectionTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"selectionLabel\">Multiple ranges selection</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"selectionMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"single\">Single selection</li>\n          <li role=\"option\" data-value=\"range\">Range selection</li>\n          <li role=\"option\" data-value=\"multiple\" aria-selected=\"true\">Multiple ranges selection</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown')!;\nconst trigger = document.querySelector('#selectionTrigger')! as HTMLButtonElement;\nconst menu = document.querySelector('#selectionMenu')! as HTMLUListElement;\nconst label = document.querySelector('#selectionLabel')!;\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e: MouseEvent) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ selectionMode: item.dataset.value } as Handsontable.GridSettings);\n  }\n});\n\ndocument.addEventListener('click', (e: MouseEvent) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e: KeyboardEvent) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 {\n  z-index: 1;\n  position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"selectionDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"selectionTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"selectionLabel\">Multiple ranges selection</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"selectionMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"single\">Single selection</li>\n          <li role=\"option\" data-value=\"range\">Range selection</li>\n          <li role=\"option\" data-value=\"multiple\" aria-selected=\"true\">Multiple ranges selection</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown')!;\nconst trigger = document.querySelector('#selectionTrigger')! as HTMLButtonElement;\nconst menu = document.querySelector('#selectionMenu')! as HTMLUListElement;\nconst label = document.querySelector('#selectionLabel')!;\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e: MouseEvent) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ selectionMode: item.dataset.value } as Handsontable.GridSettings);\n  }\n});\n\ndocument.addEventListener('click', (e: MouseEvent) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e: KeyboardEvent) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 {\n  z-index: 1;\n  position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json
index 6735711cc..e8650c0c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"getButton\">Get data</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton');\nconst output = document.querySelector('#output');\n\ngetButton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n  let data = [];\n\n  if (selected.length === 1) {\n    data = hot.getData(...selected[0]);\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      data.push(hot.getData(...selected[i]));\n    }\n  }\n\n  output.innerText = JSON.stringify(data);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example2.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"getButton\">Get data</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton');\nconst output = document.querySelector('#output');\n\ngetButton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n  let data = [];\n\n  if (selected.length === 1) {\n    data = hot.getData(...selected[0]);\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      data.push(hot.getData(...selected[i]));\n    }\n  }\n\n  output.innerText = JSON.stringify(data);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example2.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json
index d66764f8a..0e965d1a3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"getButton\">Get data</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton')!;\nconst output = document.querySelector('#output')!;\n\ngetButton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n  let data: Handsontable.CellValue[] = [];\n\n  if (selected.length === 1) {\n    data = hot.getData(...selected[0]!);\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      data.push(hot.getData(...selected[i]!));\n    }\n  }\n\n  (output as HTMLElement).innerText = JSON.stringify(data);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"getButton\">Get data</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton')!;\nconst output = document.querySelector('#output')!;\n\ngetButton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n  let data: Handsontable.CellValue[] = [];\n\n  if (selected.length === 1) {\n    data = hot.getData(...selected[0]!);\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      data.push(hot.getData(...selected[i]!));\n    }\n  }\n\n  (output as HTMLElement).innerText = JSON.stringify(data);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json
index ba50a9db0..9a3e2c952 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Modify the selected cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"set-data-action\">Click to modify the selected cells</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action');\n\nbutton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n\n  hot.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index];\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot.render();\n  hot.resumeRender();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Modify the selected cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"set-data-action\">Click to modify the selected cells</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action');\n\nbutton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n\n  hot.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index];\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot.render();\n  hot.resumeRender();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json
index f36328b99..1ee609074 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Modify the selected cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"set-data-action\">Click to modify the selected cells</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action')!;\n\nbutton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n\n  hot.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index]!;\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot.render();\n  hot.resumeRender();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Modify the selected cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"set-data-action\">Click to modify the selected cells</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action')!;\n\nbutton.addEventListener('click', () => {\n  const selected = hot.getSelected() || [];\n\n  hot.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index]!;\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot.render();\n  hot.resumeRender();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json
index 6bdd76f0d..b25344a29 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Style the selection area · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Style the selection area · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json
index be9cd296a..b54dad8a6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Style the selection area · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Style the selection area · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json
index c843f83ba..8ffcfe50a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Select cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"select-cell\">Select cell B2</button>\n      <button id=\"select-range\">Select range B2:D4</button>\n      <button id=\"deselect\">Deselect</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell').addEventListener('click', () => {\n  // Select a single cell: row 1, col 1 (B2)\n  hot.selectCell(1, 1);\n});\ndocument.querySelector('#select-range').addEventListener('click', () => {\n  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n  hot.selectCell(1, 1, 3, 3);\n});\ndocument.querySelector('#deselect').addEventListener('click', () => {\n  hot.deselectCell();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example5.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Select cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"select-cell\">Select cell B2</button>\n      <button id=\"select-range\">Select range B2:D4</button>\n      <button id=\"deselect\">Deselect</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell').addEventListener('click', () => {\n  // Select a single cell: row 1, col 1 (B2)\n  hot.selectCell(1, 1);\n});\ndocument.querySelector('#select-range').addEventListener('click', () => {\n  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n  hot.selectCell(1, 1, 3, 3);\n});\ndocument.querySelector('#deselect').addEventListener('click', () => {\n  hot.deselectCell();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example5.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json
index 31b290ae4..0a3ee33d7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Select cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"select-cell\">Select cell B2</button>\n      <button id=\"select-range\">Select range B2:D4</button>\n      <button id=\"deselect\">Deselect</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell')!.addEventListener('click', () => {\n  // Select a single cell: row 1, col 1 (B2)\n  hot.selectCell(1, 1);\n});\n\ndocument.querySelector('#select-range')!.addEventListener('click', () => {\n  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n  hot.selectCell(1, 1, 3, 3);\n});\n\ndocument.querySelector('#deselect')!.addEventListener('click', () => {\n  hot.deselectCell();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Select cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"select-cell\">Select cell B2</button>\n      <button id=\"select-range\">Select range B2:D4</button>\n      <button id=\"deselect\">Deselect</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell')!.addEventListener('click', () => {\n  // Select a single cell: row 1, col 1 (B2)\n  hot.selectCell(1, 1);\n});\n\ndocument.querySelector('#select-range')!.addEventListener('click', () => {\n  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n  hot.selectCell(1, 1, 3, 3);\n});\n\ndocument.querySelector('#deselect')!.addEventListener('click', () => {\n  hot.deselectCell();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json
index be53d10c2..1f82075dc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label><input type=\"checkbox\" id=\"auto-wrap-row\" checked> Wrap at the left/right edges (autoWrapRow)</label>\n      <label><input type=\"checkbox\" id=\"auto-wrap-col\" checked> Wrap at the top/bottom edges (autoWrapCol)</label>\n    </div>\n    <p>Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or <kbd>&darr;</kbd> at the bottom of a column, to see the effect.</p>\n  </div>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n        ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n        ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n        ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n        ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n    ],\n    colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row');\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col');\nautoWrapRowCheckbox.addEventListener('change', () => {\n    hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\nautoWrapColCheckbox.addEventListener('change', () => {\n    hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example6.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label><input type=\"checkbox\" id=\"auto-wrap-row\" checked> Wrap at the left/right edges (autoWrapRow)</label>\n      <label><input type=\"checkbox\" id=\"auto-wrap-col\" checked> Wrap at the top/bottom edges (autoWrapCol)</label>\n    </div>\n    <p>Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or <kbd>&darr;</kbd> at the bottom of a column, to see the effect.</p>\n  </div>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n        ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n        ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n        ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n        ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n    ],\n    colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row');\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col');\nautoWrapRowCheckbox.addEventListener('change', () => {\n    hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\nautoWrapColCheckbox.addEventListener('change', () => {\n    hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example6.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json
index 729d93c33..07c140126 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label><input type=\"checkbox\" id=\"auto-wrap-row\" checked> Wrap at the left/right edges (autoWrapRow)</label>\n      <label><input type=\"checkbox\" id=\"auto-wrap-col\" checked> Wrap at the top/bottom edges (autoWrapCol)</label>\n    </div>\n    <p>Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or <kbd>&darr;</kbd> at the bottom of a column, to see the effect.</p>\n  </div>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst autoWrapRowCheckbox = document.querySelector<HTMLInputElement>('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector<HTMLInputElement>('#auto-wrap-col')!;\n\nautoWrapRowCheckbox.addEventListener('change', () => {\n  hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\n\nautoWrapColCheckbox.addEventListener('change', () => {\n  hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label><input type=\"checkbox\" id=\"auto-wrap-row\" checked> Wrap at the left/right edges (autoWrapRow)</label>\n      <label><input type=\"checkbox\" id=\"auto-wrap-col\" checked> Wrap at the top/bottom edges (autoWrapCol)</label>\n    </div>\n    <p>Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or <kbd>&darr;</kbd> at the bottom of a column, to see the effect.</p>\n  </div>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst autoWrapRowCheckbox = document.querySelector<HTMLInputElement>('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector<HTMLInputElement>('#auto-wrap-col')!;\n\nautoWrapRowCheckbox.addEventListener('change', () => {\n  hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\n\nautoWrapColCheckbox.addEventListener('change', () => {\n  hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.js.json
index 15d54485f..bbe13e57d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Resize a selection with handles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example7');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 12],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 8],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 5],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 3],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 7],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 2],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 10],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 6],\n    ],\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    selectionHandles: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Pre-select an interior range so the handles are immediately visible.\nhot.selectCell(1, 1, 4, 3);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example7.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Selection · Resize a selection with handles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example7');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 12],\n        ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 8],\n        ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 5],\n        ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 3],\n        ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 7],\n        ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 2],\n        ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 10],\n        ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 6],\n    ],\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n    rowHeaders: true,\n    width: 'auto',\n    height: 'auto',\n    selectionHandles: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Pre-select an interior range so the handles are immediately visible.\nhot.selectCell(1, 1, 4, 3);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example7.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.ts.json
index f8f760a70..d51e68831 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Selection · Resize a selection with handles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  selectionHandles: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Pre-select an interior range so the handles are immediately visible.\nhot.selectCell(1, 1, 4, 3);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example7.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Selection · Resize a selection with handles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  selectionHandles: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Pre-select an interior range so the handles are immediately visible.\nhot.selectCell(1, 1, 4, 3);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example7.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json
index ddb378654..2405ca4fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst options: { value: string; label: string }[] = [\n  { value: 'single', label: 'Single selection' },\n  { value: 'range', label: 'Range selection' },\n  { value: 'multiple', label: 'Multiple ranges selection' },\n];\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState('multiple');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setSelected(value);\n    setIsOpen(false);\n  };\n\n  const selectedLabel = options.find((o) => o.value === selected)?.label;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {options.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={selected === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        selectionMode={selected as 'single' | 'range' | 'multiple'}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example1.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst options: { value: string; label: string }[] = [\n  { value: 'single', label: 'Single selection' },\n  { value: 'range', label: 'Range selection' },\n  { value: 'multiple', label: 'Multiple ranges selection' },\n];\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState('multiple');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setSelected(value);\n    setIsOpen(false);\n  };\n\n  const selectedLabel = options.find((o) => o.value === selected)?.label;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {options.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={selected === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        selectionMode={selected as 'single' | 'range' | 'multiple'}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example1.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json
index 7e534ef70..0af3e71f3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst gridData = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('');\n\n  const getButtonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const selected = hot?.getSelected() || [];\n    let data: Handsontable.CellValue[] = [];\n\n    if (selected.length === 1) {\n      data = hot?.getData(...selected[0]!) || [];\n    } else {\n      for (let i = 0; i < selected.length; i += 1) {\n        const item = selected[i];\n\n        data.push(hot?.getData(...item));\n      }\n    }\n\n    setOutput(JSON.stringify(data));\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"getButton\" onClick={() => getButtonClickCallback()}>\n            Get data\n          </button>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={gridData}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        selectionMode=\"multiple\" // 'single', 'range' or 'multiple',\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example2.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst gridData = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('');\n\n  const getButtonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const selected = hot?.getSelected() || [];\n    let data: Handsontable.CellValue[] = [];\n\n    if (selected.length === 1) {\n      data = hot?.getData(...selected[0]!) || [];\n    } else {\n      for (let i = 0; i < selected.length; i += 1) {\n        const item = selected[i];\n\n        data.push(hot?.getData(...item));\n      }\n    }\n\n    setOutput(JSON.stringify(data));\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"getButton\" onClick={() => getButtonClickCallback()}>\n            Get data\n          </button>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={gridData}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        selectionMode=\"multiple\" // 'single', 'range' or 'multiple',\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example2.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json
index 60bfb0804..ca65d1929 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Modify the selected cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const selected = hot?.getSelected() || [];\n\n    hot?.suspendRender();\n\n    for (let index = 0; index < selected.length; index += 1) {\n      const [row1, column1, row2, column2] = selected[index];\n      const startRow = Math.max(Math.min(row1, row2), 0);\n      const endRow = Math.max(row1, row2);\n      const startCol = Math.max(Math.min(column1, column2), 0);\n      const endCol = Math.max(column1, column2);\n\n      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n        for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n        }\n      }\n    }\n\n    hot?.render();\n    hot?.resumeRender();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"set-data-action\" onClick={() => buttonClickCallback()}>\n            Click to modify the selected cells\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        selectionMode=\"multiple\" // 'single', 'range' or 'multiple',\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/react/example3.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Modify the selected cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const buttonClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const selected = hot?.getSelected() || [];\n\n    hot?.suspendRender();\n\n    for (let index = 0; index < selected.length; index += 1) {\n      const [row1, column1, row2, column2] = selected[index];\n      const startRow = Math.max(Math.min(row1, row2), 0);\n      const endRow = Math.max(row1, row2);\n      const startCol = Math.max(Math.min(column1, column2), 0);\n      const endCol = Math.max(column1, column2);\n\n      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n        for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n        }\n      }\n    }\n\n    hot?.render();\n    hot?.resumeRender();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"set-data-action\" onClick={() => buttonClickCallback()}>\n            Click to modify the selected cells\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        selectionMode=\"multiple\" // 'single', 'range' or 'multiple',\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".c-red {\n  color: red;\n}"},"docsPath":"guides/cell-features/selection/react/example3.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json
index 4a2fb8513..3f537f833 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Style the selection area · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example4.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      colWidths={100}\n      rowHeaders={true}\n      colHeaders={true}\n      outsideClickDeselects={false}\n      selectionMode=\"multiple\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example4.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/react/example4.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Style the selection area · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example4.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      colWidths={100}\n      rowHeaders={true}\n      colHeaders={true}\n      outsideClickDeselects={false}\n      selectionMode=\"multiple\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example4.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/react/example4.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json
index 90e4c8c9a..c1dc12ca6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Select cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const selectCell = () => {\n    // Select a single cell: row 1, col 1 (B2)\n    hotRef.current?.hotInstance?.selectCell(1, 1);\n  };\n\n  const selectRange = () => {\n    // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n    hotRef.current?.hotInstance?.selectCell(1, 1, 3, 3);\n  };\n\n  const deselect = () => {\n    hotRef.current?.hotInstance?.deselectCell();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={selectCell}>Select cell B2</button>\n          <button onClick={selectRange}>Select range B2:D4</button>\n          <button onClick={deselect}>Deselect</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example5.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Select cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const selectCell = () => {\n    // Select a single cell: row 1, col 1 (B2)\n    hotRef.current?.hotInstance?.selectCell(1, 1);\n  };\n\n  const selectRange = () => {\n    // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n    hotRef.current?.hotInstance?.selectCell(1, 1, 3, 3);\n  };\n\n  const deselect = () => {\n    hotRef.current?.hotInstance?.deselectCell();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={selectCell}>Select cell B2</button>\n          <button onClick={selectRange}>Select range B2:D4</button>\n          <button onClick={deselect}>Deselect</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colWidths={100}\n        rowHeaders={true}\n        colHeaders={true}\n        outsideClickDeselects={false}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example5.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json
index d39a29e29..f2324c02f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n  ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n  ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n  ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n  ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [autoWrapRow, setAutoWrapRow] = useState(true);\n  const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" checked={autoWrapRow} onChange={(event) => setAutoWrapRow(event.target.checked)} />{' '}\n            Wrap at the left/right edges (autoWrapRow)\n          </label>\n          <label>\n            <input type=\"checkbox\" checked={autoWrapCol} onChange={(event) => setAutoWrapCol(event.target.checked)} />{' '}\n            Wrap at the top/bottom edges (autoWrapCol)\n          </label>\n        </div>\n        <p>\n          Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or{' '}\n          <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n        </p>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Supplier', 'Category', 'Quantity']}\n        width=\"auto\"\n        height=\"auto\"\n        rowHeaders={true}\n        autoWrapRow={autoWrapRow}\n        autoWrapCol={autoWrapCol}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example6.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n  ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n  ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n  ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n  ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [autoWrapRow, setAutoWrapRow] = useState(true);\n  const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" checked={autoWrapRow} onChange={(event) => setAutoWrapRow(event.target.checked)} />{' '}\n            Wrap at the left/right edges (autoWrapRow)\n          </label>\n          <label>\n            <input type=\"checkbox\" checked={autoWrapCol} onChange={(event) => setAutoWrapCol(event.target.checked)} />{' '}\n            Wrap at the top/bottom edges (autoWrapCol)\n          </label>\n        </div>\n        <p>\n          Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or{' '}\n          <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n        </p>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Supplier', 'Category', 'Quantity']}\n        width=\"auto\"\n        height=\"auto\"\n        rowHeaders={true}\n        autoWrapRow={autoWrapRow}\n        autoWrapCol={autoWrapCol}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example6.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example7.tsx.json
index 69159db83..36c62a9d3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Selection · Resize a selection with handles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n  ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n  ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n  ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n  ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n  ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n  ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n  ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  // Pre-select an interior range so the handles are immediately visible.\n  useEffect(() => {\n    hotRef.current?.hotInstance?.selectCell(1, 1, 4, 3);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure']}\n      rowHeaders={true}\n      width=\"auto\"\n      height=\"auto\"\n      selectionHandles={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example7.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Selection · Resize a selection with handles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n  ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n  ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n  ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n  ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n  ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n  ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n  ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  // Pre-select an interior range so the handles are immediately visible.\n  useEffect(() => {\n    hotRef.current?.hotInstance?.selectCell(1, 1, 4, 3);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure']}\n      rowHeaders={true}\n      width=\"auto\"\n      height=\"auto\"\n      selectionHandles={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example7.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json
index 1bf820c22..c801d2ac4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst options = [\n  { value: 'single', label: 'Single selection' },\n  { value: 'range', label: 'Range selection' },\n  { value: 'multiple', label: 'Multiple ranges selection' },\n] as const;\n\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst selected = ref<'single' | 'range' | 'multiple'>('multiple');\n\nconst selectedLabel = computed(() => options.find((o) => o.value === selected.value)?.label);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: selected.value,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst handleSelect = (value: 'single' | 'range' | 'multiple') => {\n  selected.value = value;\n  isOpen.value = false;\n};\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div ref=\"dropdownRef\" class=\"theme-dropdown\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in options\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"selected === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable :key=\"selected\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example1.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst options = [\n  { value: 'single', label: 'Single selection' },\n  { value: 'range', label: 'Range selection' },\n  { value: 'multiple', label: 'Multiple ranges selection' },\n] as const;\n\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst selected = ref<'single' | 'range' | 'multiple'>('multiple');\n\nconst selectedLabel = computed(() => options.find((o) => o.value === selected.value)?.label);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  selectionMode: selected.value,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst handleSelect = (value: 'single' | 'range' | 'multiple') => {\n  selected.value = value;\n  isOpen.value = false;\n};\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div ref=\"dropdownRef\" class=\"theme-dropdown\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in options\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"selected === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable :key=\"selected\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example1.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json
index 2250b0313..6108012da 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst output = ref('');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButtonClickCallback = () => {\n  const hot = hotTableRef.value?.hotInstance;\n  const selected = hot?.getSelected() || [];\n  let data: Handsontable.CellValue[] = [];\n\n  if (selected.length === 1) {\n    data = hot?.getData(...selected[0]!) || [];\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      const item = selected[i];\n\n      data.push(hot?.getData(...item!));\n    }\n  }\n\n  output.value = JSON.stringify(data);\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"getButton\" type=\"button\" @click=\"getButtonClickCallback\">\n          Get data\n        </button>\n      </div>\n      <output id=\"output\" class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example2.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst output = ref('');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButtonClickCallback = () => {\n  const hot = hotTableRef.value?.hotInstance;\n  const selected = hot?.getSelected() || [];\n  let data: Handsontable.CellValue[] = [];\n\n  if (selected.length === 1) {\n    data = hot?.getData(...selected[0]!) || [];\n  } else {\n    for (let i = 0; i < selected.length; i += 1) {\n      const item = selected[i];\n\n      data.push(hot?.getData(...item!));\n    }\n  }\n\n  output.value = JSON.stringify(data);\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"getButton\" type=\"button\" @click=\"getButtonClickCallback\">\n          Get data\n        </button>\n      </div>\n      <output id=\"output\" class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example2.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json
index f8d987846..11d958627 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Modify the selected cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst buttonClickCallback = () => {\n  const hot = hotTableRef.value?.hotInstance;\n  const selected = hot?.getSelected() || [];\n\n  hot?.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index];\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot?.render();\n  hot?.resumeRender();\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"set-data-action\" type=\"button\" @click=\"buttonClickCallback\">\n          Click to modify the selected cells\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.c-red {\n  color: red;\n}\n</style>"},"docsPath":"guides/cell-features/selection/vue/example3.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Modify the selected cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst buttonClickCallback = () => {\n  const hot = hotTableRef.value?.hotInstance;\n  const selected = hot?.getSelected() || [];\n\n  hot?.suspendRender();\n\n  for (let index = 0; index < selected.length; index += 1) {\n    const [row1, column1, row2, column2] = selected[index];\n    const startRow = Math.max(Math.min(row1, row2), 0);\n    const endRow = Math.max(row1, row2);\n    const startCol = Math.max(Math.min(column1, column2), 0);\n    const endCol = Math.max(column1, column2);\n\n    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n        hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n        hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n      }\n    }\n  }\n\n  hot?.render();\n  hot?.resumeRender();\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"set-data-action\" type=\"button\" @click=\"buttonClickCallback\">\n          Click to modify the selected cells\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.c-red {\n  color: red;\n}\n</style>"},"docsPath":"guides/cell-features/selection/vue/example3.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json
index 767ac3429..8ac632bf8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Style the selection area · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}\n</style>"},"docsPath":"guides/cell-features/selection/vue/example4.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Style the selection area · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  selectionMode: 'multiple',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n#example4 td.area {\n  background-color: rgba(75, 137, 255, 0.2);\n}\n\n#example4 td.area.area-1 {\n  background-color: rgba(75, 137, 255, 0.4);\n}\n\n#example4 td.area.area-2 {\n  background-color: rgba(75, 137, 255, 0.6);\n}\n</style>"},"docsPath":"guides/cell-features/selection/vue/example4.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json
index 5bd27a66f..b58300527 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Select cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst selectCell = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n\nconst selectRange = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 3, 3);\n};\n\nconst deselect = () => {\n  hotTableRef.value?.hotInstance?.deselectCell();\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"selectCell\">\n          Select cell B2\n        </button>\n        <button type=\"button\" @click=\"selectRange\">\n          Select range B2:D4\n        </button>\n        <button type=\"button\" @click=\"deselect\">\n          Deselect\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example5.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Select cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n  ],\n  width: 'auto',\n  height: 'auto',\n  colWidths: 100,\n  rowHeaders: true,\n  colHeaders: true,\n  outsideClickDeselects: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst selectCell = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n};\n\nconst selectRange = () => {\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 3, 3);\n};\n\nconst deselect = () => {\n  hotTableRef.value?.hotInstance?.deselectCell();\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"selectCell\">\n          Select cell B2\n        </button>\n        <button type=\"button\" @click=\"selectRange\">\n          Select range B2:D4\n        </button>\n        <button type=\"button\" @click=\"deselect\">\n          Deselect\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example5.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json
index 308830041..b835c27b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst toggleAutoWrapRow = (event: Event) => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  hot?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n};\n\nconst toggleAutoWrapCol = (event: Event) => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  hot?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n};\n</script>\n\n<template>\n  <div id=\"example6\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" checked @change=\"toggleAutoWrapRow\">\n          Wrap at the left/right edges (autoWrapRow)\n        </label>\n        <label>\n          <input type=\"checkbox\" checked @change=\"toggleAutoWrapCol\">\n          Wrap at the top/bottom edges (autoWrapCol)\n        </label>\n      </div>\n      <p>\n        Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or\n        <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n      </p>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example6.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n    ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n    ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n    ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n    ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst toggleAutoWrapRow = (event: Event) => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  hot?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n};\n\nconst toggleAutoWrapCol = (event: Event) => {\n  const hot = hotTableRef.value?.hotInstance;\n\n  hot?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n};\n</script>\n\n<template>\n  <div id=\"example6\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" checked @change=\"toggleAutoWrapRow\">\n          Wrap at the left/right edges (autoWrapRow)\n        </label>\n        <label>\n          <input type=\"checkbox\" checked @change=\"toggleAutoWrapCol\">\n          Wrap at the top/bottom edges (autoWrapCol)\n        </label>\n      </div>\n      <p>\n        Select a cell, then press <kbd>Tab</kbd> or <kbd>&rarr;</kbd> at the end of a row, or <kbd>Enter</kbd> or\n        <kbd>&darr;</kbd> at the bottom of a column, to see the effect.\n      </p>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example6.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example7.vue.json
index 7a4cd469c..490d369f3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Resize a selection with handles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  selectionHandles: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nonMounted(() => {\n  // Pre-select an interior range so the handles are immediately visible.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 4, 3);\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example7.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Resize a selection with handles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Ana García',     'Engineering', 'Senior Engineer',  95000, 'Madrid',      12],\n    ['James Okafor',   'Marketing',   'Product Manager',  88000, 'Lagos',        8],\n    ['Li Wei',         'Engineering', 'Frontend Dev',     82000, 'Shanghai',     5],\n    ['Maria Santos',   'HR',          'HR Specialist',    71000, 'Lisbon',       3],\n    ['David Kim',      'Engineering', 'Backend Dev',      85000, 'Seoul',        7],\n    ['Emma Wilson',    'Marketing',   'SEO Analyst',      68000, 'London',       2],\n    ['Ahmed Hassan',   'Finance',     'Controller',       92000, 'Cairo',       10],\n    ['Sara Johansson', 'Engineering', 'QA Engineer',      78000, 'Stockholm',    6],\n  ],\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'City', 'Tenure'],\n  rowHeaders: true,\n  width: 'auto',\n  height: 'auto',\n  selectionHandles: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nonMounted(() => {\n  // Pre-select an interior range so the handles are immediately visible.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1, 4, 3);\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/selection/vue/example7.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example7","exampleTitle":"Resize a selection with handles","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json
index e88387c46..61e0c0c86 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Text alignment · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-text-alignment></example1-text-alignment>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-text-alignment',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(18) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: [\n      { row: 1, col: 1, rowspan: 3, colspan: 3 },\n      { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    className: 'htCenter',\n    cell: [\n      { row: 0, col: 0, className: 'htRight' },\n      { row: 1, col: 1, className: 'htLeft htMiddle' },\n      { row: 3, col: 4, className: 'htLeft htBottom' },\n    ],\n    afterSetCellMeta: (row: number, col: number, key: string, val: unknown) => {\n      console.log('cell meta changed', row, col, key, val);\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/text-alignment/angular/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Text alignment · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-text-alignment></example1-text-alignment>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-text-alignment',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(18) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly gridSettings: GridSettings = {\n    height: 320,\n    colWidths: 100,\n    rowHeaders: true,\n    colHeaders: true,\n    contextMenu: true,\n    mergeCells: [\n      { row: 1, col: 1, rowspan: 3, colspan: 3 },\n      { row: 3, col: 4, rowspan: 2, colspan: 2 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    className: 'htCenter',\n    cell: [\n      { row: 0, col: 0, className: 'htRight' },\n      { row: 1, col: 1, className: 'htLeft htMiddle' },\n      { row: 3, col: 4, className: 'htLeft htBottom' },\n    ],\n    afterSetCellMeta: (row: number, col: number, key: string, val: unknown) => {\n      console.log('cell meta changed', row, col, key, val);\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-features/text-alignment/angular/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json
index bd02c0053..7f4ed41c7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Text alignment · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.js","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Text alignment · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.js","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json
index 2c37714db..c275a72c0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Text alignment · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Text alignment · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json
index b3a2e73a3..36f12c4aa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Text alignment · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      mergeCells={[\n        { row: 1, col: 1, rowspan: 3, colspan: 3 },\n        { row: 3, col: 4, rowspan: 2, colspan: 2 },\n      ]}\n      className=\"htCenter\"\n      cell={[\n        { row: 0, col: 0, className: 'htRight' },\n        { row: 1, col: 1, className: 'htLeft htMiddle' },\n        { row: 3, col: 4, className: 'htLeft htBottom' },\n      ]}\n      afterSetCellMeta={function (row, col, key, val) {\n        console.log('cell meta changed', row, col, key, val);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/text-alignment/react/example1.tsx","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Text alignment · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(18) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      mergeCells={[\n        { row: 1, col: 1, rowspan: 3, colspan: 3 },\n        { row: 3, col: 4, rowspan: 2, colspan: 2 },\n      ]}\n      className=\"htCenter\"\n      cell={[\n        { row: 0, col: 0, className: 'htRight' },\n        { row: 1, col: 1, className: 'htLeft htMiddle' },\n        { row: 3, col: 4, className: 'htLeft htBottom' },\n      ]}\n      afterSetCellMeta={function (row, col, key, val) {\n        console.log('cell meta changed', row, col, key, val);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/text-alignment/react/example1.tsx","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json
index f8941ad54..d6bfae171 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Text alignment · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(18)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/text-alignment/vue/example1.vue","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Text alignment · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(18)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  contextMenu: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  mergeCells: [\n    { row: 1, col: 1, rowspan: 3, colspan: 3 },\n    { row: 3, col: 4, rowspan: 2, colspan: 2 },\n  ],\n  className: 'htCenter',\n  cell: [\n    { row: 0, col: 0, className: 'htRight' },\n    { row: 1, col: 1, className: 'htLeft htMiddle' },\n    { row: 3, col: 4, className: 'htLeft htBottom' },\n  ],\n  afterSetCellMeta(row, col, key, val) {\n    console.log('cell meta changed', row, col, key, val);\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-features/text-alignment/vue/example1.vue","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json
index cd42d56f2..7a33a75b8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-cell-editor></example1-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotCellEditorComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [],\n  template: `<button (click)=\"toUpperCase()\">Upper</button>\n  <button (click)=\"toLowerCase()\">Lower</button>`,\n})\nexport class EditorComponent extends HotCellEditorComponent<string> {\n  override onFocus(): void {}\n\n  toUpperCase(): void {\n    this.setValue((this.getValue() ?? '').toUpperCase());\n    this.finishEdit.emit();\n  }\n\n  toLowerCase(): void {\n    this.setValue((this.getValue() ?? '').toLowerCase());\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'example1-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Obrien Fischer'],\n    ['Alexandria Gordon'],\n    ['John Stafford'],\n    ['Regina Waters'],\n    ['Kay Bentley'],\n    ['Emerson Drake'],\n    ['Dean Stapleton'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        width: 250,\n        editor: EditorComponent,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-cell-editor></example1-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotCellEditorComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [],\n  template: `<button (click)=\"toUpperCase()\">Upper</button>\n  <button (click)=\"toLowerCase()\">Lower</button>`,\n})\nexport class EditorComponent extends HotCellEditorComponent<string> {\n  override onFocus(): void {}\n\n  toUpperCase(): void {\n    this.setValue((this.getValue() ?? '').toUpperCase());\n    this.finishEdit.emit();\n  }\n\n  toLowerCase(): void {\n    this.setValue((this.getValue() ?? '').toLowerCase());\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'example1-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Obrien Fischer'],\n    ['Alexandria Gordon'],\n    ['John Stafford'],\n    ['Regina Waters'],\n    ['Kay Bentley'],\n    ['Emerson Drake'],\n    ['Dean Stapleton'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        width: 250,\n        editor: EditorComponent,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json
index 73837d8cd..573ab0bc8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-editor></example2-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\n\nclass CustomEditor extends TextEditor {\n  override createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\n@Component({\n  selector: 'example2-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    startRows: 5,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colWidths: 200,\n    columns: [\n      {\n        editor: CustomEditor,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-editor></example2-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\n\nclass CustomEditor extends TextEditor {\n  override createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\n@Component({\n  selector: 'example2-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    startRows: 5,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colWidths: 200,\n    columns: [\n      {\n        editor: CustomEditor,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json
index c05d9b9f2..80f6d3385 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-cell-editor></example3-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\nimport Handsontable from 'handsontable/base';\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\n@Component({\n  selector: 'example3-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    data: [\n      ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n      ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n      ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n      ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n      ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n    ],\n    colHeaders: ['Name', 'Email', 'Role', 'Password'],\n    columns: [\n      { type: 'text' },\n      { type: 'text' },\n      { type: 'text' },\n      { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n    ],\n    colWidths: [130, 190, 70, 130],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example3.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-cell-editor></example3-cell-editor>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\nimport Handsontable from 'handsontable/base';\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\n@Component({\n  selector: 'example3-cell-editor',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    data: [\n      ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n      ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n      ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n      ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n      ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n    ],\n    colHeaders: ['Name', 'Email', 'Role', 'Password'],\n    columns: [\n      { type: 'text' },\n      { type: 'text' },\n      { type: 'text' },\n      { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n    ],\n    colWidths: [130, 190, 70, 130],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example3.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json
index d9548bfb6..f953ebb31 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input');\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(hotInstance, td, row, col, prop, value) {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [{ type: 'text' }, { type: 'text' }, { type: 'text' }, { editor: PasswordEditor, renderer: maskedRenderer }],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input');\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(hotInstance, td, row, col, prop, value) {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [{ type: 'text' }, { type: 'text' }, { type: 'text' }, { editor: PasswordEditor, renderer: maskedRenderer }],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json
index 52eaeb9e1..344a96c7e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: any\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [\n    { type: 'text' },\n    { type: 'text' },\n    { type: 'text' },\n    { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n  ],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: any\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [\n    { type: 'text' },\n    { type: 'text' },\n    { type: 'text' },\n    { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n  ],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json
index a50d69ea2..fcf69079e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n  init() {\n    this.select = this.hot.rootDocument.createElement('SELECT');\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n  prepare(row, col, prop, td, originalValue, cellProperties) {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n    const rawOptions = this.cellProperties.selectOptions ?? [];\n    const options = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n      : rawOptions;\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION');\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n  getValue() {\n    return this.select.value;\n  }\n  setValue(value) {\n    this.select.value = value;\n  }\n  open() {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n    s.margin = '0px';\n    s.display = '';\n    this.addHook('beforeKeyDown', (event) => {\n      const { selectedIndex, length } = this.select;\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        this.select[selectedIndex - 1].selected = true;\n        event.preventDefault();\n        // block the grid's default arrow-key actions\n        return false;\n      }\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        this.select[selectedIndex + 1].selected = true;\n        event.preventDefault();\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n  close() {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n  focus() {\n    this.select.focus();\n  }\n}\nconst PRIORITY_COLORS = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n  return (hotInstance, td, row, col, prop, value) => {\n    td.innerText = '';\n    if (value) {\n      const badge = hotInstance.rootDocument.createElement('span');\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value;\n      td.appendChild(badge);\n    }\n    return td;\n  };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    },\n    {\n      editor: SelectEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    },\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n  init() {\n    this.select = this.hot.rootDocument.createElement('SELECT');\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n  prepare(row, col, prop, td, originalValue, cellProperties) {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n    const rawOptions = this.cellProperties.selectOptions ?? [];\n    const options = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n      : rawOptions;\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION');\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n  getValue() {\n    return this.select.value;\n  }\n  setValue(value) {\n    this.select.value = value;\n  }\n  open() {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n    s.margin = '0px';\n    s.display = '';\n    this.addHook('beforeKeyDown', (event) => {\n      const { selectedIndex, length } = this.select;\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        this.select[selectedIndex - 1].selected = true;\n        event.preventDefault();\n        // block the grid's default arrow-key actions\n        return false;\n      }\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        this.select[selectedIndex + 1].selected = true;\n        event.preventDefault();\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n  close() {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n  focus() {\n    this.select.focus();\n  }\n}\nconst PRIORITY_COLORS = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n  return (hotInstance, td, row, col, prop, value) => {\n    td.innerText = '';\n    if (value) {\n      const badge = hotInstance.rootDocument.createElement('span');\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value;\n      td.appendChild(badge);\n    }\n    return td;\n  };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    },\n    {\n      editor: SelectEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    },\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.ts.json
index 72e4f0b20..580c456f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\n\nregisterAllModules();\n\nclass SelectEditor extends BaseEditor {\n  declare select: HTMLSelectElement;\n\n  init(): void {\n    this.select = this.hot.rootDocument.createElement('SELECT') as HTMLSelectElement;\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n\n  override prepare(\n    row: number,\n    col: number,\n    prop: number | string,\n    td: HTMLTableCellElement,\n    originalValue: any,\n    cellProperties: object\n  ): void {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n\n    const rawOptions = (this.cellProperties as any).selectOptions ?? [];\n    const options: Record<string, string> = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v: any) => [v, v]))\n      : rawOptions;\n\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION') as HTMLOptionElement;\n\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n\n  getValue(): string {\n    return this.select.value;\n  }\n\n  setValue(value: string): void {\n    this.select.value = value;\n  }\n\n  open(): void {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    (s as any)[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n    s.margin = '0px';\n    s.display = '';\n\n    this.addHook('beforeKeyDown', (event: KeyboardEvent) => {\n      const { selectedIndex, length } = this.select;\n\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        (this.select[selectedIndex - 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        (this.select[selectedIndex + 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n\n  close(): void {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n\n  focus(): void {\n    this.select.focus();\n  }\n}\n\nconst PRIORITY_COLORS: Record<string, string> = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record<string, string>) {\n  return (\n    hotInstance: Handsontable.Core,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number,\n    prop: string | number,\n    value: any\n  ): HTMLTableCellElement => {\n    td.innerText = '';\n\n    if (value) {\n      const badge = hotInstance.rootDocument.createElement('span');\n\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value as string;\n      td.appendChild(badge);\n    }\n\n    return td;\n  };\n}\n\nconst container = document.querySelector('#example2') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    } as any,\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    } as any,\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\n\nregisterAllModules();\n\nclass SelectEditor extends BaseEditor {\n  declare select: HTMLSelectElement;\n\n  init(): void {\n    this.select = this.hot.rootDocument.createElement('SELECT') as HTMLSelectElement;\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n\n  override prepare(\n    row: number,\n    col: number,\n    prop: number | string,\n    td: HTMLTableCellElement,\n    originalValue: any,\n    cellProperties: object\n  ): void {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n\n    const rawOptions = (this.cellProperties as any).selectOptions ?? [];\n    const options: Record<string, string> = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v: any) => [v, v]))\n      : rawOptions;\n\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION') as HTMLOptionElement;\n\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n\n  getValue(): string {\n    return this.select.value;\n  }\n\n  setValue(value: string): void {\n    this.select.value = value;\n  }\n\n  open(): void {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    (s as any)[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n    s.margin = '0px';\n    s.display = '';\n\n    this.addHook('beforeKeyDown', (event: KeyboardEvent) => {\n      const { selectedIndex, length } = this.select;\n\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        (this.select[selectedIndex - 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        (this.select[selectedIndex + 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n\n  close(): void {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n\n  focus(): void {\n    this.select.focus();\n  }\n}\n\nconst PRIORITY_COLORS: Record<string, string> = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record<string, string>) {\n  return (\n    hotInstance: Handsontable.Core,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number,\n    prop: string | number,\n    value: any\n  ): HTMLTableCellElement => {\n    td.innerText = '';\n\n    if (value) {\n      const badge = hotInstance.rootDocument.createElement('span');\n\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value as string;\n      td.appendChild(badge);\n    }\n\n    return td;\n  };\n}\n\nconst container = document.querySelector('#example2') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    } as any,\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    } as any,\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json
index fad72354b..51abd7d6b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { MouseEvent, useRef } from 'react';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\n\nconst EditorComponent = () => {\n  const mainElementRef = useRef<HTMLDivElement>(null);\n\n  const { value, setValue, finishEditing } = useHotEditor({\n    onOpen: () => {\n      if (!mainElementRef.current) return;\n\n      mainElementRef.current.style.display = 'block';\n    },\n    onClose: () => {\n      if (!mainElementRef.current) return;\n\n      mainElementRef.current.style.display = 'none';\n    },\n    onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n      const tdPosition = TD.getBoundingClientRect();\n\n      // As the `prepare` method is triggered after selecting\n      // any cell, we're updating the styles for the editor element,\n      // so it shows up in the correct position.\n      if (!mainElementRef.current) return;\n      mainElementRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n      mainElementRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n    },\n    onFocus: () => {},\n  });\n\n  const setLowerCase = () => {\n    setValue(value.toString().toLowerCase());\n    finishEditing();\n  };\n\n  const setUpperCase = () => {\n    setValue(value.toString().toUpperCase());\n    finishEditing();\n  };\n\n  const stopMousedownPropagation = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const buttonValue = value || '';\n\n  return (\n    <div\n      id=\"editorElement\"\n      ref={mainElementRef}\n      style={{\n        display: 'none',\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        background: '#fff',\n        border: '1px solid #000',\n        padding: '15px',\n        zIndex: 999,\n      }}\n      onMouseDown={stopMousedownPropagation}\n    >\n      <button onClick={setLowerCase.bind(this)}>{buttonValue.toLowerCase()}</button>\n      <button onClick={setUpperCase.bind(this)}>{buttonValue.toUpperCase()}</button>\n    </div>\n  );\n};\n\nconst data = [\n  ['Obrien Fischer'],\n  ['Alexandria Gordon'],\n  ['John Stafford'],\n  ['Regina Waters'],\n  ['Kay Bentley'],\n  ['Emerson Drake'],\n  ['Dean Stapleton'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn width={250} editor={EditorComponent} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example1.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { MouseEvent, useRef } from 'react';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\n\nconst EditorComponent = () => {\n  const mainElementRef = useRef<HTMLDivElement>(null);\n\n  const { value, setValue, finishEditing } = useHotEditor({\n    onOpen: () => {\n      if (!mainElementRef.current) return;\n\n      mainElementRef.current.style.display = 'block';\n    },\n    onClose: () => {\n      if (!mainElementRef.current) return;\n\n      mainElementRef.current.style.display = 'none';\n    },\n    onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n      const tdPosition = TD.getBoundingClientRect();\n\n      // As the `prepare` method is triggered after selecting\n      // any cell, we're updating the styles for the editor element,\n      // so it shows up in the correct position.\n      if (!mainElementRef.current) return;\n      mainElementRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n      mainElementRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n    },\n    onFocus: () => {},\n  });\n\n  const setLowerCase = () => {\n    setValue(value.toString().toLowerCase());\n    finishEditing();\n  };\n\n  const setUpperCase = () => {\n    setValue(value.toString().toUpperCase());\n    finishEditing();\n  };\n\n  const stopMousedownPropagation = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const buttonValue = value || '';\n\n  return (\n    <div\n      id=\"editorElement\"\n      ref={mainElementRef}\n      style={{\n        display: 'none',\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        background: '#fff',\n        border: '1px solid #000',\n        padding: '15px',\n        zIndex: 999,\n      }}\n      onMouseDown={stopMousedownPropagation}\n    >\n      <button onClick={setLowerCase.bind(this)}>{buttonValue.toLowerCase()}</button>\n      <button onClick={setUpperCase.bind(this)}>{buttonValue.toUpperCase()}</button>\n    </div>\n  );\n};\n\nconst data = [\n  ['Obrien Fischer'],\n  ['Alexandria Gordon'],\n  ['John Stafford'],\n  ['Regina Waters'],\n  ['Kay Bentley'],\n  ['Emerson Drake'],\n  ['Dean Stapleton'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn width={250} editor={EditorComponent} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example1.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json
index 664e4b8ff..0b3323368 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Class-based editors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      startRows={5}\n      columns={[\n        {\n          editor: CustomEditor,\n        },\n      ]}\n      colHeaders={true}\n      colWidths={200}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example2.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Class-based editors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      startRows={5}\n      columns={[\n        {\n          editor: CustomEditor,\n        },\n      ]}\n      colHeaders={true}\n      colWidths={200}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example2.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json
index fe8f9068a..6baa104e5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst data = [\n  ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n  ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n  ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n  ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n  ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Email', 'Role', 'Password']}\n      columns={[\n        { type: 'text' },\n        { type: 'text' },\n        { type: 'text' },\n        { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n      ]}\n      colWidths={[130, 190, 70, 130]}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example3.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst data = [\n  ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n  ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n  ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n  ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n  ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Email', 'Role', 'Password']}\n      columns={[\n        { type: 'text' },\n        { type: 'text' },\n        { type: 'text' },\n        { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n      ]}\n      colWidths={[130, 190, 70, 130]}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example3.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json
index 783e5bec1..aa725647e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [\n    { type: 'text' },\n    { type: 'text' },\n    { type: 'text' },\n    { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n  ],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-editor/vue/example1.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n  override createElements(): void {\n    super.createElements();\n    this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n    this.TEXTAREA.setAttribute('type', 'password');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.textareaStyle.width = '0';\n    this.textareaStyle.height = '0';\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nfunction maskedRenderer(\n  _instance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  td.innerText = value ? '●●●●●●●●' : '—';\n  td.style.letterSpacing = value ? '2px' : 'normal';\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n    ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n    ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n    ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n    ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n  ],\n  colHeaders: ['Name', 'Email', 'Role', 'Password'],\n  columns: [\n    { type: 'text' },\n    { type: 'text' },\n    { type: 'text' },\n    { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n  ],\n  colWidths: [130, 190, 70, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-editor/vue/example1.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json
index a96d7585e..52a6a268d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass SelectEditor extends BaseEditor {\n  declare select: HTMLSelectElement;\n\n  init(): void {\n    this.select = this.hot.rootDocument.createElement('SELECT') as HTMLSelectElement;\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n\n  override prepare(\n    row: number,\n    col: number,\n    prop: number | string,\n    td: HTMLTableCellElement,\n    originalValue: Handsontable.CellValue,\n    cellProperties: object\n  ): void {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n\n    const rawOptions = (this.cellProperties as any).selectOptions ?? []; // eslint-disable-line @typescript-eslint/no-explicit-any\n    const options: Record<string, string> = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v: string) => [v, v]))\n      : rawOptions;\n\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION') as HTMLOptionElement;\n\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n\n  getValue(): string {\n    return this.select.value;\n  }\n\n  setValue(value: string): void {\n    this.select.value = value;\n  }\n\n  open(): void {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    (s as any)[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`; // eslint-disable-line @typescript-eslint/no-explicit-any\n    s.margin = '0px';\n    s.display = '';\n\n    this.addHook('beforeKeyDown', (event: KeyboardEvent) => {\n      const { selectedIndex, length } = this.select;\n\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        (this.select[selectedIndex - 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        (this.select[selectedIndex + 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n\n  close(): void {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n\n  focus(): void {\n    this.select.focus();\n  }\n}\n\nconst PRIORITY_COLORS: Record<string, string> = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record<string, string>) {\n  return (\n    instance: Handsontable.Core,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: string\n  ): HTMLTableCellElement => {\n    td.innerText = '';\n\n    if (value) {\n      const badge = instance.rootDocument.createElement('span');\n\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value;\n      td.appendChild(badge);\n    }\n\n    return td;\n  };\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    } as any, // eslint-disable-line @typescript-eslint/no-explicit-any\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    } as any, // eslint-disable-line @typescript-eslint/no-explicit-any\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n</style>"},"docsPath":"guides/cell-functions/cell-editor/vue/example2.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass SelectEditor extends BaseEditor {\n  declare select: HTMLSelectElement;\n\n  init(): void {\n    this.select = this.hot.rootDocument.createElement('SELECT') as HTMLSelectElement;\n    this.select.setAttribute('data-hot-input', 'true');\n    this.select.classList.add('htSelectEditor');\n    this.select.style.display = 'none';\n    this.hot.rootElement.appendChild(this.select);\n  }\n\n  override prepare(\n    row: number,\n    col: number,\n    prop: number | string,\n    td: HTMLTableCellElement,\n    originalValue: Handsontable.CellValue,\n    cellProperties: object\n  ): void {\n    super.prepare(row, col, prop, td, originalValue, cellProperties);\n\n    const rawOptions = (this.cellProperties as any).selectOptions ?? []; // eslint-disable-line @typescript-eslint/no-explicit-any\n    const options: Record<string, string> = Array.isArray(rawOptions)\n      ? Object.fromEntries(rawOptions.map((v: string) => [v, v]))\n      : rawOptions;\n\n    this.select.innerText = '';\n    Object.keys(options).forEach((key) => {\n      const option = this.hot.rootDocument.createElement('OPTION') as HTMLOptionElement;\n\n      option.value = key;\n      option.innerText = options[key];\n      this.select.appendChild(option);\n    });\n  }\n\n  getValue(): string {\n    return this.select.value;\n  }\n\n  setValue(value: string): void {\n    this.select.value = value;\n  }\n\n  open(): void {\n    const { top, start, width, height } = this.getEditedCellRect();\n    const s = this.select.style;\n\n    s.height = `${height}px`;\n    s.minWidth = `${width}px`;\n    s.top = `${top}px`;\n    (s as any)[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`; // eslint-disable-line @typescript-eslint/no-explicit-any\n    s.margin = '0px';\n    s.display = '';\n\n    this.addHook('beforeKeyDown', (event: KeyboardEvent) => {\n      const { selectedIndex, length } = this.select;\n\n      if (event.keyCode === 38 && selectedIndex > 0) {\n        (this.select[selectedIndex - 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n\n      if (event.keyCode === 40 && selectedIndex < length - 1) {\n        (this.select[selectedIndex + 1] as HTMLOptionElement).selected = true;\n        event.preventDefault();\n\n        // block the grid's default arrow-key actions\n        return false;\n      }\n    });\n  }\n\n  close(): void {\n    this.select.style.display = 'none';\n    this.clearHooks();\n  }\n\n  focus(): void {\n    this.select.focus();\n  }\n}\n\nconst PRIORITY_COLORS: Record<string, string> = {\n  Low: '#22c55e',\n  Medium: '#f59e0b',\n  High: '#ef4444',\n  Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  'To Do': '#6b7280',\n  'In Progress': '#3b82f6',\n  Review: '#f59e0b',\n  Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record<string, string>) {\n  return (\n    instance: Handsontable.Core,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: string\n  ): HTMLTableCellElement => {\n    td.innerText = '';\n\n    if (value) {\n      const badge = instance.rootDocument.createElement('span');\n\n      badge.className = 'htSelectBadge';\n      badge.style.background = colorMap[value] ?? '#6b7280';\n      badge.innerText = value;\n      td.appendChild(badge);\n    }\n\n    return td;\n  };\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Migrate database schema', 'High', 'In Progress'],\n    ['Update API documentation', 'Medium', 'To Do'],\n    ['Fix authentication bug', 'Critical', 'Review'],\n    ['Add dark mode support', 'Low', 'Done'],\n    ['Improve test coverage', 'Medium', 'In Progress'],\n    ['Deploy to staging server', 'High', 'To Do'],\n    ['Refactor billing module', 'Medium', 'Done'],\n  ],\n  colHeaders: ['Task', 'Priority', 'Status'],\n  columns: [\n    { type: 'text' },\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(PRIORITY_COLORS),\n      selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n    } as any, // eslint-disable-line @typescript-eslint/no-explicit-any\n    {\n      editor: SelectEditor as typeof BaseEditor,\n      renderer: badgeRenderer(STATUS_COLORS),\n      selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n    } as any, // eslint-disable-line @typescript-eslint/no-explicit-any\n  ],\n  colWidths: [220, 110, 130],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.htSelectEditor {\n  /* Enables dimension changes for <select> in WebKit browsers */\n  -webkit-appearance: menulist-button !important;\n  position: absolute;\n  width: auto;\n  z-index: 300;\n}\n\n.htSelectBadge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n</style>"},"docsPath":"guides/cell-functions/cell-editor/vue/example2.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json
index ebfac0abf..34751bbcd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nconst stockRenderer = (\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement => {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n};\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nconst stockValidator = (value: Handsontable.CellValue, callback: (valid: boolean) => void): void => {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n};\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  // ViewEncapsulation.None makes these styles global so they apply to DOM\n  // elements created by the Handsontable renderer outside Angular's component tree.\n  styles: [`\n    .htStockBar {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 0 4px;\n      height: 100%;\n      box-sizing: border-box;\n    }\n    .htStockBarTrack {\n      flex: 1;\n      height: 8px;\n      background: var(--ht-background-secondary-color);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .htStockBarFill {\n      height: 100%;\n      border-radius: 4px;\n      min-width: 2px;\n    }\n    .htStockBarLabel {\n      font-size: 11px;\n      font-variant-numeric: tabular-nums;\n      min-width: 28px;\n      text-align: right;\n      white-space: nowrap;\n    }\n  `],\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n  readonly hotData = [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    this.hotSettings = {\n      colHeaders: ['Product', 'Price', 'Stock'],\n      columns: [\n        // Built-in type bundles renderer + editor + no validator\n        { type: 'text' },\n        // Built-in type bundles renderer + editor + validator with custom format\n        { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n        // Mixed: custom renderer, built-in numeric editor, custom validator\n        {\n          renderer: stockRenderer,\n          editor: 'numeric',\n          validator: stockValidator,\n          allowInvalid: false,\n        },\n      ],\n      colWidths: [120, 90, 200],\n      rowHeaders: true,\n      height: 'auto',\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-function/angular/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nconst stockRenderer = (\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement => {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n};\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nconst stockValidator = (value: Handsontable.CellValue, callback: (valid: boolean) => void): void => {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n};\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  // ViewEncapsulation.None makes these styles global so they apply to DOM\n  // elements created by the Handsontable renderer outside Angular's component tree.\n  styles: [`\n    .htStockBar {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 0 4px;\n      height: 100%;\n      box-sizing: border-box;\n    }\n    .htStockBarTrack {\n      flex: 1;\n      height: 8px;\n      background: var(--ht-background-secondary-color);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .htStockBarFill {\n      height: 100%;\n      border-radius: 4px;\n      min-width: 2px;\n    }\n    .htStockBarLabel {\n      font-size: 11px;\n      font-variant-numeric: tabular-nums;\n      min-width: 28px;\n      text-align: right;\n      white-space: nowrap;\n    }\n  `],\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n  readonly hotData = [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    this.hotSettings = {\n      colHeaders: ['Product', 'Price', 'Stock'],\n      columns: [\n        // Built-in type bundles renderer + editor + no validator\n        { type: 'text' },\n        // Built-in type bundles renderer + editor + validator with custom format\n        { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n        // Mixed: custom renderer, built-in numeric editor, custom validator\n        {\n          renderer: stockRenderer,\n          editor: 'numeric',\n          validator: stockValidator,\n          allowInvalid: false,\n        },\n      ],\n      colWidths: [120, 90, 200],\n      rowHeaders: true,\n      height: 'auto',\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-function/angular/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json
index f19266275..b772587f8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(hotInstance, td, row, col, prop, value) {\n  const num = parseInt(value, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value, callback) {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    },\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.js","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(hotInstance, td, row, col, prop, value) {\n  const num = parseInt(value, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value, callback) {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    },\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.js","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json
index e45b0614e..3aca03f25 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: any\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: any, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    } as any,\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: any\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: any, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    } as any,\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json
index 8d5db2434..35d523b38 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: Handsontable.CellValue, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst data = [\n  ['Apple', 1.2, 820],\n  ['Banana', 0.5, 280],\n  ['Cherry', 3.0, 45],\n  ['Mango', 2.5, 960],\n  ['Pear', 0.8, 170],\n  ['Blueberry', 4.5, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Price', 'Stock']}\n      columns={[\n        // Built-in type bundles renderer + editor + no validator\n        { type: 'text' },\n        // Built-in type bundles renderer + editor + validator with custom format\n        { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n        // Mixed: custom renderer, built-in numeric editor, custom validator\n        {\n          renderer: stockRenderer,\n          editor: 'numeric',\n          validator: stockValidator,\n          allowInvalid: false,\n        } as Handsontable.ColumnSettings,\n      ]}\n      colWidths={[120, 90, 200]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/react/example1.tsx","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: Handsontable.CellValue, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst data = [\n  ['Apple', 1.2, 820],\n  ['Banana', 0.5, 280],\n  ['Cherry', 3.0, 45],\n  ['Mango', 2.5, 960],\n  ['Pear', 0.8, 170],\n  ['Blueberry', 4.5, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Price', 'Stock']}\n      columns={[\n        // Built-in type bundles renderer + editor + no validator\n        { type: 'text' },\n        // Built-in type bundles renderer + editor + validator with custom format\n        { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n        // Mixed: custom renderer, built-in numeric editor, custom validator\n        {\n          renderer: stockRenderer,\n          editor: 'numeric',\n          validator: stockValidator,\n          allowInvalid: false,\n        } as Handsontable.ColumnSettings,\n      ]}\n      colWidths={[120, 90, 200]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/react/example1.tsx","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json
index 26b536e12..954f29826 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: unknown, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    },\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}\n</style>"},"docsPath":"guides/cell-functions/cell-function/vue/example1.vue","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n  hotInstance: Handsontable.Core,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const num = parseInt(value as string, 10);\n  const valid = !isNaN(num) && num >= 0;\n  const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n  const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n  td.innerText = '';\n\n  const wrapper = hotInstance.rootDocument.createElement('div');\n\n  wrapper.className = 'htStockBar';\n\n  const track = hotInstance.rootDocument.createElement('div');\n\n  track.className = 'htStockBarTrack';\n\n  const fill = hotInstance.rootDocument.createElement('div');\n\n  fill.className = 'htStockBarFill';\n  fill.style.width = `${pct}%`;\n  fill.style.background = color;\n\n  const label = hotInstance.rootDocument.createElement('span');\n\n  label.className = 'htStockBarLabel';\n  label.innerText = valid ? `${num}` : '—';\n  track.appendChild(fill);\n  wrapper.appendChild(track);\n  wrapper.appendChild(label);\n  td.appendChild(wrapper);\n\n  return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: unknown, callback: (valid: boolean) => void): void {\n  const num = Number(value);\n\n  callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Apple', 1.2, 820],\n    ['Banana', 0.5, 280],\n    ['Cherry', 3.0, 45],\n    ['Mango', 2.5, 960],\n    ['Pear', 0.8, 170],\n    ['Blueberry', 4.5, 15],\n  ],\n  colHeaders: ['Product', 'Price', 'Stock'],\n  columns: [\n    // Built-in type bundles renderer + editor + no validator\n    { type: 'text' },\n    // Built-in type bundles renderer + editor + validator with custom format\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    // Mixed: custom renderer, built-in numeric editor, custom validator\n    {\n      renderer: stockRenderer,\n      editor: 'numeric',\n      validator: stockValidator,\n      allowInvalid: false,\n    },\n  ],\n  colWidths: [120, 90, 200],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.htStockBar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.htStockBarTrack {\n  flex: 1;\n  height: 8px;\n  background: var(--ht-background-secondary-color);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.htStockBarFill {\n  height: 100%;\n  border-radius: 4px;\n  min-width: 2px;\n}\n\n.htStockBarLabel {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  min-width: 28px;\n  text-align: right;\n  white-space: nowrap;\n}\n</style>"},"docsPath":"guides/cell-functions/cell-function/vue/example1.vue","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json
index 0ee769aab..74b221316 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-cover-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<img [src]=\"value\" (mousedown)=\"$event.preventDefault()\"/>`,\n})\nexport class CoverRendererComponent extends HotCellRendererComponent<string> {\n}\n\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n  }\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: CoverRendererComponent },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-cover-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<img [src]=\"value\" (mousedown)=\"$event.preventDefault()\"/>`,\n})\nexport class CoverRendererComponent extends HotCellRendererComponent<string> {\n}\n\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n  }\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: CoverRendererComponent },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json
index bc4759b11..3c04197b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n\n    <ng-template #myCellTpl let-value let-row=\"row\" let-col=\"col\">\n      <img [src]=\"value\" (mousedown)=\"$event.preventDefault()\"/>\n    </ng-template>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef<HTMLInputElement>;\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: this.myCellTpl },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example2.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n\n    <ng-template #myCellTpl let-value let-row=\"row\" let-col=\"col\">\n      <img [src]=\"value\" (mousedown)=\"$event.preventDefault()\"/>\n    </ng-template>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef<HTMLInputElement>;\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: this.myCellTpl },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example2.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json
index a5f8db134..e9711defc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-color-renderer',\n  template: `<span [style.color]=\"textColor\">{{value}}</span>`,\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent<string, {\n  textColor?: string,\n  textColorFn?: (value: string) => string\n}> implements OnInit {\n  textColor = '';\n\n  ngOnInit() {\n    const props = this.getProps();\n    this.textColor = props.textColor ?? 'black';\n\n    if (props.textColorFn && typeof props.textColorFn === 'function') {\n      this.textColor = props.textColorFn(this.value);\n    }\n  }\n\n}\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      rate: 3\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      rate: 9\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      rate: 5\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colWidths: [200, 400, 80],\n    colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n    height: 'auto',\n    columns: [\n      { data: 'title', renderer: ColorRendererComponent, rendererProps: { textColor: 'blue' } },\n      { data: 'description', renderer: ColorRendererComponent, rendererProps: { textColor: 'orange' } },\n      { data: 'rate', renderer: ColorRendererComponent, rendererProps: { textColorFn: (value: string) => +value <= 5 ? 'red' : 'inherit' } },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example3.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-color-renderer',\n  template: `<span [style.color]=\"textColor\">{{value}}</span>`,\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent<string, {\n  textColor?: string,\n  textColorFn?: (value: string) => string\n}> implements OnInit {\n  textColor = '';\n\n  ngOnInit() {\n    const props = this.getProps();\n    this.textColor = props.textColor ?? 'black';\n\n    if (props.textColorFn && typeof props.textColorFn === 'function') {\n      this.textColor = props.textColorFn(this.value);\n    }\n  }\n\n}\n\n@Component({\n  selector: 'app-example3',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      rate: 3\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      rate: 9\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      rate: 5\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colWidths: [200, 400, 80],\n    colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n    height: 'auto',\n    columns: [\n      { data: 'title', renderer: ColorRendererComponent, rendererProps: { textColor: 'blue' } },\n      { data: 'description', renderer: ColorRendererComponent, rendererProps: { textColor: 'orange' } },\n      { data: 'rate', renderer: ColorRendererComponent, rendererProps: { textColorFn: (value: string) => +value <= 5 ? 'red' : 'inherit' } },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example3.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json
index 7a76130a2..c0be82e5e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, OnInit } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst coverRenderer = (_instance: Handsontable, td: HTMLTableCellElement, _row: number, _col: number, _prop: string | number, value: string) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n  }\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: coverRenderer },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, OnInit } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst coverRenderer = (_instance: Handsontable, td: HTMLTableCellElement, _row: number, _col: number, _prop: string | number, value: string) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n  }\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 400, 80],\n      colHeaders: ['Title', 'Description', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'cover', renderer: coverRenderer },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json
index 34ccf3044..16f01f245 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nfunction safeHtmlRenderer(\n  _instance: Handsontable,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: string,\n  _cellProperties: Handsontable.CellProperties\n) {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n  return td;\n}\n\nfunction coverRenderer(\n  _instance: Handsontable,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: string,\n  _cellProperties: Handsontable.CellProperties\n) {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n}\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      comments: 'I would rate it ★★★★☆',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      comments: 'This is the book about JavaScript',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      comments:\n        'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    }\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 200, 200, 80],\n      colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'comments', renderer: safeHtmlRenderer },\n        { data: 'cover', renderer: coverRenderer },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nfunction safeHtmlRenderer(\n  _instance: Handsontable,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: string,\n  _cellProperties: Handsontable.CellProperties\n) {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n  return td;\n}\n\nfunction coverRenderer(\n  _instance: Handsontable,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: string,\n  _cellProperties: Handsontable.CellProperties\n) {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n}\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    @if (hotSettings) {\n      <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n\n  readonly hotData = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      comments: 'I would rate it ★★★★☆',\n      cover:\n        '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      comments: 'This is the book about JavaScript',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title:\n        '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      comments:\n        'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    }\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngAfterViewInit() {\n    this.hotSettings = {\n      colWidths: [200, 200, 200, 80],\n      colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n      height: 'auto',\n      columns: [\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'comments', renderer: safeHtmlRenderer },\n        { data: 'cover', renderer: coverRenderer },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json
index 149a9446a..4b87dca70 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example6',\n  template: `\n\n    <div\n      id=\"exampleContainer5\"\n      (mouseup)=\"exampleContainerMouseupCallback($event)\"\n    >\n      @if (hotSettings) {\n        <hot-table [settings]=\"hotSettings!\"></hot-table>\n      }\n    </div>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  isChecked = false;\n\n  hotSettings!: GridSettings;\n\n  ngAfterViewInit() {\n    const componentThis = this;\n\n    function customRenderer(_instance: Handsontable, td: HTMLTableCellElement) {\n      textRenderer.apply(componentThis, arguments as unknown as Parameters<typeof textRenderer>);\n\n      if (componentThis.isChecked) {\n        td.style.backgroundColor = 'yellow';\n      } else {\n        td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n      }\n    }\n\n    this.hotSettings = {\n      height: 'auto',\n      columns: [{}, { renderer: customRenderer }],\n      colHeaders(col: number) {\n        return col === 0\n          ? '<b>Bold</b> and <em>Beautiful</em>'\n          : `Some <input type=\"checkbox\" class=\"checker\" ${\n            componentThis.isChecked ? 'checked=\"checked\"' : ''\n          }> checkbox`;\n      },\n      sanitizer: sanitizeHeader,\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n\n  exampleContainerMouseupCallback = (event: MouseEvent) => {\n    const hot = this.hotTable.hotInstance!;\n    const target = event.target as HTMLInputElement | null;\n\n    if (target?.nodeName == 'INPUT' && target.className == 'checker') {\n      this.isChecked = !target.checked;\n      hot?.render();\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example6',\n  template: `\n\n    <div\n      id=\"exampleContainer5\"\n      (mouseup)=\"exampleContainerMouseupCallback($event)\"\n    >\n      @if (hotSettings) {\n        <hot-table [settings]=\"hotSettings!\"></hot-table>\n      }\n    </div>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  isChecked = false;\n\n  hotSettings!: GridSettings;\n\n  ngAfterViewInit() {\n    const componentThis = this;\n\n    function customRenderer(_instance: Handsontable, td: HTMLTableCellElement) {\n      textRenderer.apply(componentThis, arguments as unknown as Parameters<typeof textRenderer>);\n\n      if (componentThis.isChecked) {\n        td.style.backgroundColor = 'yellow';\n      } else {\n        td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n      }\n    }\n\n    this.hotSettings = {\n      height: 'auto',\n      columns: [{}, { renderer: customRenderer }],\n      colHeaders(col: number) {\n        return col === 0\n          ? '<b>Bold</b> and <em>Beautiful</em>'\n          : `Some <input type=\"checkbox\" class=\"checker\" ${\n            componentThis.isChecked ? 'checked=\"checked\"' : ''\n          }> checkbox`;\n      },\n      sanitizer: sanitizeHeader,\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n\n  exampleContainerMouseupCallback = (event: MouseEvent) => {\n    const hot = this.hotTable.hotInstance!;\n    const target = event.target as HTMLInputElement | null;\n\n    if (target?.nodeName == 'INPUT' && target.className == 'checker') {\n      this.isChecked = !target.checked;\n      hot?.render();\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json
index f9aace599..a3adf1880 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Format symbols outside the Intl standard · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example7-cell-renderer></example7-cell-renderer>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example7-cell-renderer',\n  template: `\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    data: this.data,\n    colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n    columns: [\n      { data: 'asset' },\n      {\n        data: 'btcValue',\n        type: 'numeric',\n        // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n        // `valueFormatter` prepends the symbol instead.\n        valueFormatter(value: unknown) {\n          // `type: 'numeric'` turns numeric input into a number, but invalid input\n          // stays a string, so check the type before calling `toFixed()`.\n          if (typeof value !== 'number') {\n            return value;\n          }\n\n          return `₿${value.toFixed(4)}`;\n        },\n      },\n      {\n        data: 'portfolioShare',\n        // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n        // appends the symbol manually.\n        valueFormatter(value: unknown) {\n          return `${value}‰`;\n        },\n      },\n    ],\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example7.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example7","exampleTitle":"Format symbols outside the Intl standard","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Format symbols outside the Intl standard · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example7-cell-renderer></example7-cell-renderer>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example7-cell-renderer',\n  template: `\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    data: this.data,\n    colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n    columns: [\n      { data: 'asset' },\n      {\n        data: 'btcValue',\n        type: 'numeric',\n        // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n        // `valueFormatter` prepends the symbol instead.\n        valueFormatter(value: unknown) {\n          // `type: 'numeric'` turns numeric input into a number, but invalid input\n          // stays a string, so check the type before calling `toFixed()`.\n          if (typeof value !== 'number') {\n            return value;\n          }\n\n          return `₿${value.toFixed(4)}`;\n        },\n      },\n      {\n        data: 'portfolioShare',\n        // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n        // appends the symbol manually.\n        valueFormatter(value: unknown) {\n          return `${value}‰`;\n        },\n      },\n    ],\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example7.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example7","exampleTitle":"Format symbols outside the Intl standard","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json
index 054354c43..626ba28b7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n};\n\nconst coverRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n};\n\nconst coverRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json
index b6d0e7ade..0b06bead6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Book {\n  title: string;\n  description: string;\n  comments: string;\n  cover: string;\n}\n\nconst data: Book[] = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Book {\n  title: string;\n  description: string;\n  comments: string;\n  cover: string;\n}\n\nconst data: Book[] = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value;\n\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json
index 707fb4271..1b05df887 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleContainer5\">\n    <div id=\"example5\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5');\nconst container = document.querySelector('#example5');\nconst customRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  if (isChecked) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hot = new Handsontable(container, {\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n  if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n    event.stopPropagation();\n  }\n});\nexampleContainer.addEventListener('mouseup', (event) => {\n  if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n    isChecked = !event.target.checked;\n    hot.render();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleContainer5\">\n    <div id=\"example5\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5');\nconst container = document.querySelector('#example5');\nconst customRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  if (isChecked) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hot = new Handsontable(container, {\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n  if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n    event.stopPropagation();\n  }\n});\nexampleContainer.addEventListener('mouseup', (event) => {\n  if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n    isChecked = !event.target.checked;\n    hot.render();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json
index 0dfcbbece..907beee92 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleContainer5\">\n    <div id=\"example5\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5')!;\nconst container = document.querySelector('#example5')!;\n\nconst customRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  if (isChecked) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hot = new Handsontable(container, {\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n  if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n    event.stopPropagation();\n  }\n});\n\nexampleContainer.addEventListener('mouseup', (event) => {\n  if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n    isChecked = !(event.target as HTMLInputElement).checked;\n    hot.render();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleContainer5\">\n    <div id=\"example5\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5')!;\nconst container = document.querySelector('#example5')!;\n\nconst customRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  if (isChecked) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hot = new Handsontable(container, {\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n  if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n    event.stopPropagation();\n  }\n});\n\nexampleContainer.addEventListener('mouseup', (event) => {\n  if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n    isChecked = !(event.target as HTMLInputElement).checked;\n    hot.render();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json
index 1076f99e7..a5763b206 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n    columns: [\n        { data: 'asset' },\n        {\n            data: 'btcValue',\n            type: 'numeric',\n            // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n            // `valueFormatter` prepends the symbol instead.\n            valueFormatter(value) {\n                // `type: 'numeric'` turns numeric input into a number, but invalid input\n                // stays a string, so check the type before calling `toFixed()`.\n                if (typeof value !== 'number') {\n                    return value;\n                }\n                return `₿${value.toFixed(4)}`;\n            },\n        },\n        {\n            data: 'portfolioShare',\n            // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n            // appends the symbol manually.\n            valueFormatter(value) {\n                return `${value}‰`;\n            },\n        },\n    ],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n    columns: [\n        { data: 'asset' },\n        {\n            data: 'btcValue',\n            type: 'numeric',\n            // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n            // `valueFormatter` prepends the symbol instead.\n            valueFormatter(value) {\n                // `type: 'numeric'` turns numeric input into a number, but invalid input\n                // stays a string, so check the type before calling `toFixed()`.\n                if (typeof value !== 'number') {\n                    return value;\n                }\n                return `₿${value.toFixed(4)}`;\n            },\n        },\n        {\n            data: 'portfolioShare',\n            // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n            // appends the symbol manually.\n            valueFormatter(value) {\n                return `${value}‰`;\n            },\n        },\n    ],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json
index f0459f2b7..f4aaf6d4a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Holding {\n  asset: string;\n  btcValue: number;\n  portfolioShare: number;\n}\n\nconst data: Holding[] = [\n  { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n  { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n  { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n  { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n  { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n  columns: [\n    { data: 'asset' },\n    {\n      data: 'btcValue',\n      type: 'numeric',\n      // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n      // `valueFormatter` prepends the symbol instead.\n      valueFormatter(value) {\n        // `type: 'numeric'` turns numeric input into a number, but invalid input\n        // stays a string, so check the type before calling `toFixed()`.\n        if (typeof value !== 'number') {\n          return value;\n        }\n\n        return `₿${value.toFixed(4)}`;\n      },\n    },\n    {\n      data: 'portfolioShare',\n      // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n      // appends the symbol manually.\n      valueFormatter(value) {\n        return `${value}‰`;\n      },\n    },\n  ],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Holding {\n  asset: string;\n  btcValue: number;\n  portfolioShare: number;\n}\n\nconst data: Holding[] = [\n  { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n  { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n  { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n  { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n  { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n  columns: [\n    { data: 'asset' },\n    {\n      data: 'btcValue',\n      type: 'numeric',\n      // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n      // `valueFormatter` prepends the symbol instead.\n      valueFormatter(value) {\n        // `type: 'numeric'` turns numeric input into a number, but invalid input\n        // stays a string, so check the type before calling `toFixed()`.\n        if (typeof value !== 'number') {\n          return value;\n        }\n\n        return `₿${value.toFixed(4)}`;\n      },\n    },\n    {\n      data: 'portfolioShare',\n      // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n      // appends the symbol manually.\n      valueFormatter(value) {\n        return `${value}‰`;\n      },\n    },\n  ],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json
index 1692b051f..c1b57766d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\n// your renderer component\nconst RendererComponent = (props: RendererProps) => {\n  // the available renderer-related props are:\n  // - `row` (row index)\n  // - `col` (column index)\n  // - `prop` (column property name)\n  // - `TD` (the HTML cell element)\n  // - `cellProperties` (the `cellProperties` object for the edited cell)\n  return (\n    <>\n      <i style={{ color: '#a9a9a9' }}>\n        Row: {props.row}, column: {props.col},\n      </i>{' '}\n      value: {props.value}\n    </>\n  );\n};\n\nconst hotData = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={hotData}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={false}\n      autoColumnSize={false}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn width={250} renderer={RendererComponent} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example1.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\n// your renderer component\nconst RendererComponent = (props: RendererProps) => {\n  // the available renderer-related props are:\n  // - `row` (row index)\n  // - `col` (column index)\n  // - `prop` (column property name)\n  // - `TD` (the HTML cell element)\n  // - `cellProperties` (the `cellProperties` object for the edited cell)\n  return (\n    <>\n      <i style={{ color: '#a9a9a9' }}>\n        Row: {props.row}, column: {props.col},\n      </i>{' '}\n      value: {props.value}\n    </>\n  );\n};\n\nconst hotData = [\n  ['A1', 'B1', 'C1', 'D1', 'E1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5'],\n  ['A6', 'B6', 'C6', 'D6', 'E6'],\n  ['A7', 'B7', 'C7', 'D7', 'E7'],\n  ['A8', 'B8', 'C8', 'D8', 'E8'],\n  ['A9', 'B9', 'C9', 'D9', 'E9'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={hotData}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={false}\n      autoColumnSize={false}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn width={250} renderer={RendererComponent} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example1.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json
index a624dee18..4a65ac36d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useContext, MouseEvent, createContext } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\n// a component\nconst HighlightContext = createContext(false);\n\n// a renderer component\nfunction CustomRenderer(props: RendererProps) {\n  const darkMode = useContext(HighlightContext);\n\n  if (!props.TD) return;\n\n  if (darkMode) {\n    props.TD.className = 'dark';\n  } else {\n    props.TD.className = '';\n  }\n\n  return <div>{props.value}</div>;\n}\n\nconst data = [['A1'], ['A2'], ['A3'], ['A4'], ['A5'], ['A6'], ['A7'], ['A8'], ['A9'], ['A10']];\n\nconst ExampleComponent = () => {\n  const [darkMode, setDarkMode] = useState(false);\n\n  const toggleDarkMode = (event: MouseEvent) => {\n    setDarkMode((event.target as HTMLInputElement).checked);\n  };\n\n  return (\n    <HighlightContext.Provider value={darkMode}>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" onClick={toggleDarkMode} /> Dark mode\n          </label>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        autoRowSize={false}\n        autoColumnSize={false}\n        height=\"auto\"\n        licenseKey={'non-commercial-and-evaluation'}\n      >\n        <HotColumn renderer={CustomRenderer} />\n      </HotTable>\n    </HighlightContext.Provider>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.dark {\n  background: #000 !important;\n  color: #fff !important;\n}\n\n#example2 .handsontable td {\n  background: #fff !important;\n  color: #000 !important;\n}"},"docsPath":"guides/cell-functions/cell-renderer/react/example2.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useContext, MouseEvent, createContext } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\n// a component\nconst HighlightContext = createContext(false);\n\n// a renderer component\nfunction CustomRenderer(props: RendererProps) {\n  const darkMode = useContext(HighlightContext);\n\n  if (!props.TD) return;\n\n  if (darkMode) {\n    props.TD.className = 'dark';\n  } else {\n    props.TD.className = '';\n  }\n\n  return <div>{props.value}</div>;\n}\n\nconst data = [['A1'], ['A2'], ['A3'], ['A4'], ['A5'], ['A6'], ['A7'], ['A8'], ['A9'], ['A10']];\n\nconst ExampleComponent = () => {\n  const [darkMode, setDarkMode] = useState(false);\n\n  const toggleDarkMode = (event: MouseEvent) => {\n    setDarkMode((event.target as HTMLInputElement).checked);\n  };\n\n  return (\n    <HighlightContext.Provider value={darkMode}>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" onClick={toggleDarkMode} /> Dark mode\n          </label>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        autoRowSize={false}\n        autoColumnSize={false}\n        height=\"auto\"\n        licenseKey={'non-commercial-and-evaluation'}\n      >\n        <HotColumn renderer={CustomRenderer} />\n      </HotTable>\n    </HighlightContext.Provider>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.dark {\n  background: #000 !important;\n  color: #fff !important;\n}\n\n#example2 .handsontable td {\n  background: #fff !important;\n  color: #000 !important;\n}"},"docsPath":"guides/cell-functions/cell-renderer/react/example2.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json
index 3824ec926..4a7794d55 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n  ['A2', '/docs/img/examples/javascript-the-good-parts.jpg'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      data={data}\n      columns={[\n        {},\n        {\n          renderer(instance, td, row, col, prop, value, cellProperties) {\n            const img = document.createElement('img');\n\n            img.src = value;\n\n            img.addEventListener('mousedown', (event) => {\n              event.preventDefault();\n            });\n\n            td.innerText = '';\n            td.appendChild(img);\n\n            return td;\n          },\n        },\n      ]}\n      colHeaders={true}\n      rowHeights={55}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example3.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n  ['A2', '/docs/img/examples/javascript-the-good-parts.jpg'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"hot\"\n      data={data}\n      columns={[\n        {},\n        {\n          renderer(instance, td, row, col, prop, value, cellProperties) {\n            const img = document.createElement('img');\n\n            img.src = value;\n\n            img.addEventListener('mousedown', (event) => {\n              event.preventDefault();\n            });\n\n            td.innerText = '';\n            td.appendChild(img);\n\n            return td;\n          },\n        },\n      ]}\n      colHeaders={true}\n      rowHeights={55}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example3.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json
index d06b143f3..39068fb15 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      comments: 'I would rate it ★★★★☆',\n      cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      comments: 'This is the book about JavaScript',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      comments:\n        'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  function safeHtmlRenderer(\n    _instance: Handsontable,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue,\n    _cellProperties: Handsontable.CellProperties\n  ) {\n    // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n    // Sanitize the \"value\" before passing it to the innerHTML property.\n    td.innerHTML = value;\n  }\n\n  function coverRenderer(\n    _instance: Handsontable,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue,\n    _cellProperties: Handsontable.CellProperties\n  ) {\n    const img = document.createElement('img');\n\n    img.src = value;\n\n    img.addEventListener('mousedown', (event) => {\n      event.preventDefault();\n    });\n\n    td.innerText = '';\n    td.appendChild(img);\n\n    return td;\n  }\n\n  return (\n    <HotTable\n      data={data}\n      colWidths={[200, 200, 200, 80]}\n      colHeaders={['Title', 'Description', 'Comments', 'Cover']}\n      height=\"auto\"\n      columns={[\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'comments', renderer: safeHtmlRenderer },\n        { data: 'cover', renderer: coverRenderer },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example4.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    {\n      title:\n        '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n      description:\n        'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n      comments: 'I would rate it ★★★★☆',\n      cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n    },\n    {\n      title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n      description:\n        'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n      comments: 'This is the book about JavaScript',\n      cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n    },\n    {\n      title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n      description:\n        '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n      comments:\n        'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n      cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n    },\n  ];\n\n  function safeHtmlRenderer(\n    _instance: Handsontable,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue,\n    _cellProperties: Handsontable.CellProperties\n  ) {\n    // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n    // Sanitize the \"value\" before passing it to the innerHTML property.\n    td.innerHTML = value;\n  }\n\n  function coverRenderer(\n    _instance: Handsontable,\n    td: HTMLTableCellElement,\n    _row: number,\n    _col: number,\n    _prop: string | number,\n    value: Handsontable.CellValue,\n    _cellProperties: Handsontable.CellProperties\n  ) {\n    const img = document.createElement('img');\n\n    img.src = value;\n\n    img.addEventListener('mousedown', (event) => {\n      event.preventDefault();\n    });\n\n    td.innerText = '';\n    td.appendChild(img);\n\n    return td;\n  }\n\n  return (\n    <HotTable\n      data={data}\n      colWidths={[200, 200, 200, 80]}\n      colHeaders={['Title', 'Description', 'Comments', 'Cover']}\n      height=\"auto\"\n      columns={[\n        { data: 'title', renderer: 'html' },\n        { data: 'description', renderer: 'html' },\n        { data: 'comments', renderer: safeHtmlRenderer },\n        { data: 'cover', renderer: coverRenderer },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example4.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json
index 0ba5bda12..bf3e72384 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  let isChecked = false;\n\n  function customRenderer(this: Handsontable, _instance: Handsontable, td: HTMLTableCellElement) {\n    textRenderer.apply(this, arguments as any);\n\n    if (isChecked) {\n      td.style.backgroundColor = 'yellow';\n    } else {\n      td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n    }\n  }\n\n  const exampleContainerMouseupCallback = (event: MouseEvent) => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (\n      (event.target as HTMLInputElement).nodeName == 'INPUT' &&\n      (event.target as HTMLInputElement).className == 'checker'\n    ) {\n      isChecked = !(event.target as HTMLInputElement).checked;\n      hot?.render();\n    }\n  };\n\n  return (\n    <div id=\"exampleContainer5\" onMouseUp={(...args) => exampleContainerMouseupCallback(...args)}>\n      <HotTable\n        ref={hotRef}\n        height=\"auto\"\n        columns={[{}, { renderer: customRenderer }]}\n        colHeaders={function (col: number) {\n          switch (col) {\n            case 0:\n              return '<b>Bold</b> and <em>Beautiful</em>';\n\n            case 1:\n              return `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? `checked=\"checked\"` : ''}> checkbox`;\n\n            default:\n              return '';\n          }\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        sanitizer={sanitizeHeader}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example5.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  let isChecked = false;\n\n  function customRenderer(this: Handsontable, _instance: Handsontable, td: HTMLTableCellElement) {\n    textRenderer.apply(this, arguments as any);\n\n    if (isChecked) {\n      td.style.backgroundColor = 'yellow';\n    } else {\n      td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n    }\n  }\n\n  const exampleContainerMouseupCallback = (event: MouseEvent) => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (\n      (event.target as HTMLInputElement).nodeName == 'INPUT' &&\n      (event.target as HTMLInputElement).className == 'checker'\n    ) {\n      isChecked = !(event.target as HTMLInputElement).checked;\n      hot?.render();\n    }\n  };\n\n  return (\n    <div id=\"exampleContainer5\" onMouseUp={(...args) => exampleContainerMouseupCallback(...args)}>\n      <HotTable\n        ref={hotRef}\n        height=\"auto\"\n        columns={[{}, { renderer: customRenderer }]}\n        colHeaders={function (col: number) {\n          switch (col) {\n            case 0:\n              return '<b>Bold</b> and <em>Beautiful</em>';\n\n            case 1:\n              return `Some <input type=\"checkbox\" class=\"checker\" ${isChecked ? `checked=\"checked\"` : ''}> checkbox`;\n\n            default:\n              return '';\n          }\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        sanitizer={sanitizeHeader}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example5.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json
index 2befd7bb9..883c8120a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Asset', 'BTC-equivalent value', 'Portfolio share']}\n      columns={[\n        { data: 'asset' },\n        {\n          data: 'btcValue',\n          type: 'numeric',\n          // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n          // `valueFormatter` prepends the symbol instead.\n          valueFormatter(value: unknown) {\n            // `type: 'numeric'` turns numeric input into a number, but invalid input\n            // stays a string, so check the type before calling `toFixed()`.\n            if (typeof value !== 'number') {\n              return value;\n            }\n\n            return `₿${value.toFixed(4)}`;\n          },\n        },\n        {\n          data: 'portfolioShare',\n          // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n          // appends the symbol manually.\n          valueFormatter(value: unknown) {\n            return `${value}‰`;\n          },\n        },\n      ]}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example6.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n    { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n    { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n    { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n    { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Asset', 'BTC-equivalent value', 'Portfolio share']}\n      columns={[\n        { data: 'asset' },\n        {\n          data: 'btcValue',\n          type: 'numeric',\n          // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n          // `valueFormatter` prepends the symbol instead.\n          valueFormatter(value: unknown) {\n            // `type: 'numeric'` turns numeric input into a number, but invalid input\n            // stays a string, so check the type before calling `toFixed()`.\n            if (typeof value !== 'number') {\n              return value;\n            }\n\n            return `₿${value.toFixed(4)}`;\n          },\n        },\n        {\n          data: 'portfolioShare',\n          // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n          // appends the symbol manually.\n          valueFormatter(value: unknown) {\n            return `${value}‰`;\n          },\n        },\n      ]}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example6.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json
index 32625ffae..0895fed41 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, render, defineComponent } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n// A small Vue component used as a cell renderer.\nconst CellDisplay = defineComponent({\n  props: {\n    row: { type: Number, required: true },\n    col: { type: Number, required: true },\n    value: { type: String, default: '' },\n  },\n  render() {\n    return h('span', [\n      h('i', { style: 'color:#a9a9a9' }, `Row: ${this.row}, column: ${this.col},`),\n      ' value: ',\n      h('strong', this.value),\n    ]);\n  },\n});\n\nconst componentRenderer: BaseRenderer = (instance, td, row, col, _prop, value) => {\n  render(h(CellDisplay, { row, col, value: String(value) }), td);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Mercedes A 160', 'Q1 2024', '7 200'],\n    ['Citroen C4 Coupe', 'Q2 2024', '8 330'],\n    ['Audi A4 Avant', 'Q3 2024', '33 900'],\n    ['Opel Astra', 'Q4 2024', '5 000'],\n    ['BMW 320i Coupe', 'Q1 2025', '30 500'],\n  ],\n  colHeaders: ['Model', 'Quarter', 'Price (EUR)'],\n  columns: [\n    { renderer: componentRenderer },\n    { renderer: componentRenderer },\n    { renderer: componentRenderer },\n  ],\n  colWidths: 250,\n  autoRowSize: false,\n  autoColumnSize: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example1.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, render, defineComponent } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n// A small Vue component used as a cell renderer.\nconst CellDisplay = defineComponent({\n  props: {\n    row: { type: Number, required: true },\n    col: { type: Number, required: true },\n    value: { type: String, default: '' },\n  },\n  render() {\n    return h('span', [\n      h('i', { style: 'color:#a9a9a9' }, `Row: ${this.row}, column: ${this.col},`),\n      ' value: ',\n      h('strong', this.value),\n    ]);\n  },\n});\n\nconst componentRenderer: BaseRenderer = (instance, td, row, col, _prop, value) => {\n  render(h(CellDisplay, { row, col, value: String(value) }), td);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Mercedes A 160', 'Q1 2024', '7 200'],\n    ['Citroen C4 Coupe', 'Q2 2024', '8 330'],\n    ['Audi A4 Avant', 'Q3 2024', '33 900'],\n    ['Opel Astra', 'Q4 2024', '5 000'],\n    ['BMW 320i Coupe', 'Q1 2025', '30 500'],\n  ],\n  colHeaders: ['Model', 'Quarter', 'Price (EUR)'],\n  columns: [\n    { renderer: componentRenderer },\n    { renderer: componentRenderer },\n    { renderer: componentRenderer },\n  ],\n  colWidths: 250,\n  autoRowSize: false,\n  autoColumnSize: false,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example1.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json
index 52859cd70..b938b37fe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, createApp, defineComponent, inject } from 'vue';\nimport type { App } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n// A component that reads an injected currency formatter via inject().\n// inject() requires a Vue app context -- use createApp() to provide it.\nconst RevenueCell = defineComponent({\n  props: { value: { type: String, default: '' } },\n  setup(props) {\n    const format = inject<(v: string) => string>('formatRevenue', (v) => v);\n    return () => h('span', format(props.value));\n  },\n});\n\ntype TdWithApp = HTMLTableCellElement & { _app?: App };\n\nconst revenueRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const cell = td as TdWithApp;\n\n  // Unmount the previous app on this cell before remounting.\n  cell._app?.unmount();\n\n  const app = createApp(RevenueCell, { value: String(value) });\n  app.provide('formatRevenue', (v: string) => {\n    const num = parseFloat(v);\n    return isNaN(num)\n      ? v\n      : new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);\n  });\n  cell._app = app;\n  app.mount(td);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Acme Corp', 'Q1 2025', '42000'],\n    ['Vertex Industries', 'Q2 2025', '18750.5'],\n    ['Harbor Goods', 'Q3 2025', '9200'],\n    ['Alpine Supply Co.', 'Q4 2025', '130000'],\n    ['Pinnacle Ltd', 'Q1 2026', '67450.25'],\n  ],\n  colHeaders: ['Company', 'Quarter', 'Revenue'],\n  columns: [\n    {},\n    {},\n    { renderer: revenueRenderer },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoRowSize: false,\n  autoColumnSize: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example2.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's context · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, createApp, defineComponent, inject } from 'vue';\nimport type { App } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n// A component that reads an injected currency formatter via inject().\n// inject() requires a Vue app context -- use createApp() to provide it.\nconst RevenueCell = defineComponent({\n  props: { value: { type: String, default: '' } },\n  setup(props) {\n    const format = inject<(v: string) => string>('formatRevenue', (v) => v);\n    return () => h('span', format(props.value));\n  },\n});\n\ntype TdWithApp = HTMLTableCellElement & { _app?: App };\n\nconst revenueRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const cell = td as TdWithApp;\n\n  // Unmount the previous app on this cell before remounting.\n  cell._app?.unmount();\n\n  const app = createApp(RevenueCell, { value: String(value) });\n  app.provide('formatRevenue', (v: string) => {\n    const num = parseFloat(v);\n    return isNaN(num)\n      ? v\n      : new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);\n  });\n  cell._app = app;\n  app.mount(td);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Acme Corp', 'Q1 2025', '42000'],\n    ['Vertex Industries', 'Q2 2025', '18750.5'],\n    ['Harbor Goods', 'Q3 2025', '9200'],\n    ['Alpine Supply Co.', 'Q4 2025', '130000'],\n    ['Pinnacle Ltd', 'Q1 2026', '67450.25'],\n  ],\n  colHeaders: ['Company', 'Quarter', 'Revenue'],\n  columns: [\n    {},\n    {},\n    { renderer: revenueRenderer },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoRowSize: false,\n  autoColumnSize: false,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example2.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's context","docPermalink":"/cell-renderer","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json
index f4b20e933..4c42f0b26 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ninterface Book {\n  title: string;\n  description: string;\n  comments: string;\n  cover: string;\n}\n\nconst data: Book[] = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value as string;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value as string;\n\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example4.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ninterface Book {\n  title: string;\n  description: string;\n  comments: string;\n  cover: string;\n}\n\nconst data: Book[] = [\n  {\n    title:\n      '<a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">Professional JavaScript for Web Developers</a>',\n    description:\n      'This <a href=\"https://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691\">book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.',\n    comments: 'I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;',\n    cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596517748.do\">JavaScript: The Good Parts</a>',\n    description:\n      'This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.',\n    comments: 'This is the book about JavaScript',\n    cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n  },\n  {\n    title: '<a href=\"https://shop.oreilly.com/product/9780596805531.do\">JavaScript: The Definitive Guide</a>',\n    description:\n      '<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.',\n    comments:\n      'I\\'ve never actually read it, but the <a href=\"https://shop.oreilly.com/product/9780596805531.do\">comments</a> are highly <strong>positive</strong>.',\n    cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n  },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n  // Sanitize the \"value\" before passing it to the innerHTML property.\n  td.innerHTML = value as string;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const img = document.createElement('img');\n\n  img.src = value as string;\n\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: [200, 200, 200, 80],\n  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n  height: 'auto',\n  columns: [\n    { data: 'title', renderer: 'html' },\n    { data: 'description', renderer: 'html' },\n    { data: 'comments', renderer: safeHtmlRenderer },\n    { data: 'cover', renderer: coverRenderer },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example4.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json
index 038a6fd11..7520f773b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isChecked = ref(false);\n\nconst customRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  if (isChecked.value) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col: number) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked.value ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onContainerMousedown(event: MouseEvent) {\n  const target = event.target as HTMLElement;\n\n  if (target.nodeName === 'INPUT' && target.className === 'checker') {\n    event.stopPropagation();\n  }\n}\n\nfunction onContainerMouseup(event: MouseEvent) {\n  const target = event.target as HTMLElement;\n\n  if (target.nodeName === 'INPUT' && target.className === 'checker') {\n    isChecked.value = !(target as HTMLInputElement).checked;\n    hotRef.value?.hotInstance?.render();\n  }\n}\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div id=\"exampleContainer5\" @mousedown=\"onContainerMousedown\" @mouseup=\"onContainerMouseup\">\n      <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example5.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['B', 'EM', 'INPUT', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['type', 'class', 'checked', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isChecked = ref(false);\n\nconst customRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  if (isChecked.value) {\n    td.style.backgroundColor = 'yellow';\n  } else {\n    td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n  }\n};\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  columns: [{}, { renderer: customRenderer }],\n  colHeaders(col: number) {\n    return col === 0\n      ? '<b>Bold</b> and <em>Beautiful</em>'\n      : `Some <input type=\"checkbox\" class=\"checker\" ${isChecked.value ? 'checked=\"checked\"' : ''}> checkbox`;\n  },\n  sanitizer: sanitizeHeader,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onContainerMousedown(event: MouseEvent) {\n  const target = event.target as HTMLElement;\n\n  if (target.nodeName === 'INPUT' && target.className === 'checker') {\n    event.stopPropagation();\n  }\n}\n\nfunction onContainerMouseup(event: MouseEvent) {\n  const target = event.target as HTMLElement;\n\n  if (target.nodeName === 'INPUT' && target.className === 'checker') {\n    isChecked.value = !(target as HTMLInputElement).checked;\n    hotRef.value?.hotInstance?.render();\n  }\n}\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div id=\"exampleContainer5\" @mousedown=\"onContainerMousedown\" @mouseup=\"onContainerMouseup\">\n      <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example5.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json
index e60d4c6e1..baafa0f62 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface Holding {\n  asset: string;\n  btcValue: number;\n  portfolioShare: number;\n}\n\nconst data: Holding[] = [\n  { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n  { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n  { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n  { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n  { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n  columns: [\n    { data: 'asset' },\n    {\n      data: 'btcValue',\n      type: 'numeric',\n      // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n      // `valueFormatter` prepends the symbol instead.\n      valueFormatter(value: unknown) {\n        // `type: 'numeric'` turns numeric input into a number, but invalid input\n        // stays a string, so check the type before calling `toFixed()`.\n        if (typeof value !== 'number') {\n          return value;\n        }\n\n        return `₿${value.toFixed(4)}`;\n      },\n    },\n    {\n      data: 'portfolioShare',\n      // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n      // appends the symbol manually.\n      valueFormatter(value: unknown) {\n        return `${value}‰`;\n      },\n    },\n  ],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example6.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface Holding {\n  asset: string;\n  btcValue: number;\n  portfolioShare: number;\n}\n\nconst data: Holding[] = [\n  { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n  { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n  { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n  { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n  { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n  columns: [\n    { data: 'asset' },\n    {\n      data: 'btcValue',\n      type: 'numeric',\n      // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n      // `valueFormatter` prepends the symbol instead.\n      valueFormatter(value: unknown) {\n        // `type: 'numeric'` turns numeric input into a number, but invalid input\n        // stays a string, so check the type before calling `toFixed()`.\n        if (typeof value !== 'number') {\n          return value;\n        }\n\n        return `₿${value.toFixed(4)}`;\n      },\n    },\n    {\n      data: 'portfolioShare',\n      // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n      // appends the symbol manually.\n      valueFormatter(value: unknown) {\n        return `${value}‰`;\n      },\n    },\n  ],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-renderer/vue/example6.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json
index a761f15b1..98b888014 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: unknown, callback: (valid: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(String(value))) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <output class=\"console\">{{output}}</output>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n  output = 'Here you will see the log';\n\n  readonly hotData = [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const componentInstance = this;\n\n    this.hotSettings = {\n      beforeChange(changes: (Handsontable.CellChange | null)[]) {\n        for (let i = changes.length - 1; i >= 0; i--) {\n          const currChange = changes[i];\n\n          if (!currChange) {\n            continue;\n          }\n\n          // gently don't accept the word \"foo\" (remove the change at index i)\n          if (currChange[3] === 'foo') {\n            changes.splice(i, 1);\n          }\n          // if any of pasted cells contains the word \"nuke\", reject the whole paste\n          else if (currChange[3] === 'nuke') {\n            return false;\n          }\n          // capitalise first letter in column 1 and 2\n          else if (\n            currChange[1] === 'name.first' ||\n            currChange[1] === 'name.last'\n          ) {\n            if (currChange[3] !== null && typeof currChange[3] === 'string') {\n              changes[i]![3] =\n                currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n            }\n          }\n        }\n\n        return true;\n      },\n      afterChange(changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n        if (source !== 'loadData') {\n          componentInstance.output = JSON.stringify(changes);\n        }\n      },\n      colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      columns: [\n        { data: 'id', type: 'numeric' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n        { data: 'email', validator: emailValidator },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: unknown, callback: (valid: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(String(value))) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <output class=\"console\">{{output}}</output>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n  output = 'Here you will see the log';\n\n  readonly hotData = [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ];\n\n  hotSettings!: GridSettings;\n\n  ngOnInit() {\n    const componentInstance = this;\n\n    this.hotSettings = {\n      beforeChange(changes: (Handsontable.CellChange | null)[]) {\n        for (let i = changes.length - 1; i >= 0; i--) {\n          const currChange = changes[i];\n\n          if (!currChange) {\n            continue;\n          }\n\n          // gently don't accept the word \"foo\" (remove the change at index i)\n          if (currChange[3] === 'foo') {\n            changes.splice(i, 1);\n          }\n          // if any of pasted cells contains the word \"nuke\", reject the whole paste\n          else if (currChange[3] === 'nuke') {\n            return false;\n          }\n          // capitalise first letter in column 1 and 2\n          else if (\n            currChange[1] === 'name.first' ||\n            currChange[1] === 'name.last'\n          ) {\n            if (currChange[3] !== null && typeof currChange[3] === 'string') {\n              changes[i]![3] =\n                currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n            }\n          }\n        }\n\n        return true;\n      },\n      afterChange(changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n        if (source !== 'loadData') {\n          componentInstance.output = JSON.stringify(changes);\n        }\n      },\n      colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      columns: [\n        { data: 'id', type: 'numeric' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n        { data: 'email', validator: emailValidator },\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json
index 61c4bc488..adaf3dbb4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-validator></example2-cell-validator>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\n@Component({\n  selector: 'example2-cell-validator',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n    columns: [\n      {},\n      {},\n      {\n        validator: decimalValidator,\n        allowInvalid: false,\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-validator></example2-cell-validator>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\n@Component({\n  selector: 'example2-cell-validator',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n    columns: [\n      {},\n      {},\n      {\n        validator: decimalValidator,\n        allowInvalid: false,\n      },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json
index b49fd1f5b..9f14f6b66 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Here you will see the log</output>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst output = document.querySelector('#output');\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value, callback) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ],\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        if (currChange[3] !== null) {\n          changes[i][3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.innerText = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Here you will see the log</output>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst output = document.querySelector('#output');\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value, callback) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ],\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        if (currChange[3] !== null) {\n          changes[i][3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.innerText = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json
index 8449f3519..c1adaa057 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Here you will see the log</output>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: string, callback: (value: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ],\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        if (currChange[3] !== null && typeof currChange[3] === 'string') {\n          changes[i]![3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.innerText = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <output class=\"console\" id=\"output\">Here you will see the log</output>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: string, callback: (value: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Joe', last: 'Fabiano' },\n      ip: '0.0.0.1',\n      email: 'Joe.Fabiano@ex.com',\n    },\n    {\n      id: 2,\n      name: { first: 'Fred', last: 'Wecler' },\n      ip: '0.0.0.1',\n      email: 'Fred.Wecler@ex.com',\n    },\n    {\n      id: 3,\n      name: { first: 'Steve', last: 'Wilson' },\n      ip: '0.0.0.1',\n      email: 'Steve.Wilson@ex.com',\n    },\n    {\n      id: 4,\n      name: { first: 'Maria', last: 'Fernandez' },\n      ip: '0.0.0.1',\n      email: 'M.Fernandez@ex.com',\n    },\n    {\n      id: 5,\n      name: { first: 'Pierre', last: 'Barbault' },\n      ip: '0.0.0.1',\n      email: 'Pierre.Barbault@ex.com',\n    },\n    {\n      id: 6,\n      name: { first: 'Nancy', last: 'Moore' },\n      ip: '0.0.0.1',\n      email: 'Nancy.Moore@ex.com',\n    },\n    {\n      id: 7,\n      name: { first: 'Barbara', last: 'MacDonald' },\n      ip: '0.0.0.1',\n      email: 'B.MacDonald@ex.com',\n    },\n    {\n      id: 8,\n      name: { first: 'Wilma', last: 'Williams' },\n      ip: '0.0.0.1',\n      email: 'Wilma.Williams@ex.com',\n    },\n    {\n      id: 9,\n      name: { first: 'Sasha', last: 'Silver' },\n      ip: '0.0.0.1',\n      email: 'Sasha.Silver@ex.com',\n    },\n    {\n      id: 10,\n      name: { first: 'Don', last: 'Pérignon' },\n      ip: '0.0.0.1',\n      email: 'Don.Pérignon@ex.com',\n    },\n    {\n      id: 11,\n      name: { first: 'Aaron', last: 'Kinley' },\n      ip: '0.0.0.1',\n      email: 'Aaron.Kinley@ex.com',\n    },\n  ],\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        if (currChange[3] !== null && typeof currChange[3] === 'string') {\n          changes[i]![3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.innerText = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json
index ea059f230..4295db604 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst data = [\n    ['Spring Sale 2025', 'Email', '3.4'],\n    ['Brand Awareness Q3', 'Paid Search', '8,1'],\n    ['Retention Push', 'In-app', '12.0'],\n    ['Partner Webinar', 'Organic', '6,75'],\n    ['Holiday Preview', 'Social', '9.25'],\n];\nfunction decimalValidator(value, callback) {\n    if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n        callback(true);\n        return;\n    }\n    callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n    columns: [\n        {},\n        {},\n        {\n            validator: decimalValidator,\n            allowInvalid: false,\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst data = [\n    ['Spring Sale 2025', 'Email', '3.4'],\n    ['Brand Awareness Q3', 'Paid Search', '8,1'],\n    ['Retention Push', 'In-app', '12.0'],\n    ['Partner Webinar', 'Organic', '6,75'],\n    ['Holiday Preview', 'Social', '9.25'],\n];\nfunction decimalValidator(value, callback) {\n    if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n        callback(true);\n        return;\n    }\n    callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n    columns: [\n        {},\n        {},\n        {\n            validator: decimalValidator,\n            allowInvalid: false,\n        },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json
index 044976747..9875ef2da 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n  columns: [\n    {},\n    {},\n    {\n      validator: decimalValidator,\n      allowInvalid: false,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n  columns: [\n    {},\n    {},\n    {\n      validator: decimalValidator,\n      allowInvalid: false,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json
index 0061c7c87..e481c972b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { CellChange } from 'handsontable';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Joe', last: 'Fabiano' },\n    ip: '0.0.0.1',\n    email: 'Joe.Fabiano@ex.com',\n  },\n  {\n    id: 2,\n    name: { first: 'Fred', last: 'Wecler' },\n    ip: '0.0.0.1',\n    email: 'Fred.Wecler@ex.com',\n  },\n  {\n    id: 3,\n    name: { first: 'Steve', last: 'Wilson' },\n    ip: '0.0.0.1',\n    email: 'Steve.Wilson@ex.com',\n  },\n  {\n    id: 4,\n    name: { first: 'Maria', last: 'Fernandez' },\n    ip: '0.0.0.1',\n    email: 'M.Fernandez@ex.com',\n  },\n  {\n    id: 5,\n    name: { first: 'Pierre', last: 'Barbault' },\n    ip: '0.0.0.1',\n    email: 'Pierre.Barbault@ex.com',\n  },\n  {\n    id: 6,\n    name: { first: 'Nancy', last: 'Moore' },\n    ip: '0.0.0.1',\n    email: 'Nancy.Moore@ex.com',\n  },\n  {\n    id: 7,\n    name: { first: 'Barbara', last: 'MacDonald' },\n    ip: '0.0.0.1',\n    email: 'B.MacDonald@ex.com',\n  },\n  {\n    id: 8,\n    name: { first: 'Wilma', last: 'Williams' },\n    ip: '0.0.0.1',\n    email: 'Wilma.Williams@ex.com',\n  },\n  {\n    id: 9,\n    name: { first: 'Sasha', last: 'Silver' },\n    ip: '0.0.0.1',\n    email: 'Sasha.Silver@ex.com',\n  },\n  {\n    id: 10,\n    name: { first: 'Don', last: 'Pérignon' },\n    ip: '0.0.0.1',\n    email: 'Don.Pérignon@ex.com',\n  },\n  {\n    id: 11,\n    name: { first: 'Aaron', last: 'Kinley' },\n    ip: '0.0.0.1',\n    email: 'Aaron.Kinley@ex.com',\n  },\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('');\n\n  const ipValidatorRegexp =\n    /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\n  const emailValidator = (value: string, callback: (value: boolean) => void) => {\n    setTimeout(() => {\n      if (/.+@.+/.test(value)) {\n        callback(true);\n      } else {\n        callback(false);\n      }\n    }, 1000);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        data={data}\n        beforeChange={function (changes, _source) {\n          const cellChanges = changes as CellChange;\n\n          for (let i = changes.length - 1; i >= 0; i--) {\n            // gently don't accept the word \"foo\" (remove the change at index i)\n            if (cellChanges[i][3] === 'foo') {\n              changes.splice(i, 1);\n            }\n            // if any of pasted cells contains the word \"nuke\", reject the whole paste\n            else if (cellChanges[i][3] === 'nuke') {\n              return false;\n            }\n            // capitalise first letter in column 1 and 2\n            else if (cellChanges[i][1] === 'name.first' || cellChanges[i][1] === 'name.last') {\n              if (cellChanges[i][3] !== null) {\n                cellChanges[i][3] = cellChanges[i][3].charAt(0).toUpperCase() + cellChanges[i][3].slice(1);\n              }\n            }\n          }\n        }}\n        afterChange={function (changes, source) {\n          if (source !== 'loadData' && source !== 'updateData') {\n            setOutput(JSON.stringify(changes));\n          }\n        }}\n        colHeaders={['ID', 'First name', 'Last name', 'IP', 'E-mail']}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        columns={[\n          { data: 'id', type: 'numeric' },\n          { data: 'name.first' },\n          { data: 'name.last' },\n          { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n          { data: 'email', validator: emailValidator },\n        ]}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example1.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { CellChange } from 'handsontable';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Joe', last: 'Fabiano' },\n    ip: '0.0.0.1',\n    email: 'Joe.Fabiano@ex.com',\n  },\n  {\n    id: 2,\n    name: { first: 'Fred', last: 'Wecler' },\n    ip: '0.0.0.1',\n    email: 'Fred.Wecler@ex.com',\n  },\n  {\n    id: 3,\n    name: { first: 'Steve', last: 'Wilson' },\n    ip: '0.0.0.1',\n    email: 'Steve.Wilson@ex.com',\n  },\n  {\n    id: 4,\n    name: { first: 'Maria', last: 'Fernandez' },\n    ip: '0.0.0.1',\n    email: 'M.Fernandez@ex.com',\n  },\n  {\n    id: 5,\n    name: { first: 'Pierre', last: 'Barbault' },\n    ip: '0.0.0.1',\n    email: 'Pierre.Barbault@ex.com',\n  },\n  {\n    id: 6,\n    name: { first: 'Nancy', last: 'Moore' },\n    ip: '0.0.0.1',\n    email: 'Nancy.Moore@ex.com',\n  },\n  {\n    id: 7,\n    name: { first: 'Barbara', last: 'MacDonald' },\n    ip: '0.0.0.1',\n    email: 'B.MacDonald@ex.com',\n  },\n  {\n    id: 8,\n    name: { first: 'Wilma', last: 'Williams' },\n    ip: '0.0.0.1',\n    email: 'Wilma.Williams@ex.com',\n  },\n  {\n    id: 9,\n    name: { first: 'Sasha', last: 'Silver' },\n    ip: '0.0.0.1',\n    email: 'Sasha.Silver@ex.com',\n  },\n  {\n    id: 10,\n    name: { first: 'Don', last: 'Pérignon' },\n    ip: '0.0.0.1',\n    email: 'Don.Pérignon@ex.com',\n  },\n  {\n    id: 11,\n    name: { first: 'Aaron', last: 'Kinley' },\n    ip: '0.0.0.1',\n    email: 'Aaron.Kinley@ex.com',\n  },\n];\n\nconst ExampleComponent = () => {\n  const [output, setOutput] = useState('');\n\n  const ipValidatorRegexp =\n    /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\n  const emailValidator = (value: string, callback: (value: boolean) => void) => {\n    setTimeout(() => {\n      if (/.+@.+/.test(value)) {\n        callback(true);\n      } else {\n        callback(false);\n      }\n    }, 1000);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        data={data}\n        beforeChange={function (changes, _source) {\n          const cellChanges = changes as CellChange;\n\n          for (let i = changes.length - 1; i >= 0; i--) {\n            // gently don't accept the word \"foo\" (remove the change at index i)\n            if (cellChanges[i][3] === 'foo') {\n              changes.splice(i, 1);\n            }\n            // if any of pasted cells contains the word \"nuke\", reject the whole paste\n            else if (cellChanges[i][3] === 'nuke') {\n              return false;\n            }\n            // capitalise first letter in column 1 and 2\n            else if (cellChanges[i][1] === 'name.first' || cellChanges[i][1] === 'name.last') {\n              if (cellChanges[i][3] !== null) {\n                cellChanges[i][3] = cellChanges[i][3].charAt(0).toUpperCase() + cellChanges[i][3].slice(1);\n              }\n            }\n          }\n        }}\n        afterChange={function (changes, source) {\n          if (source !== 'loadData' && source !== 'updateData') {\n            setOutput(JSON.stringify(changes));\n          }\n        }}\n        colHeaders={['ID', 'First name', 'Last name', 'IP', 'E-mail']}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        columns={[\n          { data: 'id', type: 'numeric' },\n          { data: 'name.first' },\n          { data: 'name.last' },\n          { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n          { data: 'email', validator: emailValidator },\n        ]}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example1.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json
index 05ffb1082..b204615aa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Campaign', 'Channel', 'Conversion rate']}\n      columns={[\n        {},\n        {},\n        {\n          validator: decimalValidator,\n          allowInvalid: false,\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example2.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Campaign', 'Channel', 'Conversion rate']}\n      columns={[\n        {},\n        {},\n        {\n          validator: decimalValidator,\n          allowInvalid: false,\n        },\n      ]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example2.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json
index 180241f1e..09503ac8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface RowData {\n  id: number;\n  name: { first: string; last: string };\n  ip: string;\n  email: string;\n}\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: string, callback: (valid: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nconst output = ref('Here you will see the log');\n\nconst data: RowData[] = [\n  { id: 1, name: { first: 'Joe', last: 'Fabiano' }, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com' },\n  { id: 2, name: { first: 'Fred', last: 'Wecler' }, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com' },\n  { id: 3, name: { first: 'Steve', last: 'Wilson' }, ip: '0.0.0.1', email: 'Steve.Wilson@ex.com' },\n  { id: 4, name: { first: 'Maria', last: 'Fernandez' }, ip: '0.0.0.1', email: 'M.Fernandez@ex.com' },\n  { id: 5, name: { first: 'Pierre', last: 'Barbault' }, ip: '0.0.0.1', email: 'Pierre.Barbault@ex.com' },\n  { id: 6, name: { first: 'Nancy', last: 'Moore' }, ip: '0.0.0.1', email: 'Nancy.Moore@ex.com' },\n  { id: 7, name: { first: 'Barbara', last: 'MacDonald' }, ip: '0.0.0.1', email: 'B.MacDonald@ex.com' },\n  { id: 8, name: { first: 'Wilma', last: 'Williams' }, ip: '0.0.0.1', email: 'Wilma.Williams@ex.com' },\n  { id: 9, name: { first: 'Sasha', last: 'Silver' }, ip: '0.0.0.1', email: 'Sasha.Silver@ex.com' },\n  { id: 10, name: { first: 'Don', last: 'Pérignon' }, ip: '0.0.0.1', email: 'Don.Pérignon@ex.com' },\n  { id: 11, name: { first: 'Aaron', last: 'Kinley' }, ip: '0.0.0.1', email: 'Aaron.Kinley@ex.com' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        const newValue = currChange[3];\n\n        if (newValue !== null && typeof newValue === 'string') {\n          currChange[3] = newValue.charAt(0).toUpperCase() + newValue.slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.value = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <output class=\"console\" id=\"output\">{{ output }}</output>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-validator/vue/example1.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface RowData {\n  id: number;\n  name: { first: string; last: string };\n  ip: string;\n  email: string;\n}\n\nconst ipValidatorRegexp =\n  /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: string, callback: (valid: boolean) => void) => {\n  setTimeout(() => {\n    if (/.+@.+/.test(value)) {\n      callback(true);\n    } else {\n      callback(false);\n    }\n  }, 1000);\n};\n\nconst output = ref('Here you will see the log');\n\nconst data: RowData[] = [\n  { id: 1, name: { first: 'Joe', last: 'Fabiano' }, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com' },\n  { id: 2, name: { first: 'Fred', last: 'Wecler' }, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com' },\n  { id: 3, name: { first: 'Steve', last: 'Wilson' }, ip: '0.0.0.1', email: 'Steve.Wilson@ex.com' },\n  { id: 4, name: { first: 'Maria', last: 'Fernandez' }, ip: '0.0.0.1', email: 'M.Fernandez@ex.com' },\n  { id: 5, name: { first: 'Pierre', last: 'Barbault' }, ip: '0.0.0.1', email: 'Pierre.Barbault@ex.com' },\n  { id: 6, name: { first: 'Nancy', last: 'Moore' }, ip: '0.0.0.1', email: 'Nancy.Moore@ex.com' },\n  { id: 7, name: { first: 'Barbara', last: 'MacDonald' }, ip: '0.0.0.1', email: 'B.MacDonald@ex.com' },\n  { id: 8, name: { first: 'Wilma', last: 'Williams' }, ip: '0.0.0.1', email: 'Wilma.Williams@ex.com' },\n  { id: 9, name: { first: 'Sasha', last: 'Silver' }, ip: '0.0.0.1', email: 'Sasha.Silver@ex.com' },\n  { id: 10, name: { first: 'Don', last: 'Pérignon' }, ip: '0.0.0.1', email: 'Don.Pérignon@ex.com' },\n  { id: 11, name: { first: 'Aaron', last: 'Kinley' }, ip: '0.0.0.1', email: 'Aaron.Kinley@ex.com' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  beforeChange(changes) {\n    for (let i = changes.length - 1; i >= 0; i--) {\n      const currChange = changes[i];\n\n      if (!currChange) {\n        continue;\n      }\n\n      // gently don't accept the word \"foo\" (remove the change at index i)\n      if (currChange[3] === 'foo') {\n        changes.splice(i, 1);\n      }\n      // if any of pasted cells contains the word \"nuke\", reject the whole paste\n      else if (currChange[3] === 'nuke') {\n        return false;\n      }\n      // capitalise first letter in column 1 and 2\n      else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n        const newValue = currChange[3];\n\n        if (newValue !== null && typeof newValue === 'string') {\n          currChange[3] = newValue.charAt(0).toUpperCase() + newValue.slice(1);\n        }\n      }\n    }\n\n    return true;\n  },\n  afterChange(changes, source) {\n    if (source !== 'loadData') {\n      output.value = JSON.stringify(changes);\n    }\n  },\n  colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n    { data: 'email', validator: emailValidator },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <output class=\"console\" id=\"output\">{{ output }}</output>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-validator/vue/example1.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json
index 568c843f1..d3cc47e9b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n  columns: [\n    {},\n    {},\n    {\n      validator: decimalValidator,\n      allowInvalid: false,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-validator/vue/example2.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Spring Sale 2025', 'Email', '3.4'],\n  ['Brand Awareness Q3', 'Paid Search', '8,1'],\n  ['Retention Push', 'In-app', '12.0'],\n  ['Partner Webinar', 'Organic', '6,75'],\n  ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n  if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n    callback(true);\n\n    return;\n  }\n\n  callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n  columns: [\n    {},\n    {},\n    {\n      validator: decimalValidator,\n      allowInvalid: false,\n    },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/cell-validator/vue/example2.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json
index 8fe085e9f..014e7e4e1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nfunction imageRenderer(\n  _instance: unknown,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const src = String(value ?? '');\n  const img = document.createElement('img');\n\n  img.src = src;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers',\n      '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n    ['JavaScript: The Good Parts',\n      '/docs/img/examples/javascript-the-good-parts.jpg'],\n  ],\n  columns: [\n    {},\n    {\n      renderer: imageRenderer,\n    },\n  ],\n  colHeaders: true,\n  rowHeights: 55,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example1.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nfunction imageRenderer(\n  _instance: unknown,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const src = String(value ?? '');\n  const img = document.createElement('img');\n\n  img.src = src;\n  img.addEventListener('mousedown', (event) => {\n    event.preventDefault();\n  });\n\n  td.innerText = '';\n  td.appendChild(img);\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers',\n      '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n    ['JavaScript: The Good Parts',\n      '/docs/img/examples/javascript-the-good-parts.jpg'],\n  ],\n  columns: [\n    {},\n    {\n      renderer: imageRenderer,\n    },\n  ],\n  colHeaders: true,\n  rowHeights: 55,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example1.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json
index 84852d91e..5f747edaf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Vue component renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, render } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ImageCellProps = { src: string };\n\nconst ImageCell = (props: ImageCellProps) =>\n  h('img', {\n    src: props.src,\n    onMousedown: (event: MouseEvent) => event.preventDefault(),\n  });\n\nfunction imageComponentRenderer(\n  _instance: unknown,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const vnode = h(ImageCell, { src: String(value ?? '') });\n\n  render(vnode, td);\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers',\n      '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n    ['JavaScript: The Good Parts',\n      '/docs/img/examples/javascript-the-good-parts.jpg'],\n  ],\n  columns: [\n    {},\n    {\n      renderer: imageComponentRenderer,\n    },\n  ],\n  colHeaders: true,\n  rowHeights: 55,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example2.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example2","exampleTitle":"Vue component renderer","docPermalink":"/custom-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Vue component renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, h, render } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ImageCellProps = { src: string };\n\nconst ImageCell = (props: ImageCellProps) =>\n  h('img', {\n    src: props.src,\n    onMousedown: (event: MouseEvent) => event.preventDefault(),\n  });\n\nfunction imageComponentRenderer(\n  _instance: unknown,\n  td: HTMLTableCellElement,\n  _row: number,\n  _col: number,\n  _prop: string | number,\n  value: unknown\n): HTMLTableCellElement {\n  const vnode = h(ImageCell, { src: String(value ?? '') });\n\n  render(vnode, td);\n\n  return td;\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers',\n      '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],\n    ['JavaScript: The Good Parts',\n      '/docs/img/examples/javascript-the-good-parts.jpg'],\n  ],\n  columns: [\n    {},\n    {\n      renderer: imageComponentRenderer,\n    },\n  ],\n  colHeaders: true,\n  rowHeights: 55,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example2.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example2","exampleTitle":"Vue component renderer","docPermalink":"/custom-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json
index 482f785e1..c4e0a1133 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Custom editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements(): void {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input') as HTMLInputElement & HTMLTextAreaElement;\n    this.TEXTAREA.setAttribute('placeholder', 'Type a book title...');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers', 'Nicholas Zakas', 2009],\n    ['JavaScript: The Good Parts', 'Douglas Crockford', 2008],\n    ['You Don\\'t Know JS', 'Kyle Simpson', 2014],\n    ['Eloquent JavaScript', 'Marijn Haverbeke', 2018],\n    ['JavaScript Patterns', 'Stoyan Stefanov', 2010],\n  ],\n  columns: [\n    { editor: CustomEditor },\n    {},\n    { type: 'numeric' },\n  ],\n  colHeaders: ['Title', 'Author', 'Year'],\n  colWidths: [220, 180, 60],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example3.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example3","exampleTitle":"Custom editors","docPermalink":"/custom-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Functions ▸ Custom cells · Custom editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements(): void {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input') as HTMLInputElement & HTMLTextAreaElement;\n    this.TEXTAREA.setAttribute('placeholder', 'Type a book title...');\n    this.TEXTAREA.setAttribute('data-hot-input', 'true');\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Professional JavaScript for Web Developers', 'Nicholas Zakas', 2009],\n    ['JavaScript: The Good Parts', 'Douglas Crockford', 2008],\n    ['You Don\\'t Know JS', 'Kyle Simpson', 2014],\n    ['Eloquent JavaScript', 'Marijn Haverbeke', 2018],\n    ['JavaScript Patterns', 'Stoyan Stefanov', 2010],\n  ],\n  columns: [\n    { editor: CustomEditor },\n    {},\n    { type: 'numeric' },\n  ],\n  colHeaders: ['Title', 'Author', 'Year'],\n  colWidths: [220, 180, 60],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-functions/custom-cells/vue/example3.vue","breadcrumb":["Cell Functions","Custom cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom cells","exampleId":"example3","exampleTitle":"Custom editors","docPermalink":"/custom-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json
index 80a7c8418..8a1efc9c9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-autocomplete-cell-type></example1-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\n@Component({\n  selector: 'example1-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: [\n          'Harbor Goods',\n          'Alpine Supply Co.',\n          'Cascade Distributors',\n          'Summit Trading',\n          'Northgate Wholesale',\n          'Nordic Traders',\n        ],\n        strict: false,\n      },\n      {},\n      {\n        type: 'autocomplete',\n        source: warehouses,\n        strict: false,\n        visibleRows: 4,\n      },\n      {\n        type: 'autocomplete',\n        source: products,\n        strict: false,\n        trimDropdown: false,\n        width: 120,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-autocomplete-cell-type></example1-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\n@Component({\n  selector: 'example1-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: [\n          'Harbor Goods',\n          'Alpine Supply Co.',\n          'Cascade Distributors',\n          'Summit Trading',\n          'Northgate Wholesale',\n          'Nordic Traders',\n        ],\n        strict: false,\n      },\n      {},\n      {\n        type: 'autocomplete',\n        source: warehouses,\n        strict: false,\n        visibleRows: 4,\n      },\n      {\n        type: 'autocomplete',\n        source: products,\n        strict: false,\n        trimDropdown: false,\n        width: 120,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json
index e63fecd96..88e45737c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-autocomplete-cell-type></example2-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'example2-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    sanitizer: sanitizeHeader,\n    colHeaders: [\n      'Supplier<br>(allowInvalid false)',\n      'SKU',\n      'Warehouse',\n      'Product<br>(allowInvalid true)',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: [\n          'Harbor Goods',\n          'Alpine Supply Co.',\n          'Cascade Distributors',\n          'Summit Trading',\n          'Northgate Wholesale',\n          'Nordic Traders',\n        ],\n        strict: true,\n        allowInvalid: false,\n      },\n      {},\n      {\n        type: 'autocomplete',\n        source: warehouses,\n        strict: true,\n      },\n      {\n        type: 'autocomplete',\n        source: products,\n        strict: true,\n        allowInvalid: true, // true is default\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-autocomplete-cell-type></example2-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'example2-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    sanitizer: sanitizeHeader,\n    colHeaders: [\n      'Supplier<br>(allowInvalid false)',\n      'SKU',\n      'Warehouse',\n      'Product<br>(allowInvalid true)',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: [\n          'Harbor Goods',\n          'Alpine Supply Co.',\n          'Cascade Distributors',\n          'Summit Trading',\n          'Northgate Wholesale',\n          'Nordic Traders',\n        ],\n        strict: true,\n        allowInvalid: false,\n      },\n      {},\n      {\n        type: 'autocomplete',\n        source: warehouses,\n        strict: true,\n      },\n      {\n        type: 'autocomplete',\n        source: products,\n        strict: true,\n        allowInvalid: true, // true is default\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json
index 656578849..af5af0c36 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-autocomplete-cell-type></example3-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: (_query: string, process: (items: string[]) => void) => {\n          fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')\n              .then((response) => response.json())\n              .then((response) => process(response.data));\n        },\n        strict: true,\n      },\n      {}, // SKU is a default text column\n      {}, // Warehouse is a default text column\n      {}, // Product is a default text column\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-autocomplete-cell-type></example3-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'autocomplete',\n        source: (_query: string, process: (items: string[]) => void) => {\n          fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')\n              .then((response) => response.json())\n              .then((response) => process(response.data));\n        },\n        strict: true,\n      },\n      {}, // SKU is a default text column\n      {}, // Warehouse is a default text column\n      {}, // Product is a default text column\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json
index 2ff687bc1..dfa8baeae 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-autocomplete-cell-type></example4-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    ['Electronics and Gadgets','Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol']\n  ];\n\n  readonly airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    'Chicago O\\'Hare International Airport',\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport'\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'autocomplete',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-autocomplete-cell-type></example4-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    ['Electronics and Gadgets','Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol']\n  ];\n\n  readonly airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    'Chicago O\\'Hare International Airport',\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport'\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'autocomplete',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json
index 580130d73..dfe3727d6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-autocomplete-cell-type></example5-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    [\n      'Electronics and Gadgets',\n      { key: 'LAX', value: 'Los Angeles International Airport' },\n    ],\n    [\n      'Medical Supplies',\n      { key: 'JFK', value: 'John F. Kennedy International Airport' }\n    ],\n    [\n      'Auto Parts',\n      { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n    ],\n    [\n      'Fresh Produce',\n      { key: 'LHR', value: 'London Heathrow Airport' }\n    ],\n    [\n      'Textiles',\n      { key: 'CDG', value: 'Charles de Gaulle Airport' }\n    ],\n    [\n      'Industrial Equipment',\n      { key: 'DXB', value: 'Dubai International Airport' }\n    ],\n    [\n      'Pharmaceuticals',\n      { key: 'HND', value: 'Tokyo Haneda Airport' }\n    ],\n    [\n      'Consumer Goods',\n      { key: 'PEK', value: 'Beijing Capital International Airport' }\n    ],\n    [\n      'Machine Parts',\n      { key: 'SIN', value: 'Singapore Changi Airport' }\n    ],\n    [\n      'Food Products',\n      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n    ]\n  ];\n\n  readonly airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' }\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'autocomplete',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-autocomplete-cell-type></example5-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    [\n      'Electronics and Gadgets',\n      { key: 'LAX', value: 'Los Angeles International Airport' },\n    ],\n    [\n      'Medical Supplies',\n      { key: 'JFK', value: 'John F. Kennedy International Airport' }\n    ],\n    [\n      'Auto Parts',\n      { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n    ],\n    [\n      'Fresh Produce',\n      { key: 'LHR', value: 'London Heathrow Airport' }\n    ],\n    [\n      'Textiles',\n      { key: 'CDG', value: 'Charles de Gaulle Airport' }\n    ],\n    [\n      'Industrial Equipment',\n      { key: 'DXB', value: 'Dubai International Airport' }\n    ],\n    [\n      'Pharmaceuticals',\n      { key: 'HND', value: 'Tokyo Haneda Airport' }\n    ],\n    [\n      'Consumer Goods',\n      { key: 'PEK', value: 'Beijing Capital International Airport' }\n    ],\n    [\n      'Machine Parts',\n      { key: 'SIN', value: 'Singapore Changi Airport' }\n    ],\n    [\n      'Food Products',\n      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n    ]\n  ];\n\n  readonly airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' }\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'autocomplete',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json
index 5c897eaad..6015eed18 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-autocomplete-cell-type></example6-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly fruits = [\n    'Apple',\n    'Apricot',\n    'Avocado',\n    'Banana',\n    'Blueberry',\n    'Cherry',\n    'Grape',\n    'Lemon',\n    'Lime',\n    'Mango',\n    'Orange',\n    'Peach',\n    'Pear',\n    'Pineapple',\n    'Plum',\n    'Raspberry',\n    'Strawberry',\n    'Watermelon',\n  ];\n\n  readonly data = [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Filter: true (default)', 'Filter: false'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.fruits,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.fruits,\n        strict: false,\n        // don't hide options that don't match the search query\n        filter: false,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-autocomplete-cell-type></example6-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly fruits = [\n    'Apple',\n    'Apricot',\n    'Avocado',\n    'Banana',\n    'Blueberry',\n    'Cherry',\n    'Grape',\n    'Lemon',\n    'Lime',\n    'Mango',\n    'Orange',\n    'Peach',\n    'Pear',\n    'Pineapple',\n    'Plum',\n    'Raspberry',\n    'Strawberry',\n    'Watermelon',\n  ];\n\n  readonly data = [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Filter: true (default)', 'Filter: false'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.fruits,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.fruits,\n        strict: false,\n        // don't hide options that don't match the search query\n        filter: false,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json
index 20d582e4c..8d0af151e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-autocomplete-cell-type></example7-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example7-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly colors = [\n    'Black',\n    'Blue',\n    'brown',\n    'cyan',\n    'Gray',\n    'green',\n    'Lime',\n    'Magenta',\n    'Navy',\n    'olive',\n    'orange',\n    'Pink',\n    'Purple',\n    'Red',\n    'silver',\n    'Teal',\n    'White',\n    'Yellow',\n  ];\n\n  readonly data = [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.colors,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.colors,\n        strict: false,\n        // match case while searching autocomplete options\n        filteringCaseSensitive: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-autocomplete-cell-type></example7-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example7-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly colors = [\n    'Black',\n    'Blue',\n    'brown',\n    'cyan',\n    'Gray',\n    'green',\n    'Lime',\n    'Magenta',\n    'Navy',\n    'olive',\n    'orange',\n    'Pink',\n    'Purple',\n    'Red',\n    'silver',\n    'Teal',\n    'White',\n    'Yellow',\n  ];\n\n  readonly data = [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.colors,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.colors,\n        strict: false,\n        // match case while searching autocomplete options\n        filteringCaseSensitive: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json
index 035774021..536004470 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example8-autocomplete-cell-type></example8-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example8-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly statuses = [\n    'Backlog',\n    'In progress',\n    'Blocked',\n    'Done',\n    'Cancelled',\n  ];\n\n  readonly data = [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Source order (default)', 'Alphabetical order'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.statuses,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.statuses,\n        strict: false,\n        // sort suggestions alphabetically instead of using the `source` order\n        sortByRelevance: false,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example8-autocomplete-cell-type></example8-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example8-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly statuses = [\n    'Backlog',\n    'In progress',\n    'Blocked',\n    'Done',\n    'Cancelled',\n  ];\n\n  readonly data = [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Source order (default)', 'Alphabetical order'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.statuses,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.statuses,\n        strict: false,\n        // sort suggestions alphabetically instead of using the `source` order\n        sortByRelevance: false,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json
index 6cc3f87df..bb04ca889 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example9-autocomplete-cell-type></example9-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example9-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly stockStatuses = [\n    '<span style=\"color: #1a7f37\">In stock</span>',\n    '<span style=\"color: #b35900\">Low stock</span>',\n    '<span style=\"color: #c92a2a\">Out of stock</span>',\n    '<span style=\"color: #495057\">Backordered</span>',\n    '<span style=\"color: #495057\">Discontinued</span>',\n  ];\n\n  readonly data = [\n    [this.stockStatuses[0], this.stockStatuses[0]],\n    [this.stockStatuses[1], this.stockStatuses[1]],\n    [this.stockStatuses[2], this.stockStatuses[2]],\n    [this.stockStatuses[3], this.stockStatuses[3]],\n    [this.stockStatuses[4], this.stockStatuses[4]],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.stockStatuses,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.stockStatuses,\n        strict: false,\n        // render `source` values as HTML — only use with trusted, static data\n        allowHtml: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example9-autocomplete-cell-type></example9-autocomplete-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example9-autocomplete-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly stockStatuses = [\n    '<span style=\"color: #1a7f37\">In stock</span>',\n    '<span style=\"color: #b35900\">Low stock</span>',\n    '<span style=\"color: #c92a2a\">Out of stock</span>',\n    '<span style=\"color: #495057\">Backordered</span>',\n    '<span style=\"color: #495057\">Discontinued</span>',\n  ];\n\n  readonly data = [\n    [this.stockStatuses[0], this.stockStatuses[0]],\n    [this.stockStatuses[1], this.stockStatuses[1]],\n    [this.stockStatuses[2], this.stockStatuses[2]],\n    [this.stockStatuses[3], this.stockStatuses[3]],\n    [this.stockStatuses[4], this.stockStatuses[4]],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n    columns: [\n      {\n        type: 'autocomplete',\n        source: this.stockStatuses,\n        strict: false,\n      },\n      {\n        type: 'autocomplete',\n        source: this.stockStatuses,\n        strict: false,\n        // render `source` values as HTML — only use with trusted, static data\n        allowHtml: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json
index 8c4fc3aec..89ca6122e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json
index f8525a3b5..47224c4ad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses: string[] = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products: string[] = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses: string[] = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products: string[] = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json
index c79a1ebc5..17d7998c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json
index 623d2c359..f167bf3b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses: string[] = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products: string[] = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers: string[] = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst warehouses: string[] = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products: string[] = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers: string[] = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json
index 64b083b7c..82e200d52 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query, process) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query, process) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json
index 0cd710293..7137cb631 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query, process) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query, process) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json
index 20521bff7..40bed83a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json
index b018f7abe..71892a048 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json
index cb30f087e..da8f036b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json
index d85c997a4..9bba57642 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json
index 4fdaa964b..806323064 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json
index ed5557550..31dba5df4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json
index a12ff64ab..a7917e9df 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json
index acb47bc4c..aee887a46 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json
index 110b66469..3f75820e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst statuses = [\n    'Backlog',\n    'In progress',\n    'Blocked',\n    'Done',\n    'Cancelled',\n];\nconst container = document.querySelector('#example8');\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Backlog', 'Backlog'],\n        ['In progress', 'In progress'],\n        ['Blocked', 'Blocked'],\n        ['Done', 'Done'],\n        ['Cancelled', 'Cancelled'],\n    ],\n    colHeaders: ['Source order (default)', 'Alphabetical order'],\n    columns: [\n        {\n            type: 'autocomplete',\n            source: statuses,\n            strict: false,\n            // sortByRelevance: true is the default — suggestions keep the order from `source`\n        },\n        {\n            type: 'autocomplete',\n            source: statuses,\n            strict: false,\n            // sort suggestions alphabetically instead of using the `source` order\n            sortByRelevance: false,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst statuses = [\n    'Backlog',\n    'In progress',\n    'Blocked',\n    'Done',\n    'Cancelled',\n];\nconst container = document.querySelector('#example8');\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Backlog', 'Backlog'],\n        ['In progress', 'In progress'],\n        ['Blocked', 'Blocked'],\n        ['Done', 'Done'],\n        ['Cancelled', 'Cancelled'],\n    ],\n    colHeaders: ['Source order (default)', 'Alphabetical order'],\n    columns: [\n        {\n            type: 'autocomplete',\n            source: statuses,\n            strict: false,\n            // sortByRelevance: true is the default — suggestions keep the order from `source`\n        },\n        {\n            type: 'autocomplete',\n            source: statuses,\n            strict: false,\n            // sort suggestions alphabetically instead of using the `source` order\n            sortByRelevance: false,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json
index 4c2d9bf1a..a297864ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ],\n  colHeaders: ['Source order (default)', 'Alphabetical order'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sortByRelevance: true is the default — suggestions keep the order from `source`\n    },\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sort suggestions alphabetically instead of using the `source` order\n      sortByRelevance: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ],\n  colHeaders: ['Source order (default)', 'Alphabetical order'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sortByRelevance: true is the default — suggestions keep the order from `source`\n    },\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sort suggestions alphabetically instead of using the `source` order\n      sortByRelevance: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json
index 42ea4e7a5..f76943b03 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n    '<span style=\"color: #1a7f37\">In stock</span>',\n    '<span style=\"color: #b35900\">Low stock</span>',\n    '<span style=\"color: #c92a2a\">Out of stock</span>',\n    '<span style=\"color: #495057\">Backordered</span>',\n    '<span style=\"color: #495057\">Discontinued</span>',\n];\nconst container = document.querySelector('#example9');\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        [stockStatuses[0], stockStatuses[0]],\n        [stockStatuses[1], stockStatuses[1]],\n        [stockStatuses[2], stockStatuses[2]],\n        [stockStatuses[3], stockStatuses[3]],\n        [stockStatuses[4], stockStatuses[4]],\n    ],\n    colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n    columns: [\n        {\n            type: 'autocomplete',\n            source: stockStatuses,\n            strict: false,\n            // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n        },\n        {\n            type: 'autocomplete',\n            source: stockStatuses,\n            strict: false,\n            // render `source` values as HTML — only use with trusted, static data\n            allowHtml: true,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n    '<span style=\"color: #1a7f37\">In stock</span>',\n    '<span style=\"color: #b35900\">Low stock</span>',\n    '<span style=\"color: #c92a2a\">Out of stock</span>',\n    '<span style=\"color: #495057\">Backordered</span>',\n    '<span style=\"color: #495057\">Discontinued</span>',\n];\nconst container = document.querySelector('#example9');\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        [stockStatuses[0], stockStatuses[0]],\n        [stockStatuses[1], stockStatuses[1]],\n        [stockStatuses[2], stockStatuses[2]],\n        [stockStatuses[3], stockStatuses[3]],\n        [stockStatuses[4], stockStatuses[4]],\n    ],\n    colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n    columns: [\n        {\n            type: 'autocomplete',\n            source: stockStatuses,\n            strict: false,\n            // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n        },\n        {\n            type: 'autocomplete',\n            source: stockStatuses,\n            strict: false,\n            // render `source` values as HTML — only use with trusted, static data\n            allowHtml: true,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json
index 72a9589c6..9fc17407b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [stockStatuses[0], stockStatuses[0]],\n    [stockStatuses[1], stockStatuses[1]],\n    [stockStatuses[2], stockStatuses[2]],\n    [stockStatuses[3], stockStatuses[3]],\n    [stockStatuses[4], stockStatuses[4]],\n  ],\n  colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n    },\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // render `source` values as HTML — only use with trusted, static data\n      allowHtml: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [stockStatuses[0], stockStatuses[0]],\n    [stockStatuses[1], stockStatuses[1]],\n    [stockStatuses[2], stockStatuses[2]],\n    [stockStatuses[3], stockStatuses[3]],\n    [stockStatuses[4], stockStatuses[4]],\n  ],\n  colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n    },\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // render `source` values as HTML — only use with trusted, static data\n      allowHtml: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json
index 8cfd94948..b6280df4e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  const warehouses = [\n    'Seattle',\n    'Denver',\n    'Portland',\n    'Austin',\n    'Minneapolis',\n    'Boston',\n    'Chicago',\n    'Phoenix',\n    'Atlanta',\n    'Dallas',\n    'San Jose',\n    'Columbus',\n  ];\n  const products = [\n    'Stainless Steel Water Bottle',\n    'Wireless Mouse',\n    'Ergonomic Office Chair',\n    'USB-C Charging Cable',\n    'Aluminum Water Filter',\n    'Canvas Tote Bag',\n    'USB-C Hub',\n    'Ceramic Mug Set',\n    'Desk Lamp',\n    'Laptop Stand',\n    'Bluetooth Speaker',\n    'Standing Desk',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Supplier', 'SKU', 'Warehouse', 'Product']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: [\n            'Harbor Goods',\n            'Alpine Supply Co.',\n            'Cascade Distributors',\n            'Summit Trading',\n            'Northgate Wholesale',\n            'Nordic Traders',\n          ],\n          strict: false,\n        },\n        {},\n        {\n          type: 'autocomplete',\n          source: warehouses,\n          strict: false,\n          visibleRows: 4,\n        },\n        {\n          type: 'autocomplete',\n          source: products,\n          strict: false,\n          trimDropdown: false,\n          width: 120,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  const warehouses = [\n    'Seattle',\n    'Denver',\n    'Portland',\n    'Austin',\n    'Minneapolis',\n    'Boston',\n    'Chicago',\n    'Phoenix',\n    'Atlanta',\n    'Dallas',\n    'San Jose',\n    'Columbus',\n  ];\n  const products = [\n    'Stainless Steel Water Bottle',\n    'Wireless Mouse',\n    'Ergonomic Office Chair',\n    'USB-C Charging Cable',\n    'Aluminum Water Filter',\n    'Canvas Tote Bag',\n    'USB-C Hub',\n    'Ceramic Mug Set',\n    'Desk Lamp',\n    'Laptop Stand',\n    'Bluetooth Speaker',\n    'Standing Desk',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Supplier', 'SKU', 'Warehouse', 'Product']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: [\n            'Harbor Goods',\n            'Alpine Supply Co.',\n            'Cascade Distributors',\n            'Summit Trading',\n            'Northgate Wholesale',\n            'Nordic Traders',\n          ],\n          strict: false,\n        },\n        {},\n        {\n          type: 'autocomplete',\n          source: warehouses,\n          strict: false,\n          visibleRows: 4,\n        },\n        {\n          type: 'autocomplete',\n          source: products,\n          strict: false,\n          trimDropdown: false,\n          width: 120,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json
index fe91ad500..1d0bdb133 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  const warehouses = [\n    'Seattle',\n    'Denver',\n    'Portland',\n    'Austin',\n    'Minneapolis',\n    'Boston',\n    'Chicago',\n    'Phoenix',\n    'Atlanta',\n    'Dallas',\n    'San Jose',\n    'Columbus',\n  ];\n  const products = [\n    'Stainless Steel Water Bottle',\n    'Wireless Mouse',\n    'Ergonomic Office Chair',\n    'USB-C Charging Cable',\n    'Aluminum Water Filter',\n    'Canvas Tote Bag',\n    'USB-C Hub',\n    'Ceramic Mug Set',\n    'Desk Lamp',\n    'Laptop Stand',\n    'Bluetooth Speaker',\n    'Standing Desk',\n  ];\n\n  const suppliers = [\n    'Harbor Goods',\n    'Alpine Supply Co.',\n    'Cascade Distributors',\n    'Summit Trading',\n    'Northgate Wholesale',\n    'Nordic Traders',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      sanitizer={sanitizeHeader}\n      data={data}\n      colHeaders={['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: suppliers,\n          strict: true,\n          allowInvalid: false,\n        },\n        {},\n        {\n          type: 'autocomplete',\n          source: warehouses,\n          strict: true,\n        },\n        {\n          type: 'autocomplete',\n          source: products,\n          strict: true,\n          allowInvalid: true, // true is default\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  const warehouses = [\n    'Seattle',\n    'Denver',\n    'Portland',\n    'Austin',\n    'Minneapolis',\n    'Boston',\n    'Chicago',\n    'Phoenix',\n    'Atlanta',\n    'Dallas',\n    'San Jose',\n    'Columbus',\n  ];\n  const products = [\n    'Stainless Steel Water Bottle',\n    'Wireless Mouse',\n    'Ergonomic Office Chair',\n    'USB-C Charging Cable',\n    'Aluminum Water Filter',\n    'Canvas Tote Bag',\n    'USB-C Hub',\n    'Ceramic Mug Set',\n    'Desk Lamp',\n    'Laptop Stand',\n    'Bluetooth Speaker',\n    'Standing Desk',\n  ];\n\n  const suppliers = [\n    'Harbor Goods',\n    'Alpine Supply Co.',\n    'Cascade Distributors',\n    'Summit Trading',\n    'Northgate Wholesale',\n    'Nordic Traders',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      sanitizer={sanitizeHeader}\n      data={data}\n      colHeaders={['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: suppliers,\n          strict: true,\n          allowInvalid: false,\n        },\n        {},\n        {\n          type: 'autocomplete',\n          source: warehouses,\n          strict: true,\n        },\n        {\n          type: 'autocomplete',\n          source: products,\n          strict: true,\n          allowInvalid: true, // true is default\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json
index 0170a8157..e3d59abb5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Supplier', 'SKU', 'Warehouse', 'Product']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source(_query, process) {\n            fetch('/docs/scripts/json/autocomplete.json')\n              .then((response) => response.json())\n              .then((response) => process(response.data));\n          },\n          strict: true,\n        },\n        {}, // SKU is a default text column\n        {}, // Warehouse is a default text column\n        {}, // Product is a default text column\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n  ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n  ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n  ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n  ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Supplier', 'SKU', 'Warehouse', 'Product']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source(_query, process) {\n            fetch('/docs/scripts/json/autocomplete.json')\n              .then((response) => response.json())\n              .then((response) => process(response.data));\n          },\n          strict: true,\n        },\n        {}, // SKU is a default text column\n        {}, // Warehouse is a default text column\n        {}, // Product is a default text column\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json
index feb1bdd4a..a731c1cc1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', 'Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', \"Chicago O'Hare International Airport\"],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol'],\n  ];\n\n  const airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    \"Chicago O'Hare International Airport\",\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'autocomplete',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', 'Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', \"Chicago O'Hare International Airport\"],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol'],\n  ];\n\n  const airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    \"Chicago O'Hare International Airport\",\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'autocomplete',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json
index d84673fed..e62d6668f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n    ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n  ];\n\n  const airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'autocomplete',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n    ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n  ];\n\n  const airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'autocomplete',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json
index 3530e251b..54efb0a67 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst data = [\n  ['Apple', 'Apple'],\n  ['Banana', 'Banana'],\n  ['Cherry', 'Cherry'],\n  ['Mango', 'Mango'],\n  ['Orange', 'Orange'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Filter: true (default)', 'Filter: false']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: fruits,\n          strict: false,\n          // filter: true is the default — only matching options are shown\n        },\n        {\n          type: 'autocomplete',\n          source: fruits,\n          strict: false,\n          // don't hide options that don't match the search query\n          filter: false,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example6.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst data = [\n  ['Apple', 'Apple'],\n  ['Banana', 'Banana'],\n  ['Cherry', 'Cherry'],\n  ['Mango', 'Mango'],\n  ['Orange', 'Orange'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Filter: true (default)', 'Filter: false']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: fruits,\n          strict: false,\n          // filter: true is the default — only matching options are shown\n        },\n        {\n          type: 'autocomplete',\n          source: fruits,\n          strict: false,\n          // don't hide options that don't match the search query\n          filter: false,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example6.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json
index 4f57699d3..30700226f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst data = [\n  ['Black', 'Black'],\n  ['Blue', 'Blue'],\n  ['Gray', 'Gray'],\n  ['Red', 'Red'],\n  ['White', 'White'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Case-insensitive (default)', 'Case-sensitive']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: colors,\n          strict: false,\n          // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n        },\n        {\n          type: 'autocomplete',\n          source: colors,\n          strict: false,\n          // match case while searching autocomplete options\n          filteringCaseSensitive: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example7.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst data = [\n  ['Black', 'Black'],\n  ['Blue', 'Blue'],\n  ['Gray', 'Gray'],\n  ['Red', 'Red'],\n  ['White', 'White'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Case-insensitive (default)', 'Case-sensitive']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: colors,\n          strict: false,\n          // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n        },\n        {\n          type: 'autocomplete',\n          source: colors,\n          strict: false,\n          // match case while searching autocomplete options\n          filteringCaseSensitive: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example7.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json
index e353ee924..fda2eac1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst data = [\n  ['Backlog', 'Backlog'],\n  ['In progress', 'In progress'],\n  ['Blocked', 'Blocked'],\n  ['Done', 'Done'],\n  ['Cancelled', 'Cancelled'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Source order (default)', 'Alphabetical order']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: statuses,\n          strict: false,\n          // sortByRelevance: true is the default — suggestions keep the order from `source`\n        },\n        {\n          type: 'autocomplete',\n          source: statuses,\n          strict: false,\n          // sort suggestions alphabetically instead of using the `source` order\n          sortByRelevance: false,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example8.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst data = [\n  ['Backlog', 'Backlog'],\n  ['In progress', 'In progress'],\n  ['Blocked', 'Blocked'],\n  ['Done', 'Done'],\n  ['Cancelled', 'Cancelled'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Source order (default)', 'Alphabetical order']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: statuses,\n          strict: false,\n          // sortByRelevance: true is the default — suggestions keep the order from `source`\n        },\n        {\n          type: 'autocomplete',\n          source: statuses,\n          strict: false,\n          // sort suggestions alphabetically instead of using the `source` order\n          sortByRelevance: false,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example8.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json
index 3654d19ca..d18d600d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst data = [\n  [stockStatuses[0], stockStatuses[0]],\n  [stockStatuses[1], stockStatuses[1]],\n  [stockStatuses[2], stockStatuses[2]],\n  [stockStatuses[3], stockStatuses[3]],\n  [stockStatuses[4], stockStatuses[4]],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['allowHtml: false (default)', 'allowHtml: true']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: stockStatuses,\n          strict: false,\n          // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n        },\n        {\n          type: 'autocomplete',\n          source: stockStatuses,\n          strict: false,\n          // render `source` values as HTML — only use with trusted, static data\n          allowHtml: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example9.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst data = [\n  [stockStatuses[0], stockStatuses[0]],\n  [stockStatuses[1], stockStatuses[1]],\n  [stockStatuses[2], stockStatuses[2]],\n  [stockStatuses[3], stockStatuses[3]],\n  [stockStatuses[4], stockStatuses[4]],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['allowHtml: false (default)', 'allowHtml: true']}\n      columns={[\n        {\n          type: 'autocomplete',\n          source: stockStatuses,\n          strict: false,\n          // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n        },\n        {\n          type: 'autocomplete',\n          source: stockStatuses,\n          strict: false,\n          // render `source` values as HTML — only use with trusted, static data\n          allowHtml: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example9.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json
index 88608185d..eca332db0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: [\n        'Harbor Goods',\n        'Alpine Supply Co.',\n        'Cascade Distributors',\n        'Summit Trading',\n        'Northgate Wholesale',\n        'Nordic Traders',\n      ],\n      strict: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: false,\n      visibleRows: 4,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: false,\n      trimDropdown: false,\n      width: 120,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json
index 5cd57f5e3..266841832 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst warehouses = [\n  'Seattle',\n  'Denver',\n  'Portland',\n  'Austin',\n  'Minneapolis',\n  'Boston',\n  'Chicago',\n  'Phoenix',\n  'Atlanta',\n  'Dallas',\n  'San Jose',\n  'Columbus',\n];\nconst products = [\n  'Stainless Steel Water Bottle',\n  'Wireless Mouse',\n  'Ergonomic Office Chair',\n  'USB-C Charging Cable',\n  'Aluminum Water Filter',\n  'Canvas Tote Bag',\n  'USB-C Hub',\n  'Ceramic Mug Set',\n  'Desk Lamp',\n  'Laptop Stand',\n  'Bluetooth Speaker',\n  'Standing Desk',\n];\n\nconst suppliers = [\n  'Harbor Goods',\n  'Alpine Supply Co.',\n  'Cascade Distributors',\n  'Summit Trading',\n  'Northgate Wholesale',\n  'Nordic Traders',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier<br>(allowInvalid false)', 'SKU', 'Warehouse', 'Product<br>(allowInvalid true)'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: suppliers,\n      strict: true,\n      allowInvalid: false,\n    },\n    {},\n    {\n      type: 'autocomplete',\n      source: warehouses,\n      strict: true,\n    },\n    {\n      type: 'autocomplete',\n      source: products,\n      strict: true,\n      allowInvalid: true, // true is default\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json
index c3b912597..3b10fed31 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query: string, process: (data: string[]) => void) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Harbor Goods', 'SKU-4821', 'Seattle', 'Stainless Steel Water Bottle'],\n    ['Alpine Supply Co.', 'SKU-0093', 'Denver', 'Wireless Mouse'],\n    ['Cascade Distributors', 'SKU-1170', 'Portland', 'Ergonomic Office Chair'],\n    ['Summit Trading', 'SKU-2208', 'Austin', 'USB-C Charging Cable'],\n    ['Northgate Wholesale', 'SKU-3341', 'Minneapolis', 'Aluminum Water Filter'],\n  ],\n  colHeaders: ['Supplier', 'SKU', 'Warehouse', 'Product'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source(_query: string, process: (data: string[]) => void) {\n        fetch('/docs/scripts/json/autocomplete.json')\n          .then((response) => response.json())\n          .then((response) => process(response.data));\n      },\n      strict: true,\n    },\n    {}, // SKU is a default text column\n    {}, // Warehouse is a default text column\n    {}, // Product is a default text column\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json
index a771d698d..c6fb140e1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json
index adea583fd..ee24fc82b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'autocomplete',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json
index e5fbcd2c1..a84700515 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example6.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst fruits: string[] = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Banana',\n  'Blueberry',\n  'Cherry',\n  'Grape',\n  'Lemon',\n  'Lime',\n  'Mango',\n  'Orange',\n  'Peach',\n  'Pear',\n  'Pineapple',\n  'Plum',\n  'Raspberry',\n  'Strawberry',\n  'Watermelon',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Apple', 'Apple'],\n    ['Banana', 'Banana'],\n    ['Cherry', 'Cherry'],\n    ['Mango', 'Mango'],\n    ['Orange', 'Orange'],\n  ],\n  colHeaders: ['Filter: true (default)', 'Filter: false'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // filter: true is the default — only matching options are shown\n    },\n    {\n      type: 'autocomplete',\n      source: fruits,\n      strict: false,\n      // don't hide options that don't match the search query\n      filter: false,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example6.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json
index 266a206ea..570d0c254 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example7.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors: string[] = [\n  'Black',\n  'Blue',\n  'brown',\n  'cyan',\n  'Gray',\n  'green',\n  'Lime',\n  'Magenta',\n  'Navy',\n  'olive',\n  'orange',\n  'Pink',\n  'Purple',\n  'Red',\n  'silver',\n  'Teal',\n  'White',\n  'Yellow',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Black', 'Black'],\n    ['Blue', 'Blue'],\n    ['Gray', 'Gray'],\n    ['Red', 'Red'],\n    ['White', 'White'],\n  ],\n  colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n    },\n    {\n      type: 'autocomplete',\n      source: colors,\n      strict: false,\n      // match case while searching autocomplete options\n      filteringCaseSensitive: true,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example7.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json
index 69120ca5e..067647dd5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ],\n  colHeaders: ['Source order (default)', 'Alphabetical order'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sortByRelevance: true is the default — suggestions keep the order from `source`\n    },\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sort suggestions alphabetically instead of using the `source` order\n      sortByRelevance: false,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example8\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example8.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n  'Backlog',\n  'In progress',\n  'Blocked',\n  'Done',\n  'Cancelled',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['Backlog', 'Backlog'],\n    ['In progress', 'In progress'],\n    ['Blocked', 'Blocked'],\n    ['Done', 'Done'],\n    ['Cancelled', 'Cancelled'],\n  ],\n  colHeaders: ['Source order (default)', 'Alphabetical order'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sortByRelevance: true is the default — suggestions keep the order from `source`\n    },\n    {\n      type: 'autocomplete',\n      source: statuses,\n      strict: false,\n      // sort suggestions alphabetically instead of using the `source` order\n      sortByRelevance: false,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example8\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example8.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json
index 07d61df53..12f0abda1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    [stockStatuses[0], stockStatuses[0]],\n    [stockStatuses[1], stockStatuses[1]],\n    [stockStatuses[2], stockStatuses[2]],\n    [stockStatuses[3], stockStatuses[3]],\n    [stockStatuses[4], stockStatuses[4]],\n  ],\n  colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n    },\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // render `source` values as HTML — only use with trusted, static data\n      allowHtml: true,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example9.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n  '<span style=\"color: #1a7f37\">In stock</span>',\n  '<span style=\"color: #b35900\">Low stock</span>',\n  '<span style=\"color: #c92a2a\">Out of stock</span>',\n  '<span style=\"color: #495057\">Backordered</span>',\n  '<span style=\"color: #495057\">Discontinued</span>',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    [stockStatuses[0], stockStatuses[0]],\n    [stockStatuses[1], stockStatuses[1]],\n    [stockStatuses[2], stockStatuses[2]],\n    [stockStatuses[3], stockStatuses[3]],\n    [stockStatuses[4], stockStatuses[4]],\n  ],\n  colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n  columns: [\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n    },\n    {\n      type: 'autocomplete',\n      source: stockStatuses,\n      strict: false,\n      // render `source` values as HTML — only use with trusted, static data\n      allowHtml: true,\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example9.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json
index 4609be719..357c243ee 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-cell-type></example1-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.backgroundColor = 'green';\n};\n\nconst colors: string[] = [\n  'yellow',\n  'red',\n  'orange',\n  'green',\n  'blue',\n  'gray',\n  'black',\n  'white',\n];\n\n@Component({\n  selector: 'example1-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: 'Ted',\n      isActive: true,\n      color: 'orange',\n      date: '2015-01-01',\n    },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id', type: 'text' },\n      // 'text' is default, you don't actually need to declare it\n      { data: 'name', renderer: yellowRenderer },\n      // use default 'text' cell type but overwrite its renderer with yellowRenderer\n      { data: 'isActive', type: 'checkbox' },\n      { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'color', type: 'autocomplete', source: colors },\n    ],\n    cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n    cells: (row: number, col: number) => {\n      if (row === 0 && col === 0) {\n        return { renderer: greenRenderer };\n      }\n\n      return {};\n    },\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-cell-type></example1-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.backgroundColor = 'green';\n};\n\nconst colors: string[] = [\n  'yellow',\n  'red',\n  'orange',\n  'green',\n  'blue',\n  'gray',\n  'black',\n  'white',\n];\n\n@Component({\n  selector: 'example1-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: 'Ted',\n      isActive: true,\n      color: 'orange',\n      date: '2015-01-01',\n    },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id', type: 'text' },\n      // 'text' is default, you don't actually need to declare it\n      { data: 'name', renderer: yellowRenderer },\n      // use default 'text' cell type but overwrite its renderer with yellowRenderer\n      { data: 'isActive', type: 'checkbox' },\n      { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'color', type: 'autocomplete', source: colors },\n    ],\n    cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n    cells: (row: number, col: number) => {\n      if (row === 0 && col === 0) {\n        return { renderer: greenRenderer };\n      }\n\n      return {};\n    },\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json
index 6ee33dc8d..172444383 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Cell type · Empty cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-type></example2-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columnSorting: {\n      sortEmptyCells: true,\n    },\n    columns: [\n      {\n        columnSorting: {\n          indicator: false,\n          headerAction: false,\n          compareFunctionFactory: function compareFunctionFactory() {\n            return function comparator() {\n              return 0; // Don't sort the first visual column.\n            };\n          },\n        },\n        readOnly: true,\n      },\n      {},\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      { type: 'checkbox' },\n      { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n      { type: 'password' },\n    ],\n    preventOverflow: 'horizontal',\n    colHeaders: [\n      'value underneath',\n      'type:text',\n      'type:numeric',\n      'type:checkbox',\n      'type:dropdown',\n      'type:password',\n    ],\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Cell type · Empty cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-cell-type></example2-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columnSorting: {\n      sortEmptyCells: true,\n    },\n    columns: [\n      {\n        columnSorting: {\n          indicator: false,\n          headerAction: false,\n          compareFunctionFactory: function compareFunctionFactory() {\n            return function comparator() {\n              return 0; // Don't sort the first visual column.\n            };\n          },\n        },\n        readOnly: true,\n      },\n      {},\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      { type: 'checkbox' },\n      { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n      { type: 'password' },\n    ],\n    preventOverflow: 'horizontal',\n    colHeaders: [\n      'value underneath',\n      'type:text',\n      'type:numeric',\n      'type:checkbox',\n      'type:dropdown',\n      'type:password',\n    ],\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json
index 080aaa305..a60f7d634 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-cell-type></example3-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type { CellMeta } from 'handsontable/settings';\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  {\n    type: 'intl-date',\n    locale: 'en-US',\n    dateFormat: { year: 'numeric', month: 'short', day: 'numeric' },\n  },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\n@Component({\n  selector: 'example3-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Setting', 'Value'],\n    columns: [{ readOnly: true }, {}],\n    cells: (row: number, col: number) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-cell-type></example3-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type { CellMeta } from 'handsontable/settings';\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  {\n    type: 'intl-date',\n    locale: 'en-US',\n    dateFormat: { year: 'numeric', month: 'short', day: 'numeric' },\n  },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\n@Component({\n  selector: 'example3-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Setting', 'Value'],\n    columns: [{ readOnly: true }, {}],\n    cells: (row: number, col: number) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json
index 87db45f48..d2fba3522 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\nconst yellowRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    {\n      data: 'date',\n      type: 'intl-date',\n      locale: 'en-US',\n      dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },\n    },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\nconst yellowRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    {\n      data: 'date',\n      type: 'intl-date',\n      locale: 'en-US',\n      dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },\n    },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json
index 6edb8fe98..0edf57e1a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n\n  td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json
index 6bb05ee98..bb3592095 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Empty cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: ['value underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Empty cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: ['value underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json
index b8d5052c2..4e452dee4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Empty cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: ['value underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Empty cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: ['value underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json
index 17a11120a..a83aa6fb6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells(row, col) {\n    return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells(row, col) {\n    return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json
index 5649bd429..711921928 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells(row, col) {\n    return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells(row, col) {\n    return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json
index 7977616ae..8d5a91aef 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: 'Ted',\n    isActive: true,\n    color: 'orange',\n    date: '2015-01-01',\n  },\n  { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n  { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n  { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n];\n\nconst ExampleComponent = () => {\n  const colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\n  const yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n    textRenderer(instance, td, ...rest);\n    td.style.backgroundColor = 'yellow';\n  };\n\n  const greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n    textRenderer(instance, td, ...rest);\n\n    td.style.backgroundColor = 'green';\n  };\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id', type: 'text' },\n        // 'text' is default, you don't actually need to declare it\n        { data: 'name', renderer: yellowRenderer },\n        // use default 'text' cell type but overwrite its renderer with yellowRenderer\n        { data: 'isActive', type: 'checkbox' },\n        { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'color', type: 'autocomplete', source: colors },\n      ]}\n      cell={[{ row: 1, col: 0, renderer: greenRenderer }]}\n      cells={function (row, col) {\n        if (row === 0 && col === 0) {\n          this.renderer = greenRenderer;\n\n          return { renderer: this.renderer };\n        }\n\n        return {};\n      }}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example1.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: 'Ted',\n    isActive: true,\n    color: 'orange',\n    date: '2015-01-01',\n  },\n  { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n  { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n  { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n];\n\nconst ExampleComponent = () => {\n  const colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\n  const yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n    textRenderer(instance, td, ...rest);\n    td.style.backgroundColor = 'yellow';\n  };\n\n  const greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n    textRenderer(instance, td, ...rest);\n\n    td.style.backgroundColor = 'green';\n  };\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id', type: 'text' },\n        // 'text' is default, you don't actually need to declare it\n        { data: 'name', renderer: yellowRenderer },\n        // use default 'text' cell type but overwrite its renderer with yellowRenderer\n        { data: 'isActive', type: 'checkbox' },\n        { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'color', type: 'autocomplete', source: colors },\n      ]}\n      cell={[{ row: 1, col: 0, renderer: greenRenderer }]}\n      cells={function (row, col) {\n        if (row === 0 && col === 0) {\n          this.renderer = greenRenderer;\n\n          return { renderer: this.renderer };\n        }\n\n        return {};\n      }}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example1.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json
index d76166058..a1cf0ed4d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Cell type · Empty cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['empty string', '', '', '', '', ''],\n  ['null', null, null, null, null, null],\n  ['undefined', undefined, undefined, undefined, undefined, undefined],\n  ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columnSorting={{\n        sortEmptyCells: true,\n      }}\n      columns={[\n        {\n          columnSorting: {\n            indicator: false,\n            headerAction: false,\n            compareFunctionFactory: function compareFunctionFactory() {\n              return function comparator() {\n                return 0; // Don't sort the first visual column.\n              };\n            },\n          },\n          readOnly: true,\n        },\n        {},\n        {\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        { type: 'checkbox' },\n        { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n        { type: 'password' },\n      ]}\n      preventOverflow=\"horizontal\"\n      colHeaders={[\n        'value underneath',\n        'type:text',\n        'type:numeric',\n        'type:checkbox',\n        'type:dropdown',\n        'type:password',\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example2.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Cell type · Empty cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['empty string', '', '', '', '', ''],\n  ['null', null, null, null, null, null],\n  ['undefined', undefined, undefined, undefined, undefined, undefined],\n  ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columnSorting={{\n        sortEmptyCells: true,\n      }}\n      columns={[\n        {\n          columnSorting: {\n            indicator: false,\n            headerAction: false,\n            compareFunctionFactory: function compareFunctionFactory() {\n              return function comparator() {\n                return 0; // Don't sort the first visual column.\n              };\n            },\n          },\n          readOnly: true,\n        },\n        {},\n        {\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        { type: 'checkbox' },\n        { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n        { type: 'password' },\n      ]}\n      preventOverflow=\"horizontal\"\n      colHeaders={[\n        'value underneath',\n        'type:text',\n        'type:numeric',\n        'type:checkbox',\n        'type:dropdown',\n        'type:password',\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example2.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json
index ee60cd99f..de3f8e52c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst data = [\n  ['Status', 'In progress'],\n  ['Budget', 250000],\n  ['Due date', '2026-09-30'],\n  ['Approved', true],\n  ['Project name', 'Website redesign'],\n  ['Owner', 'Ana García'],\n  ['Access code', 'release-2026'],\n];\n\nconst ExampleComponent = () => (\n  <HotTable\n    data={data}\n    colHeaders={['Setting', 'Value']}\n    columns={[{ readOnly: true }, {}]}\n    cells={(row, col) => (col === 1 ? (valueCellMeta[row] ?? {}) : {})}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example3.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst data = [\n  ['Status', 'In progress'],\n  ['Budget', 250000],\n  ['Due date', '2026-09-30'],\n  ['Approved', true],\n  ['Project name', 'Website redesign'],\n  ['Owner', 'Ana García'],\n  ['Access code', 'release-2026'],\n];\n\nconst ExampleComponent = () => (\n  <HotTable\n    data={data}\n    colHeaders={['Setting', 'Value']}\n    columns={[{ readOnly: true }, {}]}\n    cells={(row, col) => (col === 1 ? (valueCellMeta[row] ?? {}) : {})}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example3.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json
index 992c923af..d1d3f9ef6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'green';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    {\n      data: 'date',\n      type: 'intl-date',\n      locale: 'en-US',\n      dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },\n    },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example1.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n  textRenderer(instance, td, ...rest);\n  td.style.backgroundColor = 'green';\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n    { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n    { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n    { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n  ],\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id', type: 'text' },\n    // 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    // use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    {\n      data: 'date',\n      type: 'intl-date',\n      locale: 'en-US',\n      dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },\n    },\n    { data: 'color', type: 'autocomplete', source: colors },\n  ],\n  cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n  cells(row, col) {\n    if (row === 0 && col === 0) {\n      this.renderer = greenRenderer;\n\n      return { renderer: this.renderer };\n    }\n\n    return {};\n  },\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example1.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json
index 9aa034d80..9701f507f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Cell type · Empty cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: [\n    'value underneath',\n    'type:text',\n    'type:numeric',\n    'type:checkbox',\n    'type:dropdown',\n    'type:password',\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example2.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Cell type · Empty cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['empty string', '', '', '', '', ''],\n    ['null', null, null, null, null, null],\n    ['undefined', undefined, undefined, undefined, undefined, undefined],\n    ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n  ],\n  columnSorting: {\n    sortEmptyCells: true,\n  },\n  columns: [\n    {\n      columnSorting: {\n        indicator: false,\n        headerAction: false,\n        compareFunctionFactory: function compareFunctionFactory() {\n          return function comparator() {\n            return 0; // Don't sort the first visual column.\n          };\n        },\n      },\n      readOnly: true,\n    },\n    {},\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    { type: 'checkbox' },\n    { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n    { type: 'password' },\n  ],\n  preventOverflow: 'horizontal',\n  colHeaders: [\n    'value underneath',\n    'type:text',\n    'type:numeric',\n    'type:checkbox',\n    'type:dropdown',\n    'type:password',\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example2.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json
index 807bfb84d..56090af89 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta, GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells: (row, col) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example3.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta, GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n  ['Ana García', 'Product Manager'],\n  ['James Okafor', 'Senior Engineer'],\n  ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n  { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n  {\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n  },\n  { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n  { type: 'checkbox' },\n  { type: 'text' },\n  {\n    type: 'handsontable',\n    handsontable: {\n      colHeaders: ['Name', 'Role'],\n      autoColumnSize: true,\n      data: projectMembers,\n      getValue() {\n        const selection = this.getSelectedLast();\n\n        return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n      },\n    },\n  },\n  { type: 'password' },\n];\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['Status', 'In progress'],\n    ['Budget', 250000],\n    ['Due date', '2026-09-30'],\n    ['Approved', true],\n    ['Project name', 'Website redesign'],\n    ['Owner', 'Ana García'],\n    ['Access code', 'release-2026'],\n  ],\n  colHeaders: ['Setting', 'Value'],\n  columns: [{ readOnly: true }, {}],\n  cells: (row, col) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/cell-type/vue/example3.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json
index b639cd079..b5869301e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-checkbox-cell-type></example1-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'available',\n        type: 'checkbox',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-checkbox-cell-type></example1-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'available',\n        type: 'checkbox',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json
index 97b17ca53..a3fe27ec8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-checkbox-cell-type></example2-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-checkbox-cell-type></example2-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json
index daaae525d..fa95d41d5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-checkbox-cell-type></example3-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'available',\n        type: 'checkbox',\n        label: {\n          position: 'after',\n          property: 'car', // Read value from row object\n        },\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n        label: {\n          position: 'before',\n          value: 'In black? ',\n        },\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-checkbox-cell-type></example3-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'available',\n        type: 'checkbox',\n        label: {\n          position: 'after',\n          property: 'car', // Read value from row object\n        },\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n        label: {\n          position: 'before',\n          value: 'In black? ',\n        },\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json
index fa7d6ffbf..d3df706e2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-checkbox-cell-type></example4-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n        label: {\n          position: 'after',\n          value: (function(\n            row: number,\n            column: number,\n            prop: string | number,\n            value: unknown\n          ) {\n            if (value === 'yes') {\n              return 'In black';\n            } else {\n              return 'Not in black';\n            }\n          }) as unknown as () => string,\n        },\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-checkbox-cell-type></example4-checkbox-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-checkbox-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car model', 'Year', 'Comes in black'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n      },\n      {\n        data: 'year',\n      },\n      {\n        data: 'comesInBlack',\n        type: 'checkbox',\n        checkedTemplate: 'yes',\n        uncheckedTemplate: 'no',\n        label: {\n          position: 'after',\n          value: (function(\n            row: number,\n            column: number,\n            prop: string | number,\n            value: unknown\n          ) {\n            if (value === 'yes') {\n              return 'In black';\n            } else {\n              return 'Not in black';\n            }\n          }) as unknown as () => string,\n        },\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
index 38547e9b6..c05baaa81 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json
index 0f48ba8bf..337fad9bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json
index 9df83c478..d419b0d78 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json
index d628db7a2..84661f0f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json
index bc70f1f2f..c5393f2f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json
index fe2f3df21..b225dcf33 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container!, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container!, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json
index 10d1f4b7c..b2a9b84a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row, column, prop, value) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row, column, prop, value) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json
index 9be53aeac..c4ba6ccb1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row: number, column: number, prop: string | number, value: string) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row: number, column: number, prop: string | number, value: string) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json
index f41502b4b..6cd6d5966 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year of manufacture', 'Available']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n          type: 'numeric',\n        },\n        {\n          data: 'available',\n          type: 'checkbox',\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year of manufacture', 'Available']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n          type: 'numeric',\n        },\n        {\n          data: 'available',\n          type: 'checkbox',\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json
index e2c0a34b7..8b42c3219 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year of manufacture', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n          type: 'numeric',\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year of manufacture', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n          type: 'numeric',\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json
index c9eecb383..a8387cb28 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Accepted', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'available',\n          type: 'checkbox',\n          label: {\n            position: 'after',\n            property: 'car', // Read value from row object\n          },\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n          label: {\n            position: 'before',\n            value: 'In black? ',\n          },\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    available: true,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    available: true,\n    comesInBlack: 'no',\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    available: false,\n    comesInBlack: 'yes',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    available: false,\n    comesInBlack: 'no',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Accepted', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'available',\n          type: 'checkbox',\n          label: {\n            position: 'after',\n            property: 'car', // Read value from row object\n          },\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n          label: {\n            position: 'before',\n            value: 'In black? ',\n          },\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json
index db540a065..49deeec1d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n  { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n  { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n  { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n  { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n          label: {\n            position: 'after',\n            value(row: number, column: number, prop: string | number, value: string) {\n              if (value === 'yes') {\n                return 'In black';\n              } else {\n                return 'Not in black';\n              }\n            },\n          },\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n  { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n  { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n  { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n  { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Car model', 'Year', 'Comes in black']}\n      height=\"auto\"\n      columns={[\n        {\n          data: 'car',\n        },\n        {\n          data: 'year',\n        },\n        {\n          data: 'comesInBlack',\n          type: 'checkbox',\n          checkedTemplate: 'yes',\n          uncheckedTemplate: 'no',\n          label: {\n            position: 'after',\n            value(row: number, column: number, prop: string | number, value: string) {\n              if (value === 'yes') {\n                return 'In black';\n              } else {\n                return 'Not in black';\n              }\n            },\n          },\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json
index bd85cea06..6193e6cf1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json
index 3f5bfc9ba..ecf2ab589 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json
index bc77980c1..a041e3f6a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      available: true,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      available: true,\n      comesInBlack: 'no',\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      available: false,\n      comesInBlack: 'yes',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      available: false,\n      comesInBlack: 'no',\n    },\n  ],\n  colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'available',\n      type: 'checkbox',\n      label: {\n        position: 'after',\n        property: 'car', // Read value from row object\n      },\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'before',\n        value: 'In black? ',\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json
index 63998add3..5f1127da9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row: number, column: number, prop: string | number, value: string) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n  ],\n  colHeaders: ['Car model', 'Year', 'Comes in black'],\n  height: 'auto',\n  columns: [\n    {\n      data: 'car',\n    },\n    {\n      data: 'year',\n    },\n    {\n      data: 'comesInBlack',\n      type: 'checkbox',\n      checkedTemplate: 'yes',\n      uncheckedTemplate: 'no',\n      label: {\n        position: 'after',\n        value(row: number, column: number, prop: string | number, value: string) {\n          if (value === 'yes') {\n            return 'In black';\n          } else {\n            return 'Not in black';\n          }\n        },\n      },\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json
index 704e36c57..b86d52558 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Date cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-date-cell-type></example1-date-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n  car: string;\n  product_date: string;\n  payment_date: string;\n  registration_date: string;\n}\n\n@Component({\n  selector: 'example1-date-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      product_date: '2002-06-15',\n      payment_date: '2002-05-20',\n      registration_date: '2002-07-01',\n    },\n    {\n      car: 'Citroën C4 Coupe',\n      product_date: '2007-03-22',\n      payment_date: '2007-02-28',\n      registration_date: '2007-04-10',\n    },\n    {\n      car: 'Audi A4 Avant',\n      product_date: '2011-09-08',\n      payment_date: '2011-08-15',\n      registration_date: '2011-09-20',\n    },\n    {\n      car: 'Opel Astra',\n      product_date: '2012-01-30',\n      payment_date: '2012-01-10',\n      registration_date: '2012-02-14',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      product_date: '2004-11-12',\n      payment_date: '2004-10-20',\n      registration_date: '2004-12-01',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n    locale: this.locale,\n    columns: [\n      {\n        type: 'text',\n        data: 'car',\n      },\n      {\n        type: 'intl-date',\n        data: 'product_date',\n        dateFormat: { dateStyle: 'short' },\n      },\n      {\n        type: 'intl-date',\n        data: 'payment_date',\n        dateFormat: {\n          month: 'long',\n          day: 'numeric',\n          year: 'numeric',\n        },\n      },\n      {\n        type: 'intl-date',\n        data: 'registration_date',\n        dateFormat: {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        },\n      },\n    ],\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/date-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Date cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-date-cell-type></example1-date-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n  car: string;\n  product_date: string;\n  payment_date: string;\n  registration_date: string;\n}\n\n@Component({\n  selector: 'example1-date-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      product_date: '2002-06-15',\n      payment_date: '2002-05-20',\n      registration_date: '2002-07-01',\n    },\n    {\n      car: 'Citroën C4 Coupe',\n      product_date: '2007-03-22',\n      payment_date: '2007-02-28',\n      registration_date: '2007-04-10',\n    },\n    {\n      car: 'Audi A4 Avant',\n      product_date: '2011-09-08',\n      payment_date: '2011-08-15',\n      registration_date: '2011-09-20',\n    },\n    {\n      car: 'Opel Astra',\n      product_date: '2012-01-30',\n      payment_date: '2012-01-10',\n      registration_date: '2012-02-14',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      product_date: '2004-11-12',\n      payment_date: '2004-10-20',\n      registration_date: '2004-12-01',\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n    locale: this.locale,\n    columns: [\n      {\n        type: 'text',\n        data: 'car',\n      },\n      {\n        type: 'intl-date',\n        data: 'product_date',\n        dateFormat: { dateStyle: 'short' },\n      },\n      {\n        type: 'intl-date',\n        data: 'payment_date',\n        dateFormat: {\n          month: 'long',\n          day: 'numeric',\n          year: 'numeric',\n        },\n      },\n      {\n        type: 'intl-date',\n        data: 'registration_date',\n        dateFormat: {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        },\n      },\n    ],\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/date-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json
index a11b5650a..9b59b04ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Date cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: {\n        dateStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Date cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: {\n        dateStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json
index 8bd8f73b1..f4c77c265 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Date cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: {\n        dateStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Date cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: {\n        dateStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json
index a3e25cffc..fe489786b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Date cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  const data = [\n    {\n      car: 'Mercedes A 160',\n      product_date: '2002-06-15',\n      payment_date: '2002-05-20',\n      registration_date: '2002-07-01',\n    },\n    {\n      car: 'Citroën C4 Coupe',\n      product_date: '2007-03-22',\n      payment_date: '2007-02-28',\n      registration_date: '2007-04-10',\n    },\n    {\n      car: 'Audi A4 Avant',\n      product_date: '2011-09-08',\n      payment_date: '2011-08-15',\n      registration_date: '2011-09-20',\n    },\n    {\n      car: 'Opel Astra',\n      product_date: '2012-01-30',\n      payment_date: '2012-01-10',\n      registration_date: '2012-02-14',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      product_date: '2004-11-12',\n      payment_date: '2004-10-20',\n      registration_date: '2004-12-01',\n    },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Car', 'Product date', 'Payment date', 'Registration date']}\n        locale={locale}\n        columns={[\n          {\n            type: 'text',\n            data: 'car',\n          },\n          {\n            type: 'intl-date',\n            data: 'product_date',\n            dateFormat: { dateStyle: 'short' },\n          },\n          {\n            type: 'intl-date',\n            data: 'payment_date',\n            dateFormat: {\n              month: 'long',\n              day: 'numeric',\n              year: 'numeric',\n            },\n          },\n          {\n            type: 'intl-date',\n            data: 'registration_date',\n            dateFormat: {\n              weekday: 'long',\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/date-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Date cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  const data = [\n    {\n      car: 'Mercedes A 160',\n      product_date: '2002-06-15',\n      payment_date: '2002-05-20',\n      registration_date: '2002-07-01',\n    },\n    {\n      car: 'Citroën C4 Coupe',\n      product_date: '2007-03-22',\n      payment_date: '2007-02-28',\n      registration_date: '2007-04-10',\n    },\n    {\n      car: 'Audi A4 Avant',\n      product_date: '2011-09-08',\n      payment_date: '2011-08-15',\n      registration_date: '2011-09-20',\n    },\n    {\n      car: 'Opel Astra',\n      product_date: '2012-01-30',\n      payment_date: '2012-01-10',\n      registration_date: '2012-02-14',\n    },\n    {\n      car: 'BMW 320i Coupe',\n      product_date: '2004-11-12',\n      payment_date: '2004-10-20',\n      registration_date: '2004-12-01',\n    },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Car', 'Product date', 'Payment date', 'Registration date']}\n        locale={locale}\n        columns={[\n          {\n            type: 'text',\n            data: 'car',\n          },\n          {\n            type: 'intl-date',\n            data: 'product_date',\n            dateFormat: { dateStyle: 'short' },\n          },\n          {\n            type: 'intl-date',\n            data: 'payment_date',\n            dateFormat: {\n              month: 'long',\n              day: 'numeric',\n              year: 'numeric',\n            },\n          },\n          {\n            type: 'intl-date',\n            data: 'registration_date',\n            dateFormat: {\n              weekday: 'long',\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/date-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json
index ca354c006..7f2170a11 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Date cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotRef.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  locale: 'en-US',\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: { dateStyle: 'short' },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/date-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Date cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotRef.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    product_date: '2002-06-15',\n    payment_date: '2002-05-20',\n    registration_date: '2002-07-01',\n  },\n  {\n    car: 'Citroën C4 Coupe',\n    product_date: '2007-03-22',\n    payment_date: '2007-02-28',\n    registration_date: '2007-04-10',\n  },\n  {\n    car: 'Audi A4 Avant',\n    product_date: '2011-09-08',\n    payment_date: '2011-08-15',\n    registration_date: '2011-09-20',\n  },\n  {\n    car: 'Opel Astra',\n    product_date: '2012-01-30',\n    payment_date: '2012-01-10',\n    registration_date: '2012-02-14',\n  },\n  {\n    car: 'BMW 320i Coupe',\n    product_date: '2004-11-12',\n    payment_date: '2004-10-20',\n    registration_date: '2004-12-01',\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n  locale: 'en-US',\n  columns: [\n    {\n      type: 'text',\n      data: 'car',\n    },\n    {\n      type: 'intl-date',\n      data: 'product_date',\n      dateFormat: { dateStyle: 'short' },\n    },\n    {\n      type: 'intl-date',\n      data: 'payment_date',\n      dateFormat: {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      },\n    },\n    {\n      type: 'intl-date',\n      data: 'registration_date',\n      dateFormat: {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/date-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__angular__example1.ts.json
index c1d710ec3..5f288a37d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Date-time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-datetime-cell-type></example1-datetime-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-datetime-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n    { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n    { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n    { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n    { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n    columns: [\n      { type: 'text', data: 'task', className: 'htLeft' },\n      { type: 'text', data: 'assignee', className: 'htLeft' },\n      {\n        type: 'intl-datetime',\n        data: 'deadline',\n        className: 'htLeft',\n        width: 190,\n        locale: 'en-US',\n        dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n      },\n      {\n        type: 'intl-datetime',\n        data: 'created',\n        className: 'htLeft',\n        width: 165,\n        locale: 'en-US',\n        dateTimeFormat: {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          hour: '2-digit',\n          minute: '2-digit',\n          second: '2-digit',\n          hour12: false,\n        },\n      },\n    ],\n    // left-align the column headers (a column's `className` only aligns cell content)\n    afterGetColHeader: (col: number, TH: HTMLTableCellElement) => {\n      TH.classList.add('htLeft');\n    },\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-types/datetime-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Date-time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-datetime-cell-type></example1-datetime-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-datetime-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n    { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n    { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n    { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n    { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n    columns: [\n      { type: 'text', data: 'task', className: 'htLeft' },\n      { type: 'text', data: 'assignee', className: 'htLeft' },\n      {\n        type: 'intl-datetime',\n        data: 'deadline',\n        className: 'htLeft',\n        width: 190,\n        locale: 'en-US',\n        dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n      },\n      {\n        type: 'intl-datetime',\n        data: 'created',\n        className: 'htLeft',\n        width: 165,\n        locale: 'en-US',\n        dateTimeFormat: {\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit',\n          hour: '2-digit',\n          minute: '2-digit',\n          second: '2-digit',\n          hour12: false,\n        },\n      },\n    ],\n    // left-align the column headers (a column's `className` only aligns cell content)\n    afterGetColHeader: (col: number, TH: HTMLTableCellElement) => {\n      TH.classList.add('htLeft');\n    },\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/cell-types/datetime-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.js.json
index 932a68220..667a3f666 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Date-time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all of Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst data = [\n    { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n    { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n    { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n    { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n    { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n    columns: [\n        { type: 'text', data: 'task', className: 'htLeft' },\n        { type: 'text', data: 'assignee', className: 'htLeft' },\n        {\n            type: 'intl-datetime',\n            data: 'deadline',\n            className: 'htLeft',\n            width: 190,\n            locale: 'en-US',\n            dateTimeFormat: {\n                dateStyle: 'medium',\n                timeStyle: 'short',\n            },\n        },\n        {\n            type: 'intl-datetime',\n            data: 'created',\n            className: 'htLeft',\n            width: 165,\n            locale: 'en-US',\n            dateTimeFormat: {\n                year: 'numeric',\n                month: '2-digit',\n                day: '2-digit',\n                hour: '2-digit',\n                minute: '2-digit',\n                second: '2-digit',\n                hour12: false,\n            },\n        },\n    ],\n    // left-align the column headers (a column's `className` only aligns cell content)\n    afterGetColHeader(col, TH) {\n        TH.classList.add('htLeft');\n    },\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/datetime-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Date-time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all of Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst data = [\n    { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n    { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n    { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n    { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n    { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n    columns: [\n        { type: 'text', data: 'task', className: 'htLeft' },\n        { type: 'text', data: 'assignee', className: 'htLeft' },\n        {\n            type: 'intl-datetime',\n            data: 'deadline',\n            className: 'htLeft',\n            width: 190,\n            locale: 'en-US',\n            dateTimeFormat: {\n                dateStyle: 'medium',\n                timeStyle: 'short',\n            },\n        },\n        {\n            type: 'intl-datetime',\n            data: 'created',\n            className: 'htLeft',\n            width: 165,\n            locale: 'en-US',\n            dateTimeFormat: {\n                year: 'numeric',\n                month: '2-digit',\n                day: '2-digit',\n                hour: '2-digit',\n                minute: '2-digit',\n                second: '2-digit',\n                hour12: false,\n            },\n        },\n    ],\n    // left-align the column headers (a column's `className` only aligns cell content)\n    afterGetColHeader(col, TH) {\n        TH.classList.add('htLeft');\n    },\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    stretchH: 'all',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/datetime-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.ts.json
index 79b8e2edc..3b635bf5d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Date-time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n  columns: [\n    { type: 'text', data: 'task', className: 'htLeft' },\n    { type: 'text', data: 'assignee', className: 'htLeft' },\n    {\n      type: 'intl-datetime',\n      data: 'deadline',\n      className: 'htLeft',\n      width: 190,\n      locale: 'en-US',\n      dateTimeFormat: {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-datetime',\n      data: 'created',\n      className: 'htLeft',\n      width: 165,\n      locale: 'en-US',\n      dateTimeFormat: {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n        hour12: false,\n      },\n    },\n  ],\n  // left-align the column headers (a column's `className` only aligns cell content)\n  afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n    TH.classList.add('htLeft');\n  },\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/datetime-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Date-time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n  columns: [\n    { type: 'text', data: 'task', className: 'htLeft' },\n    { type: 'text', data: 'assignee', className: 'htLeft' },\n    {\n      type: 'intl-datetime',\n      data: 'deadline',\n      className: 'htLeft',\n      width: 190,\n      locale: 'en-US',\n      dateTimeFormat: {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-datetime',\n      data: 'created',\n      className: 'htLeft',\n      width: 165,\n      locale: 'en-US',\n      dateTimeFormat: {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n        hour12: false,\n      },\n    },\n  ],\n  // left-align the column headers (a column's `className` only aligns cell content)\n  afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n    TH.classList.add('htLeft');\n  },\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/datetime-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__react__example1.tsx.json
index de071df61..933c0383e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Date-time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Deadline', 'Created']}\n      columns={[\n        { type: 'text', data: 'task', className: 'htLeft' },\n        { type: 'text', data: 'assignee', className: 'htLeft' },\n        {\n          type: 'intl-datetime',\n          data: 'deadline',\n          className: 'htLeft',\n          width: 190,\n          locale: 'en-US',\n          dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n        },\n        {\n          type: 'intl-datetime',\n          data: 'created',\n          className: 'htLeft',\n          width: 165,\n          locale: 'en-US',\n          dateTimeFormat: {\n            year: 'numeric',\n            month: '2-digit',\n            day: '2-digit',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n          },\n        },\n      ]}\n      afterGetColHeader={(col: number, TH: HTMLTableCellElement) => TH.classList.add('htLeft')}\n      columnSorting={true}\n      filters={true}\n      dropdownMenu={true}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/datetime-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Date-time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Deadline', 'Created']}\n      columns={[\n        { type: 'text', data: 'task', className: 'htLeft' },\n        { type: 'text', data: 'assignee', className: 'htLeft' },\n        {\n          type: 'intl-datetime',\n          data: 'deadline',\n          className: 'htLeft',\n          width: 190,\n          locale: 'en-US',\n          dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n        },\n        {\n          type: 'intl-datetime',\n          data: 'created',\n          className: 'htLeft',\n          width: 165,\n          locale: 'en-US',\n          dateTimeFormat: {\n            year: 'numeric',\n            month: '2-digit',\n            day: '2-digit',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n          },\n        },\n      ]}\n      afterGetColHeader={(col: number, TH: HTMLTableCellElement) => TH.classList.add('htLeft')}\n      columnSorting={true}\n      filters={true}\n      dropdownMenu={true}\n      stretchH=\"all\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/datetime-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__vue__example1.vue.json
index f91ebc75f..b584752d3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__datetime-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Date-time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n  columns: [\n    { type: 'text', data: 'task', className: 'htLeft' },\n    { type: 'text', data: 'assignee', className: 'htLeft' },\n    {\n      type: 'intl-datetime',\n      data: 'deadline',\n      className: 'htLeft',\n      width: 190,\n      locale: 'en-US',\n      dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n    },\n    {\n      type: 'intl-datetime',\n      data: 'created',\n      className: 'htLeft',\n      width: 165,\n      locale: 'en-US',\n      dateTimeFormat: {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n        hour12: false,\n      },\n    },\n  ],\n  // left-align the column headers (a column's `className` only aligns cell content)\n  afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n    TH.classList.add('htLeft');\n  },\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/datetime-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Date-time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register all of Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { task: 'Design review', assignee: 'Ana García', deadline: '2024-03-15T09:30:00', created: '2024-03-01T08:00:00' },\n  { task: 'Sprint demo', assignee: 'James Okafor', deadline: '2024-03-16 14:00:00', created: '2024-03-02T11:20:00' },\n  { task: 'Release', assignee: 'Li Wei', deadline: '2024-03-20T23:59:59', created: '2024-03-05T16:45:00' },\n  { task: 'Retro', assignee: 'Sofia Rossi', deadline: '2024-03-22', created: '2024-03-06T09:00:00' },\n  { task: 'Planning', assignee: 'Noah Cohen', deadline: '2024-03-25T10:15:00', created: '2024-03-08T13:30:00' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Deadline', 'Created'],\n  columns: [\n    { type: 'text', data: 'task', className: 'htLeft' },\n    { type: 'text', data: 'assignee', className: 'htLeft' },\n    {\n      type: 'intl-datetime',\n      data: 'deadline',\n      className: 'htLeft',\n      width: 190,\n      locale: 'en-US',\n      dateTimeFormat: { dateStyle: 'medium', timeStyle: 'short' },\n    },\n    {\n      type: 'intl-datetime',\n      data: 'created',\n      className: 'htLeft',\n      width: 165,\n      locale: 'en-US',\n      dateTimeFormat: {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n        hour12: false,\n      },\n    },\n  ],\n  // left-align the column headers (a column's `className` only aligns cell content)\n  afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n    TH.classList.add('htLeft');\n  },\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  stretchH: 'all',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/datetime-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Date-time cell type"],"guide":"guides/cell-types/datetime-cell-type/datetime-cell-type.md","guideTitle":"Date-time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/datetime-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json
index a5172673b..abcdbdc7b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-dropdown-cell-type></example1-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {},\n      {\n        type: 'dropdown',\n        source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n      {\n        type: 'dropdown',\n        source: [\n          'Seattle',\n          'Denver',\n          'Portland',\n          'Austin',\n          'Minneapolis',\n          'Boston',\n          'Chicago',\n          'Phoenix',\n          'Atlanta',\n          'Dallas',\n          'San Jose',\n          'Columbus',\n        ],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-dropdown-cell-type></example1-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {},\n      {\n        type: 'dropdown',\n        source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n      {\n        type: 'dropdown',\n        source: [\n          'Seattle',\n          'Denver',\n          'Portland',\n          'Austin',\n          'Minneapolis',\n          'Boston',\n          'Chicago',\n          'Phoenix',\n          'Atlanta',\n          'Dallas',\n          'San Jose',\n          'Columbus',\n        ],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json
index dc245f0f8..c5e36bc84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-dropdown-cell-type></example2-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    ['Electronics and Gadgets','Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol']\n  ];\n\n  readonly airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    'Chicago O\\'Hare International Airport',\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport'\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'dropdown',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-dropdown-cell-type></example2-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    ['Electronics and Gadgets','Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol']\n  ];\n\n  readonly airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    'Chicago O\\'Hare International Airport',\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport'\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'dropdown',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json
index 5be06cfb3..0b0695be9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-dropdown-cell-type></example3-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    [\n      'Electronics and Gadgets',\n      { key: 'LAX', value: 'Los Angeles International Airport' },\n    ],\n    [\n      'Medical Supplies',\n      { key: 'JFK', value: 'John F. Kennedy International Airport' }\n    ],\n    [\n      'Auto Parts',\n      { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n    ],\n    [\n      'Fresh Produce',\n      { key: 'LHR', value: 'London Heathrow Airport' }\n    ],\n    [\n      'Textiles',\n      { key: 'CDG', value: 'Charles de Gaulle Airport' }\n    ],\n    [\n      'Industrial Equipment',\n      { key: 'DXB', value: 'Dubai International Airport' }\n    ],\n    [\n      'Pharmaceuticals',\n      { key: 'HND', value: 'Tokyo Haneda Airport' }\n    ],\n    [\n      'Consumer Goods',\n      { key: 'PEK', value: 'Beijing Capital International Airport' }\n    ],\n    [\n      'Machine Parts',\n      { key: 'SIN', value: 'Singapore Changi Airport' }\n    ],\n    [\n      'Food Products',\n      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n    ]\n  ];\n\n  readonly airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' }\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'dropdown',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-dropdown-cell-type></example3-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"shipmentKVData\" [settings]=\"gridSettings\"></hot-table>\n  </div>`\n})\nexport class AppComponent {\n  readonly shipmentKVData = [\n    [\n      'Electronics and Gadgets',\n      { key: 'LAX', value: 'Los Angeles International Airport' },\n    ],\n    [\n      'Medical Supplies',\n      { key: 'JFK', value: 'John F. Kennedy International Airport' }\n    ],\n    [\n      'Auto Parts',\n      { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n    ],\n    [\n      'Fresh Produce',\n      { key: 'LHR', value: 'London Heathrow Airport' }\n    ],\n    [\n      'Textiles',\n      { key: 'CDG', value: 'Charles de Gaulle Airport' }\n    ],\n    [\n      'Industrial Equipment',\n      { key: 'DXB', value: 'Dubai International Airport' }\n    ],\n    [\n      'Pharmaceuticals',\n      { key: 'HND', value: 'Tokyo Haneda Airport' }\n    ],\n    [\n      'Consumer Goods',\n      { key: 'PEK', value: 'Beijing Capital International Airport' }\n    ],\n    [\n      'Machine Parts',\n      { key: 'SIN', value: 'Singapore Changi Airport' }\n    ],\n    [\n      'Food Products',\n      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n    ]\n  ];\n\n  readonly airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' }\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Shipment',\n      },\n      {\n        type: 'dropdown',\n        source: this.airportKVData,\n        title: 'Airport',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json
index 8b600a96c..6fb02ac2d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-dropdown-cell-type></example4-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\n@Component({\n  selector: 'example4-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'dropdown',\n        source: departments,\n        width: 140,\n        // trim the list to the cell's width (default)\n        trimDropdown: true,\n      },\n      {\n        type: 'dropdown',\n        source: departments,\n        width: 140,\n        // expand the list to fit its longest option\n        trimDropdown: false,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-dropdown-cell-type></example4-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\n@Component({\n  selector: 'example4-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'dropdown',\n        source: departments,\n        width: 140,\n        // trim the list to the cell's width (default)\n        trimDropdown: true,\n      },\n      {\n        type: 'dropdown',\n        source: departments,\n        width: 140,\n        // expand the list to fit its longest option\n        trimDropdown: false,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json
index 3c74be930..27ac7165a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-dropdown-cell-type></example5-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\n@Component({\n  selector: 'example5-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'dropdown',\n        source: jobTitles,\n      },\n      {\n        type: 'dropdown',\n        source: jobTitles,\n        // show 3 options at a time, then scroll\n        visibleRows: 3,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-dropdown-cell-type></example5-dropdown-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\n@Component({\n  selector: 'example5-dropdown-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'dropdown',\n        source: jobTitles,\n      },\n      {\n        type: 'dropdown',\n        source: jobTitles,\n        // show 3 options at a time, then scroll\n        visibleRows: 3,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json
index 68bee3ffd..e9e1480d2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json
index 3b4046c45..e23440472 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json
index 779340979..02f556eb1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json
index 07999ce06..76251082c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json
index a806818e9..8d337c604 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json
index 68f6bf5f0..4a1255c94 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json
index bab0cd2ad..baf596204 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst departments = [\n    'Engineering and Platform Infrastructure',\n    'Marketing and Brand Communications',\n    'Financial Planning and Analysis',\n    'People Operations and Talent Acquisition',\n    'Customer Success and Enterprise Accounts',\n];\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Ana García', departments[0], departments[0]],\n        ['James Okafor', departments[1], departments[1]],\n        ['Li Wei', departments[2], departments[2]],\n        ['Sofia Rossi', departments[3], departments[3]],\n    ],\n    colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n    columns: [\n        {},\n        {\n            type: 'dropdown',\n            source: departments,\n            width: 140,\n            // trim the list to the cell's width (default)\n            trimDropdown: true,\n        },\n        {\n            type: 'dropdown',\n            source: departments,\n            width: 140,\n            // expand the list to fit its longest option\n            trimDropdown: false,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst departments = [\n    'Engineering and Platform Infrastructure',\n    'Marketing and Brand Communications',\n    'Financial Planning and Analysis',\n    'People Operations and Talent Acquisition',\n    'Customer Success and Enterprise Accounts',\n];\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Ana García', departments[0], departments[0]],\n        ['James Okafor', departments[1], departments[1]],\n        ['Li Wei', departments[2], departments[2]],\n        ['Sofia Rossi', departments[3], departments[3]],\n    ],\n    colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n    columns: [\n        {},\n        {\n            type: 'dropdown',\n            source: departments,\n            width: 140,\n            // trim the list to the cell's width (default)\n            trimDropdown: true,\n        },\n        {\n            type: 'dropdown',\n            source: departments,\n            width: 140,\n            // expand the list to fit its longest option\n            trimDropdown: false,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json
index e7b890baa..5f69e5070 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ],\n  colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // trim the list to the cell's width (default)\n      trimDropdown: true,\n    },\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // expand the list to fit its longest option\n      trimDropdown: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ],\n  colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // trim the list to the cell's width (default)\n      trimDropdown: true,\n    },\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // expand the list to fit its longest option\n      trimDropdown: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json
index 02ebe7ceb..7e9ac3962 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst jobTitles = [\n    'Software Engineer',\n    'Senior Software Engineer',\n    'Staff Engineer',\n    'Engineering Manager',\n    'Product Manager',\n    'Product Designer',\n    'Data Analyst',\n    'Data Scientist',\n    'Marketing Specialist',\n    'Account Executive',\n    'Customer Success Manager',\n    'Finance Analyst',\n    'Recruiter',\n    'Office Manager',\n];\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n        ['James Okafor', 'Product Manager', 'Product Manager'],\n        ['Li Wei', 'Data Scientist', 'Data Scientist'],\n        ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n    ],\n    colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n    columns: [\n        {},\n        {\n            type: 'dropdown',\n            source: jobTitles,\n        },\n        {\n            type: 'dropdown',\n            source: jobTitles,\n            // show 3 options at a time, then scroll\n            visibleRows: 3,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst jobTitles = [\n    'Software Engineer',\n    'Senior Software Engineer',\n    'Staff Engineer',\n    'Engineering Manager',\n    'Product Manager',\n    'Product Designer',\n    'Data Analyst',\n    'Data Scientist',\n    'Marketing Specialist',\n    'Account Executive',\n    'Customer Success Manager',\n    'Finance Analyst',\n    'Recruiter',\n    'Office Manager',\n];\nnew Handsontable(container, {\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n        ['James Okafor', 'Product Manager', 'Product Manager'],\n        ['Li Wei', 'Data Scientist', 'Data Scientist'],\n        ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n    ],\n    colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n    columns: [\n        {},\n        {\n            type: 'dropdown',\n            source: jobTitles,\n        },\n        {\n            type: 'dropdown',\n            source: jobTitles,\n            // show 3 options at a time, then scroll\n            visibleRows: 3,\n        },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json
index f5fc5d078..db0180af3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ],\n  colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: jobTitles,\n    },\n    {\n      type: 'dropdown',\n      source: jobTitles,\n      // show 3 options at a time, then scroll\n      visibleRows: 3,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ],\n  colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: jobTitles,\n    },\n    {\n      type: 'dropdown',\n      source: jobTitles,\n      // show 3 options at a time, then scroll\n      visibleRows: 3,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json
index 05d006cf9..5f9b124ee 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n      columns={[\n        {},\n        {},\n        {\n          type: 'dropdown',\n          source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n        {\n          type: 'dropdown',\n          source: [\n            'Seattle',\n            'Denver',\n            'Portland',\n            'Austin',\n            'Minneapolis',\n            'Boston',\n            'Chicago',\n            'Phoenix',\n            'Atlanta',\n            'Dallas',\n            'San Jose',\n            'Columbus',\n          ],\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n      columns={[\n        {},\n        {},\n        {\n          type: 'dropdown',\n          source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n        {\n          type: 'dropdown',\n          source: [\n            'Seattle',\n            'Denver',\n            'Portland',\n            'Austin',\n            'Minneapolis',\n            'Boston',\n            'Chicago',\n            'Phoenix',\n            'Atlanta',\n            'Dallas',\n            'San Jose',\n            'Columbus',\n          ],\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json
index 78ac438e5..582f94b95 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', 'Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', \"Chicago O'Hare International Airport\"],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol'],\n  ];\n\n  const airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    \"Chicago O'Hare International Airport\",\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'dropdown',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', 'Los Angeles International Airport'],\n    ['Medical Supplies', 'John F. Kennedy International Airport'],\n    ['Auto Parts', \"Chicago O'Hare International Airport\"],\n    ['Fresh Produce', 'London Heathrow Airport'],\n    ['Textiles', 'Charles de Gaulle Airport'],\n    ['Industrial Equipment', 'Dubai International Airport'],\n    ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n    ['Consumer Goods', 'Beijing Capital International Airport'],\n    ['Machine Parts', 'Singapore Changi Airport'],\n    ['Food Products', 'Amsterdam Airport Schiphol'],\n  ];\n\n  const airportKVData = [\n    'Los Angeles International Airport',\n    'John F. Kennedy International Airport',\n    \"Chicago O'Hare International Airport\",\n    'London Heathrow Airport',\n    'Charles de Gaulle Airport',\n    'Dubai International Airport',\n    'Tokyo Haneda Airport',\n    'Beijing Capital International Airport',\n    'Singapore Changi Airport',\n    'Amsterdam Airport Schiphol',\n    'Frankfurt Airport',\n    'Seoul Incheon International Airport',\n    'Toronto Pearson International Airport',\n    'Madrid-Barajas Airport',\n    'Bangkok Suvarnabhumi Airport',\n    'Munich International Airport',\n    'Sydney Kingsford Smith Airport',\n    'Barcelona-El Prat Airport',\n    'Kuala Lumpur International Airport',\n    'Zurich Airport',\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'dropdown',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json
index 2ac168cda..06956ec7f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n    ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n  ];\n\n  const airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'dropdown',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const shipmentKVData = [\n    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n    ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n  ];\n\n  const airportKVData = [\n    { key: 'LAX', value: 'Los Angeles International Airport' },\n    { key: 'JFK', value: 'John F. Kennedy International Airport' },\n    { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n    { key: 'LHR', value: 'London Heathrow Airport' },\n    { key: 'CDG', value: 'Charles de Gaulle Airport' },\n    { key: 'DXB', value: 'Dubai International Airport' },\n    { key: 'HND', value: 'Tokyo Haneda Airport' },\n    { key: 'PEK', value: 'Beijing Capital International Airport' },\n    { key: 'SIN', value: 'Singapore Changi Airport' },\n    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n    { key: 'FRA', value: 'Frankfurt Airport' },\n    { key: 'ICN', value: 'Seoul Incheon International Airport' },\n    { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n    { key: 'MAD', value: 'Madrid-Barajas Airport' },\n    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n    { key: 'MUC', value: 'Munich International Airport' },\n    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n    { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n    { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n    { key: 'ZRH', value: 'Zurich Airport' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={shipmentKVData}\n      columns={[\n        {\n          title: 'Shipment',\n        },\n        {\n          type: 'dropdown',\n          source: airportKVData,\n          title: 'Airport',\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json
index a91e401a1..4fe4a5f21 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nconst data = [\n  ['Ana García', departments[0], departments[0]],\n  ['James Okafor', departments[1], departments[1]],\n  ['Li Wei', departments[2], departments[2]],\n  ['Sofia Rossi', departments[3], departments[3]],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['Employee', 'Department (default)', 'Department (full width)']}\n      columns={[\n        {},\n        {\n          type: 'dropdown',\n          source: departments,\n          width: 140,\n          // trim the list to the cell's width (default)\n          trimDropdown: true,\n        },\n        {\n          type: 'dropdown',\n          source: departments,\n          width: 140,\n          // expand the list to fit its longest option\n          trimDropdown: false,\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nconst data = [\n  ['Ana García', departments[0], departments[0]],\n  ['James Okafor', departments[1], departments[1]],\n  ['Li Wei', departments[2], departments[2]],\n  ['Sofia Rossi', departments[3], departments[3]],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['Employee', 'Department (default)', 'Department (full width)']}\n      columns={[\n        {},\n        {\n          type: 'dropdown',\n          source: departments,\n          width: 140,\n          // trim the list to the cell's width (default)\n          trimDropdown: true,\n        },\n        {\n          type: 'dropdown',\n          source: departments,\n          width: 140,\n          // expand the list to fit its longest option\n          trimDropdown: false,\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json
index 9d4f3ccd0..070ecc530 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nconst data = [\n  ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n  ['James Okafor', 'Product Manager', 'Product Manager'],\n  ['Li Wei', 'Data Scientist', 'Data Scientist'],\n  ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['Employee', 'Job title (default)', 'Job title (compact)']}\n      columns={[\n        {},\n        {\n          type: 'dropdown',\n          source: jobTitles,\n        },\n        {\n          type: 'dropdown',\n          source: jobTitles,\n          // show 3 options at a time, then scroll\n          visibleRows: 3,\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nconst data = [\n  ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n  ['James Okafor', 'Product Manager', 'Product Manager'],\n  ['Li Wei', 'Data Scientist', 'Data Scientist'],\n  ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      height=\"auto\"\n      data={data}\n      colHeaders={['Employee', 'Job title (default)', 'Job title (compact)']}\n      columns={[\n        {},\n        {\n          type: 'dropdown',\n          source: jobTitles,\n        },\n        {\n          type: 'dropdown',\n          source: jobTitles,\n          // show 3 options at a time, then scroll\n          visibleRows: 3,\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json
index 9f1a8faf0..2a970ddc2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json
index 2d95dbdc4..07a28e426 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', 'Los Angeles International Airport'],\n  ['Medical Supplies', 'John F. Kennedy International Airport'],\n  ['Auto Parts', \"Chicago O'Hare International Airport\"],\n  ['Fresh Produce', 'London Heathrow Airport'],\n  ['Textiles', 'Charles de Gaulle Airport'],\n  ['Industrial Equipment', 'Dubai International Airport'],\n  ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n  ['Consumer Goods', 'Beijing Capital International Airport'],\n  ['Machine Parts', 'Singapore Changi Airport'],\n  ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n  'Los Angeles International Airport',\n  'John F. Kennedy International Airport',\n  \"Chicago O'Hare International Airport\",\n  'London Heathrow Airport',\n  'Charles de Gaulle Airport',\n  'Dubai International Airport',\n  'Tokyo Haneda Airport',\n  'Beijing Capital International Airport',\n  'Singapore Changi Airport',\n  'Amsterdam Airport Schiphol',\n  'Frankfurt Airport',\n  'Seoul Incheon International Airport',\n  'Toronto Pearson International Airport',\n  'Madrid-Barajas Airport',\n  'Bangkok Suvarnabhumi Airport',\n  'Munich International Airport',\n  'Sydney Kingsford Smith Airport',\n  'Barcelona-El Prat Airport',\n  'Kuala Lumpur International Airport',\n  'Zurich Airport',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json
index 1e1789c19..83576ca4f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentKVData = [\n  ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n  ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n  ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n  ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n  ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n  ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n  ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n  ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n  ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n  ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n  { key: 'LAX', value: 'Los Angeles International Airport' },\n  { key: 'JFK', value: 'John F. Kennedy International Airport' },\n  { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n  { key: 'LHR', value: 'London Heathrow Airport' },\n  { key: 'CDG', value: 'Charles de Gaulle Airport' },\n  { key: 'DXB', value: 'Dubai International Airport' },\n  { key: 'HND', value: 'Tokyo Haneda Airport' },\n  { key: 'PEK', value: 'Beijing Capital International Airport' },\n  { key: 'SIN', value: 'Singapore Changi Airport' },\n  { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n  { key: 'FRA', value: 'Frankfurt Airport' },\n  { key: 'ICN', value: 'Seoul Incheon International Airport' },\n  { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n  { key: 'MAD', value: 'Madrid-Barajas Airport' },\n  { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n  { key: 'MUC', value: 'Munich International Airport' },\n  { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n  { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n  { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n  { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: shipmentKVData,\n  columns: [\n    {\n      title: 'Shipment',\n    },\n    {\n      type: 'dropdown',\n      source: airportKVData,\n      title: 'Airport',\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json
index 94e0f4603..e4f1d3b69 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ],\n  colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // trim the list to the cell's width (default)\n      trimDropdown: true,\n    },\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // expand the list to fit its longest option\n      trimDropdown: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n  'Engineering and Platform Infrastructure',\n  'Marketing and Brand Communications',\n  'Financial Planning and Analysis',\n  'People Operations and Talent Acquisition',\n  'Customer Success and Enterprise Accounts',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['Ana García', departments[0], departments[0]],\n    ['James Okafor', departments[1], departments[1]],\n    ['Li Wei', departments[2], departments[2]],\n    ['Sofia Rossi', departments[3], departments[3]],\n  ],\n  colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // trim the list to the cell's width (default)\n      trimDropdown: true,\n    },\n    {\n      type: 'dropdown',\n      source: departments,\n      width: 140,\n      // expand the list to fit its longest option\n      trimDropdown: false,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json
index 04a78f8e0..addacf9eb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ],\n  colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: jobTitles,\n    },\n    {\n      type: 'dropdown',\n      source: jobTitles,\n      // show 3 options at a time, then scroll\n      visibleRows: 3,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n  'Software Engineer',\n  'Senior Software Engineer',\n  'Staff Engineer',\n  'Engineering Manager',\n  'Product Manager',\n  'Product Designer',\n  'Data Analyst',\n  'Data Scientist',\n  'Marketing Specialist',\n  'Account Executive',\n  'Customer Success Manager',\n  'Finance Analyst',\n  'Recruiter',\n  'Office Manager',\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  data: [\n    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n    ['James Okafor', 'Product Manager', 'Product Manager'],\n    ['Li Wei', 'Data Scientist', 'Data Scientist'],\n    ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n  ],\n  colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n  columns: [\n    {},\n    {\n      type: 'dropdown',\n      source: jobTitles,\n    },\n    {\n      type: 'dropdown',\n      source: jobTitles,\n      // show 3 options at a time, then scroll\n      visibleRows: 3,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json
index 8f905d4b9..2e9f3f8e3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-handsontable-cell-type></example1-handsontable-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\n@Component({\n  selector: 'example1-handsontable-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'handsontable',\n        handsontable: {\n          colHeaders: ['SKU', 'Product', 'Supplier'],\n          autoColumnSize: true,\n          data: productData,\n          getValue() {\n            const selection = this.getSelectedLast();\n\n            // Get the product name of the clicked row and ignore header\n            // coordinates (negative values)\n            const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n            return row.name;\n          },\n        },\n      },\n      {\n        type: 'dropdown',\n        source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n      {\n        type: 'dropdown',\n        source: [\n          'Seattle',\n          'Denver',\n          'Portland',\n          'Austin',\n          'Minneapolis',\n          'Boston',\n          'Chicago',\n          'Phoenix',\n          'Atlanta',\n          'Dallas',\n          'San Jose',\n          'Columbus',\n        ],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/handsontable-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-handsontable-cell-type></example1-handsontable-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\n@Component({\n  selector: 'example1-handsontable-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {\n        type: 'handsontable',\n        handsontable: {\n          colHeaders: ['SKU', 'Product', 'Supplier'],\n          autoColumnSize: true,\n          data: productData,\n          getValue() {\n            const selection = this.getSelectedLast();\n\n            // Get the product name of the clicked row and ignore header\n            // coordinates (negative values)\n            const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n            return row.name;\n          },\n        },\n      },\n      {\n        type: 'dropdown',\n        source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n      {\n        type: 'dropdown',\n        source: [\n          'Seattle',\n          'Denver',\n          'Portland',\n          'Austin',\n          'Minneapolis',\n          'Boston',\n          'Chicago',\n          'Phoenix',\n          'Atlanta',\n          'Dallas',\n          'San Jose',\n          'Columbus',\n        ],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/handsontable-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json
index 8ffed03c4..483729d19 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json
index 985a7c479..a12a74308 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Product {\n  sku: string;\n  name: string;\n  supplier: string;\n}\n\nconst productData: Product[] = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Product {\n  sku: string;\n  name: string;\n  supplier: string;\n}\n\nconst productData: Product[] = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json
index c11fd64c1..ca12dd653 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Handsontable cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  const productData = [\n    { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n    { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n    { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n    { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n    { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n    { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n    { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n    { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n    { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n    { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n    { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n    { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n      columns={[\n        {},\n        {\n          type: 'handsontable',\n          handsontable: {\n            colHeaders: ['SKU', 'Product', 'Supplier'],\n            autoColumnSize: true,\n            data: productData,\n            getValue() {\n              const selection = this.getSelectedLast();\n\n              // Get the product name of the clicked row and ignore header\n              // coordinates (negative values)\n              const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n              return row.name;\n            },\n          },\n        },\n        {\n          type: 'dropdown',\n          source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n        {\n          type: 'dropdown',\n          source: [\n            'Seattle',\n            'Denver',\n            'Portland',\n            'Austin',\n            'Minneapolis',\n            'Boston',\n            'Chicago',\n            'Phoenix',\n            'Atlanta',\n            'Dallas',\n            'San Jose',\n            'Columbus',\n          ],\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/handsontable-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Handsontable cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  const productData = [\n    { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n    { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n    { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n    { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n    { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n    { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n    { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n    { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n    { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n    { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n    { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n    { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n  ];\n\n  return (\n    <HotTable\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n      columns={[\n        {},\n        {\n          type: 'handsontable',\n          handsontable: {\n            colHeaders: ['SKU', 'Product', 'Supplier'],\n            autoColumnSize: true,\n            data: productData,\n            getValue() {\n              const selection = this.getSelectedLast();\n\n              // Get the product name of the clicked row and ignore header\n              // coordinates (negative values)\n              const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n              return row.name;\n            },\n          },\n        },\n        {\n          type: 'dropdown',\n          source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n        {\n          type: 'dropdown',\n          source: [\n            'Seattle',\n            'Denver',\n            'Portland',\n            'Austin',\n            'Minneapolis',\n            'Boston',\n            'Chicago',\n            'Phoenix',\n            'Atlanta',\n            'Dallas',\n            'San Jose',\n            'Columbus',\n          ],\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/handsontable-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json
index fbf2f2ac1..e60b28aa2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/handsontable-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst productData = [\n  { sku: 'SKU-4821', name: 'Stainless Steel Water Bottle', supplier: 'Harbor Goods' },\n  { sku: 'SKU-0093', name: 'Wireless Mouse', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-1170', name: 'Ergonomic Office Chair', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-2208', name: 'USB-C Charging Cable', supplier: 'Summit Trading' },\n  { sku: 'SKU-3341', name: 'Aluminum Water Filter', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-4412', name: 'Canvas Tote Bag', supplier: 'Nordic Traders' },\n  { sku: 'SKU-5088', name: 'USB-C Hub', supplier: 'Harbor Goods' },\n  { sku: 'SKU-6120', name: 'Ceramic Mug Set', supplier: 'Alpine Supply Co.' },\n  { sku: 'SKU-7294', name: 'Desk Lamp', supplier: 'Cascade Distributors' },\n  { sku: 'SKU-8015', name: 'Laptop Stand', supplier: 'Summit Trading' },\n  { sku: 'SKU-9166', name: 'Bluetooth Speaker', supplier: 'Northgate Wholesale' },\n  { sku: 'SKU-1042', name: 'Standing Desk', supplier: 'Nordic Traders' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  columns: [\n    {},\n    {\n      type: 'handsontable',\n      handsontable: {\n        colHeaders: ['SKU', 'Product', 'Supplier'],\n        autoColumnSize: true,\n        data: productData,\n        getValue() {\n          const selection = this.getSelectedLast();\n\n          // Get the product name of the clicked row and ignore header\n          // coordinates (negative values)\n          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n          return row.name;\n        },\n      },\n    },\n    {\n      type: 'dropdown',\n      source: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n    {\n      type: 'dropdown',\n      source: [\n        'Seattle',\n        'Denver',\n        'Portland',\n        'Austin',\n        'Minneapolis',\n        'Boston',\n        'Chicago',\n        'Phoenix',\n        'Atlanta',\n        'Dallas',\n        'San Jose',\n        'Columbus',\n      ],\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/handsontable-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json
index 5bb284596..4a42eb3b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-multiselect-cell-type></example1-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n];\n\n@Component({\n  selector: 'example1-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Airport',\n      },\n      {\n        type: 'multiselect',\n        source: shipmentCategories,\n        title: 'Shipment',\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 300,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-multiselect-cell-type></example1-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n];\n\n@Component({\n  selector: 'example1-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Airport',\n      },\n      {\n        type: 'multiselect',\n        source: shipmentCategories,\n        title: 'Shipment',\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 300,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json
index 921e4e279..95b1a382d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-multiselect-cell-type></example2-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  ['Los Angeles International Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'medical', value: 'Medical Supplies' },\n  ]],\n  ['Chicago O\\'Hare International Airport', [\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n  ]],\n  ['Charles de Gaulle Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Tokyo Haneda Airport', [\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Singapore Changi Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n];\n\n@Component({\n  selector: 'example2-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Airport',\n      },\n      {\n        type: 'multiselect',\n        source: shipmentCategories,\n        title: 'Shipment',\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 300,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-multiselect-cell-type></example2-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  ['Los Angeles International Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'medical', value: 'Medical Supplies' },\n  ]],\n  ['Chicago O\\'Hare International Airport', [\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n  ]],\n  ['Charles de Gaulle Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Tokyo Haneda Airport', [\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Singapore Changi Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n];\n\n@Component({\n  selector: 'example2-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        title: 'Airport',\n      },\n      {\n        type: 'multiselect',\n        source: shipmentCategories,\n        title: 'Shipment',\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 300,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json
index 658aa52fd..e66b5e046 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-multiselect-cell-type></example3-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: string[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\n@Component({\n  selector: 'example3-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'multiselect',\n        source: requiredItems,\n        title: 'Required items',\n        allowEmpty: false,\n      },\n      {\n        type: 'multiselect',\n        source: optionalExtras,\n        title: 'Optional extras',\n        placeholder: 'Select up to 3',\n        maxSelections: 3,\n        visibleRows: 4,\n        searchInput: false,\n      },\n      {\n        type: 'multiselect',\n        source: interests,\n        title: 'Interests',\n        placeholder: 'Select interests',\n        sourceSortFunction: sortAlphabetically,\n        filteringCaseSensitive: true,\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 200,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-multiselect-cell-type></example3-multiselect-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: string[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\n@Component({\n  selector: 'example3-multiselect-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    height: 200,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        type: 'multiselect',\n        source: requiredItems,\n        title: 'Required items',\n        allowEmpty: false,\n      },\n      {\n        type: 'multiselect',\n        source: optionalExtras,\n        title: 'Optional extras',\n        placeholder: 'Select up to 3',\n        maxSelections: 3,\n        visibleRows: 4,\n        searchInput: false,\n      },\n      {\n        type: 'multiselect',\n        source: interests,\n        title: 'Interests',\n        placeholder: 'Select interests',\n        sourceSortFunction: sortAlphabetically,\n        filteringCaseSensitive: true,\n      },\n    ],\n    preventOverflow: 'horizontal',\n    colWidths: 200,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json
index 37290632a..995db7024 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json
index 90cd490a4..802fb0996 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst shipmentCategories = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json
index 4fea5ed18..28f5cb6d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json
index b2aff8e47..9e3797ddc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  ['Los Angeles International Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'medical', value: 'Medical Supplies' },\n  ]],\n  ['Chicago O\\'Hare International Airport', [\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n  ]],\n  ['Charles de Gaulle Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Tokyo Haneda Airport', [\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Singapore Changi Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n  ['Luton Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  ]],\n  ['Frankfurt Airport', [\n    { key: 'industrial', value: 'Industrial Equipment' },\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Sydney Kingsford Smith Airport', [\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n  ['Toronto Pearson International Airport', [\n    { key: 'medical', value: 'Medical Supplies' },\n    { key: 'textiles', value: 'Textiles' },\n  ]],\n  ['Hong Kong International Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Heathrow Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst shipmentCategories = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n  ['Los Angeles International Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'medical', value: 'Medical Supplies' },\n  ]],\n  ['Chicago O\\'Hare International Airport', [\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n  ]],\n  ['Charles de Gaulle Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Tokyo Haneda Airport', [\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Singapore Changi Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n  ['Luton Airport', [\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  ]],\n  ['Frankfurt Airport', [\n    { key: 'industrial', value: 'Industrial Equipment' },\n    { key: 'auto-parts', value: 'Auto Parts' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n  ['Sydney Kingsford Smith Airport', [\n    { key: 'fresh-produce', value: 'Fresh Produce' },\n    { key: 'food', value: 'Food Products' },\n  ]],\n  ['Toronto Pearson International Airport', [\n    { key: 'medical', value: 'Medical Supplies' },\n    { key: 'textiles', value: 'Textiles' },\n  ]],\n  ['Hong Kong International Airport', [\n    { key: 'machine-parts', value: 'Machine Parts' },\n    { key: 'electronics', value: 'Electronics and Gadgets' },\n    { key: 'industrial', value: 'Industrial Equipment' },\n  ]],\n  ['Heathrow Airport', [\n    { key: 'textiles', value: 'Textiles' },\n    { key: 'consumer', value: 'Consumer Goods' },\n  ]],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json
index 3b7d89713..b063e0162 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: (entries) => [...entries].sort((a, b) => a.localeCompare(b)),\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: (entries) => [...entries].sort((a, b) => a.localeCompare(b)),\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json
index a9506eb73..563a55f64 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: (entries: string[]) => [...entries].sort((a, b) => a.localeCompare(b)),\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst data = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: (entries: string[]) => [...entries].sort((a, b) => a.localeCompare(b)),\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json
index 3d61eb7ca..b47e0a410 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentCategories: string[] = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data: (string | string[])[][] = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          title: 'Airport',\n        },\n        {\n          type: 'multiselect',\n          source: shipmentCategories,\n          title: 'Shipment',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example1.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentCategories: string[] = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data: (string | string[])[][] = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          title: 'Airport',\n        },\n        {\n          type: 'multiselect',\n          source: shipmentCategories,\n          title: 'Shipment',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example1.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json
index 7ff56d738..03b20cf86 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ShipmentCategory {\n  key: string;\n  value: string;\n}\n\nconst shipmentCategories: ShipmentCategory[] = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data: (string | ShipmentCategory[])[][] = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          title: 'Airport',\n        },\n        {\n          type: 'multiselect',\n          source: shipmentCategories,\n          title: 'Shipment',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example2.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ShipmentCategory {\n  key: string;\n  value: string;\n}\n\nconst shipmentCategories: ShipmentCategory[] = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data: (string | ShipmentCategory[])[][] = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          title: 'Airport',\n        },\n        {\n          type: 'multiselect',\n          source: shipmentCategories,\n          title: 'Shipment',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example2.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json
index 99becc9fb..3e3750844 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Other options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: (string | object)[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data: string[][][] = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          type: 'multiselect',\n          source: requiredItems,\n          title: 'Required items',\n          allowEmpty: false,\n        },\n        {\n          type: 'multiselect',\n          source: optionalExtras,\n          title: 'Optional extras',\n          placeholder: 'Select up to 3',\n          maxSelections: 3,\n          visibleRows: 4,\n          searchInput: false,\n        },\n        {\n          type: 'multiselect',\n          source: interests,\n          title: 'Interests',\n          placeholder: 'Select interests',\n          sourceSortFunction: sortAlphabetically,\n          filteringCaseSensitive: true,\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example3.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Other options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: (string | object)[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data: string[][][] = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[\n        {\n          type: 'multiselect',\n          source: requiredItems,\n          title: 'Required items',\n          allowEmpty: false,\n        },\n        {\n          type: 'multiselect',\n          source: optionalExtras,\n          title: 'Optional extras',\n          placeholder: 'Select up to 3',\n          maxSelections: 3,\n          visibleRows: 4,\n          searchInput: false,\n        },\n        {\n          type: 'multiselect',\n          source: interests,\n          title: 'Interests',\n          placeholder: 'Select interests',\n          sourceSortFunction: sortAlphabetically,\n          filteringCaseSensitive: true,\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"last\"\n      width=\"100%\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example3.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json
index f364b65d5..e252d72d0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentCategories: string[] = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data: (string | string[])[][] = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example1.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentCategories: string[] = [\n  'Electronics and Gadgets',\n  'Medical Supplies',\n  'Auto Parts',\n  'Fresh Produce',\n  'Textiles',\n  'Industrial Equipment',\n  'Pharmaceuticals',\n  'Consumer Goods',\n  'Machine Parts',\n  'Food Products',\n];\n\nconst data: (string | string[])[][] = [\n  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n  [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example1.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json
index d6edecb98..53e932242 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ShipmentCategory {\n  key: string;\n  value: string;\n}\n\nconst shipmentCategories: ShipmentCategory[] = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data: (string | ShipmentCategory[])[][] = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example2.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ShipmentCategory {\n  key: string;\n  value: string;\n}\n\nconst shipmentCategories: ShipmentCategory[] = [\n  { key: 'electronics', value: 'Electronics and Gadgets' },\n  { key: 'medical', value: 'Medical Supplies' },\n  { key: 'auto-parts', value: 'Auto Parts' },\n  { key: 'fresh-produce', value: 'Fresh Produce' },\n  { key: 'textiles', value: 'Textiles' },\n  { key: 'industrial', value: 'Industrial Equipment' },\n  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n  { key: 'consumer', value: 'Consumer Goods' },\n  { key: 'machine-parts', value: 'Machine Parts' },\n  { key: 'food', value: 'Food Products' },\n];\n\nconst data: (string | ShipmentCategory[])[][] = [\n  [\n    'Los Angeles International Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'medical', value: 'Medical Supplies' },\n    ],\n  ],\n  [\n    \"Chicago O'Hare International Airport\",\n    [\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n    ],\n  ],\n  [\n    'Charles de Gaulle Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Tokyo Haneda Airport',\n    [\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Singapore Changi Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Luton Airport',\n    [\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n    ],\n  ],\n  [\n    'Frankfurt Airport',\n    [\n      { key: 'industrial', value: 'Industrial Equipment' },\n      { key: 'auto-parts', value: 'Auto Parts' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n  [\n    'Sydney Kingsford Smith Airport',\n    [\n      { key: 'fresh-produce', value: 'Fresh Produce' },\n      { key: 'food', value: 'Food Products' },\n    ],\n  ],\n  [\n    'Toronto Pearson International Airport',\n    [\n      { key: 'medical', value: 'Medical Supplies' },\n      { key: 'textiles', value: 'Textiles' },\n    ],\n  ],\n  [\n    'Hong Kong International Airport',\n    [\n      { key: 'machine-parts', value: 'Machine Parts' },\n      { key: 'electronics', value: 'Electronics and Gadgets' },\n      { key: 'industrial', value: 'Industrial Equipment' },\n    ],\n  ],\n  [\n    'Heathrow Airport',\n    [\n      { key: 'textiles', value: 'Textiles' },\n      { key: 'consumer', value: 'Consumer Goods' },\n    ],\n  ],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      title: 'Airport',\n    },\n    {\n      type: 'multiselect',\n      source: shipmentCategories,\n      title: 'Shipment',\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example2.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json
index d19494d9b..7a05a8cab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: (string | object)[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data: string[][][] = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: sortAlphabetically,\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example3.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: (string | object)[]) =>\n  [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data: string[][][] = [\n  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n  [['Tickets', 'Wallet'], ['Camera'], []],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    {\n      type: 'multiselect',\n      source: requiredItems,\n      title: 'Required items',\n      allowEmpty: false,\n    },\n    {\n      type: 'multiselect',\n      source: optionalExtras,\n      title: 'Optional extras',\n      placeholder: 'Select up to 3',\n      maxSelections: 3,\n      visibleRows: 4,\n      searchInput: false,\n    },\n    {\n      type: 'multiselect',\n      source: interests,\n      title: 'Interests',\n      placeholder: 'Select interests',\n      sourceSortFunction: sortAlphabetically,\n      filteringCaseSensitive: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'last',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example3.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json
index 698a88728..003646e01 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-numeric-cell-type></example1-numeric-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n  car: string;\n  year: number;\n  price_usd: number;\n  price_eur: number;\n  distance_km: number;\n  fuel_liters: number;\n  discount_percent: number;\n  quantity: number;\n}\n\n@Component({\n  selector: 'example1-numeric-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      price_usd: 7000,\n      price_eur: 7000,\n      distance_km: 125000,\n      fuel_liters: 45.5,\n      discount_percent: 0.15,\n      quantity: 1250\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      price_usd: 8330,\n      price_eur: 8330,\n      distance_km: 98000,\n      fuel_liters: 52.3,\n      discount_percent: 0.08,\n      quantity: 2100\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      price_usd: 33900,\n      price_eur: 33900,\n      distance_km: 45000,\n      fuel_liters: 60.0,\n      discount_percent: 0.05,\n      quantity: 850\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      price_usd: 5000,\n      price_eur: 5000,\n      distance_km: 156000,\n      fuel_liters: 48.7,\n      discount_percent: 0.12,\n      quantity: 3200\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      price_usd: 30500,\n      price_eur: 30500,\n      distance_km: 32000,\n      fuel_liters: 55.2,\n      discount_percent: 0.03,\n      quantity: 1500\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n    locale: this.locale,\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n        type: 'text',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'price_usd',\n        type: 'numeric',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'price_eur',\n        type: 'numeric',\n        numericFormat: {\n          style: 'currency',\n          currency: 'EUR',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'distance_km',\n        type: 'numeric',\n        numericFormat: {\n          style: 'unit',\n          unit: 'kilometer',\n          useGrouping: true,\n        },\n      },\n      {\n        data: 'fuel_liters',\n        type: 'numeric',\n        numericFormat: {\n          style: 'unit',\n          unit: 'liter',\n          minimumFractionDigits: 1,\n          maximumFractionDigits: 1,\n        },\n      },\n      {\n        data: 'discount_percent',\n        type: 'numeric',\n        numericFormat: {\n          style: 'percent',\n          minimumFractionDigits: 0,\n          maximumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'quantity',\n        type: 'numeric',\n        numericFormat: {\n          style: 'decimal',\n          useGrouping: true,\n          minimumFractionDigits: 0,\n        },\n      },\n    ]\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/numeric-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-numeric-cell-type></example1-numeric-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n  car: string;\n  year: number;\n  price_usd: number;\n  price_eur: number;\n  distance_km: number;\n  fuel_liters: number;\n  discount_percent: number;\n  quantity: number;\n}\n\n@Component({\n  selector: 'example1-numeric-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      price_usd: 7000,\n      price_eur: 7000,\n      distance_km: 125000,\n      fuel_liters: 45.5,\n      discount_percent: 0.15,\n      quantity: 1250\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      price_usd: 8330,\n      price_eur: 8330,\n      distance_km: 98000,\n      fuel_liters: 52.3,\n      discount_percent: 0.08,\n      quantity: 2100\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      price_usd: 33900,\n      price_eur: 33900,\n      distance_km: 45000,\n      fuel_liters: 60.0,\n      discount_percent: 0.05,\n      quantity: 850\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      price_usd: 5000,\n      price_eur: 5000,\n      distance_km: 156000,\n      fuel_liters: 48.7,\n      discount_percent: 0.12,\n      quantity: 3200\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      price_usd: 30500,\n      price_eur: 30500,\n      distance_km: 32000,\n      fuel_liters: 55.2,\n      discount_percent: 0.03,\n      quantity: 1500\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n    locale: this.locale,\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {\n        data: 'car',\n        type: 'text',\n      },\n      {\n        data: 'year',\n        type: 'numeric',\n      },\n      {\n        data: 'price_usd',\n        type: 'numeric',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'price_eur',\n        type: 'numeric',\n        numericFormat: {\n          style: 'currency',\n          currency: 'EUR',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'distance_km',\n        type: 'numeric',\n        numericFormat: {\n          style: 'unit',\n          unit: 'kilometer',\n          useGrouping: true,\n        },\n      },\n      {\n        data: 'fuel_liters',\n        type: 'numeric',\n        numericFormat: {\n          style: 'unit',\n          unit: 'liter',\n          minimumFractionDigits: 1,\n          maximumFractionDigits: 1,\n        },\n      },\n      {\n        data: 'discount_percent',\n        type: 'numeric',\n        numericFormat: {\n          style: 'percent',\n          minimumFractionDigits: 0,\n          maximumFractionDigits: 2,\n        },\n      },\n      {\n        data: 'quantity',\n        type: 'numeric',\n        numericFormat: {\n          style: 'decimal',\n          useGrouping: true,\n          minimumFractionDigits: 0,\n        },\n      },\n    ]\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/numeric-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json
index 925fdf307..698fc5247 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Numeric cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\n// Sample data with various numeric types\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Numeric cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\n// Sample data with various numeric types\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json
index 71f03de17..3bfb68864 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Numeric cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\n\n// Sample data with various numeric types\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Numeric cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"localeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"localeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\n\n// Sample data with various numeric types\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json
index fa2506c4a..3872bfec4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Numeric cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface CarData {\n  car: string;\n  year: number;\n  price_usd: number;\n  price_eur: number;\n  distance_km: number;\n  fuel_liters: number;\n  discount_percent: number;\n  quantity: number;\n}\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  // Sample data with various numeric types\n  const data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      price_usd: 7000,\n      price_eur: 7000,\n      distance_km: 125000,\n      fuel_liters: 45.5,\n      discount_percent: 0.15,\n      quantity: 1250,\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      price_usd: 8330,\n      price_eur: 8330,\n      distance_km: 98000,\n      fuel_liters: 52.3,\n      discount_percent: 0.08,\n      quantity: 2100,\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      price_usd: 33900,\n      price_eur: 33900,\n      distance_km: 45000,\n      fuel_liters: 60.0,\n      discount_percent: 0.05,\n      quantity: 850,\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      price_usd: 5000,\n      price_eur: 5000,\n      distance_km: 156000,\n      fuel_liters: 48.7,\n      discount_percent: 0.12,\n      quantity: 3200,\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      price_usd: 30500,\n      price_eur: 30500,\n      distance_km: 32000,\n      fuel_liters: 55.2,\n      discount_percent: 0.03,\n      quantity: 1500,\n    },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity']}\n        locale={locale}\n        columns={[\n          {\n            data: 'car',\n            type: 'text',\n          },\n          {\n            data: 'year',\n            type: 'numeric',\n          },\n          {\n            data: 'price_usd',\n            type: 'numeric',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'price_eur',\n            type: 'numeric',\n            numericFormat: {\n              style: 'currency',\n              currency: 'EUR',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'distance_km',\n            type: 'numeric',\n            numericFormat: {\n              style: 'unit',\n              unit: 'kilometer',\n              useGrouping: true,\n            },\n          },\n          {\n            data: 'fuel_liters',\n            type: 'numeric',\n            numericFormat: {\n              style: 'unit',\n              unit: 'liter',\n              minimumFractionDigits: 1,\n              maximumFractionDigits: 1,\n            },\n          },\n          {\n            data: 'discount_percent',\n            type: 'numeric',\n            numericFormat: {\n              style: 'percent',\n              minimumFractionDigits: 0,\n              maximumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'quantity',\n            type: 'numeric',\n            numericFormat: {\n              style: 'decimal',\n              useGrouping: true,\n              minimumFractionDigits: 0,\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/numeric-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Numeric cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface CarData {\n  car: string;\n  year: number;\n  price_usd: number;\n  price_eur: number;\n  distance_km: number;\n  fuel_liters: number;\n  discount_percent: number;\n  quantity: number;\n}\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  // Sample data with various numeric types\n  const data: CarData[] = [\n    {\n      car: 'Mercedes A 160',\n      year: 2017,\n      price_usd: 7000,\n      price_eur: 7000,\n      distance_km: 125000,\n      fuel_liters: 45.5,\n      discount_percent: 0.15,\n      quantity: 1250,\n    },\n    {\n      car: 'Citroen C4 Coupe',\n      year: 2018,\n      price_usd: 8330,\n      price_eur: 8330,\n      distance_km: 98000,\n      fuel_liters: 52.3,\n      discount_percent: 0.08,\n      quantity: 2100,\n    },\n    {\n      car: 'Audi A4 Avant',\n      year: 2019,\n      price_usd: 33900,\n      price_eur: 33900,\n      distance_km: 45000,\n      fuel_liters: 60.0,\n      discount_percent: 0.05,\n      quantity: 850,\n    },\n    {\n      car: 'Opel Astra',\n      year: 2020,\n      price_usd: 5000,\n      price_eur: 5000,\n      distance_km: 156000,\n      fuel_liters: 48.7,\n      discount_percent: 0.12,\n      quantity: 3200,\n    },\n    {\n      car: 'BMW 320i Coupe',\n      year: 2021,\n      price_usd: 30500,\n      price_eur: 30500,\n      distance_km: 32000,\n      fuel_liters: 55.2,\n      discount_percent: 0.03,\n      quantity: 1500,\n    },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity']}\n        locale={locale}\n        columns={[\n          {\n            data: 'car',\n            type: 'text',\n          },\n          {\n            data: 'year',\n            type: 'numeric',\n          },\n          {\n            data: 'price_usd',\n            type: 'numeric',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'price_eur',\n            type: 'numeric',\n            numericFormat: {\n              style: 'currency',\n              currency: 'EUR',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'distance_km',\n            type: 'numeric',\n            numericFormat: {\n              style: 'unit',\n              unit: 'kilometer',\n              useGrouping: true,\n            },\n          },\n          {\n            data: 'fuel_liters',\n            type: 'numeric',\n            numericFormat: {\n              style: 'unit',\n              unit: 'liter',\n              minimumFractionDigits: 1,\n              maximumFractionDigits: 1,\n            },\n          },\n          {\n            data: 'discount_percent',\n            type: 'numeric',\n            numericFormat: {\n              style: 'percent',\n              minimumFractionDigits: 0,\n              maximumFractionDigits: 2,\n            },\n          },\n          {\n            data: 'quantity',\n            type: 'numeric',\n            numericFormat: {\n              style: 'decimal',\n              useGrouping: true,\n              minimumFractionDigits: 0,\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/numeric-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json
index 6c4d0cbe2..b10d1c787 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Numeric cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotTableComponent = useTemplateRef<InstanceType<typeof HotTable>>('hotTableComponent');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotTableComponent.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  locale: 'en-US',\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <HotTable ref=\"hotTableComponent\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/numeric-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Numeric cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotTableComponent = useTemplateRef<InstanceType<typeof HotTable>>('hotTableComponent');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotTableComponent.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  {\n    car: 'Mercedes A 160',\n    year: 2017,\n    price_usd: 7000,\n    price_eur: 7000,\n    distance_km: 125000,\n    fuel_liters: 45.5,\n    discount_percent: 0.15,\n    quantity: 1250,\n  },\n  {\n    car: 'Citroen C4 Coupe',\n    year: 2018,\n    price_usd: 8330,\n    price_eur: 8330,\n    distance_km: 98000,\n    fuel_liters: 52.3,\n    discount_percent: 0.08,\n    quantity: 2100,\n  },\n  {\n    car: 'Audi A4 Avant',\n    year: 2019,\n    price_usd: 33900,\n    price_eur: 33900,\n    distance_km: 45000,\n    fuel_liters: 60.0,\n    discount_percent: 0.05,\n    quantity: 850,\n  },\n  {\n    car: 'Opel Astra',\n    year: 2020,\n    price_usd: 5000,\n    price_eur: 5000,\n    distance_km: 156000,\n    fuel_liters: 48.7,\n    discount_percent: 0.12,\n    quantity: 3200,\n  },\n  {\n    car: 'BMW 320i Coupe',\n    year: 2021,\n    price_usd: 30500,\n    price_eur: 30500,\n    distance_km: 32000,\n    fuel_liters: 55.2,\n    discount_percent: 0.03,\n    quantity: 1500,\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n  locale: 'en-US',\n  columns: [\n    {\n      data: 'car',\n      type: 'text',\n    },\n    {\n      data: 'year',\n      type: 'numeric',\n    },\n    {\n      data: 'price_usd',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'price_eur',\n      type: 'numeric',\n      numericFormat: {\n        style: 'currency',\n        currency: 'EUR',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'distance_km',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'kilometer',\n        useGrouping: true,\n      },\n    },\n    {\n      data: 'fuel_liters',\n      type: 'numeric',\n      numericFormat: {\n        style: 'unit',\n        unit: 'liter',\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n      },\n    },\n    {\n      data: 'discount_percent',\n      type: 'numeric',\n      numericFormat: {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      },\n    },\n    {\n      data: 'quantity',\n      type: 'numeric',\n      numericFormat: {\n        style: 'decimal',\n        useGrouping: true,\n        minimumFractionDigits: 0,\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <HotTable ref=\"hotTableComponent\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/numeric-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
index dd67a228c..43a78c51c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-password-cell-type></example1-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-password-cell-type></example1-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
index fd8419263..32da2a3cc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-password-cell-type></example2-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashLength: 10 },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-password-cell-type></example2-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashLength: 10 },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
index 8f2a6cefc..4706d9179 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-password-cell-type></example3-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-password-cell-type></example3-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
index f38c65127..42e623eb8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Reveal delay · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-password-cell-type></example4-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashRevealDelay: 1000 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Reveal delay · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-password-cell-type></example4-password-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-password-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'password', type: 'password', hashRevealDelay: 1000 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
index 0138583f2..db792cb93 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
index 842eb9777..21d83c82a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
index e2b9d5f87..0f539154e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
index eb094aaa9..5fc023d98 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
index 6f206b6dd..00920982b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
index d414da872..348eeea25 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
index e63d7c96f..170a95531 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Reveal delay · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n    ],\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashRevealDelay: 1000 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Reveal delay · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n    ],\n    colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashRevealDelay: 1000 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
index 18b729b72..62364bc97 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Reveal delay · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashRevealDelay: 1000 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Reveal delay · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashRevealDelay: 1000 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
index aa9649b9c..3c703c416 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Password cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Password cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json
index df6810c00..ef823ac35 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Password cell type · Fixed hash length · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashLength: 10 },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Password cell type · Fixed hash length · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashLength: 10 },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json
index 1c7121c17..087ffe6cf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    id: 1,\n    name: { first: 'Chris', last: 'Right' },\n    password: 'plainTextPassword',\n  },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json
index 807e550c6..81a7b8383 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Password cell type · Reveal delay · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashRevealDelay: 1000 },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Password cell type · Reveal delay · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n  { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n  { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'First name', 'Last name', 'Password']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'id' },\n        { data: 'name.first' },\n        { data: 'name.last' },\n        { data: 'password', type: 'password', hashRevealDelay: 1000 },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json
index 57a239fe6..7bb861743 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
index dc8135feb..378566486 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashLength: 10 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
index 30da62963..5b423226b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      id: 1,\n      name: { first: 'Chris', last: 'Right' },\n      password: 'plainTextPassword',\n    },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashSymbol: '&#9632;' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
index 278473f14..5b4131a68 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Reveal delay · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashRevealDelay: 1000 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Reveal delay · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n  ],\n  colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'id' },\n    { data: 'name.first' },\n    { data: 'name.last' },\n    { data: 'password', type: 'password', hashRevealDelay: 1000 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/password-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
index 58c74a6be..bc938a849 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-select-cell-type></example1-select-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-select-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colWidths: [90, 210, 110],\n    colHeaders: ['SKU', 'Product', 'Category'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {},\n      {\n        type: 'select',\n        selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-select-cell-type></example1-select-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-select-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    colWidths: [90, 210, 110],\n    colHeaders: ['SKU', 'Product', 'Category'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      {},\n      {},\n      {\n        type: 'select',\n        selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
index 5851c5d65..70b4f4b8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
index 8907620d6..6791da41a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
index 192381300..342ef87a0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={[90, 210, 110]}\n      colHeaders={['SKU', 'Product', 'Category']}\n      columns={[\n        {},\n        {},\n        {\n          type: 'select',\n          selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/select-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={[90, 210, 110]}\n      colHeaders={['SKU', 'Product', 'Category']}\n      columns={[\n        {},\n        {},\n        {\n          type: 'select',\n          selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n        },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/select-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json
index fec8d2754..050d94b42 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware'],\n  ],\n  colWidths: [90, 210, 110],\n  colHeaders: ['SKU', 'Product', 'Category'],\n  columns: [\n    {},\n    {},\n    {\n      type: 'select',\n      selectOptions: ['Drinkware', 'Electronics', 'Furniture', 'Apparel'],\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
index 1d4aa9a87..bbdaea508 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-text-cell-type></example1-text-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-text-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'sku', type: 'text' },\n      { data: 'category', type: 'text' },\n      { data: 'quantity', type: 'numeric' },\n      { data: 'unitPrice', type: 'numeric' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-text-cell-type></example1-text-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-text-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'sku', type: 'text' },\n      { data: 'category', type: 'text' },\n      { data: 'quantity', type: 'numeric' },\n      { data: 'unitPrice', type: 'numeric' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
index d10c84404..828d942d9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-text-cell-type></example2-text-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(String(value)));\n};\n\n@Component({\n  selector: 'example2-text-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Supplier', 'Quantity'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n      { data: 'supplier', type: 'text' },\n      { data: 'quantity', type: 'numeric' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-text-cell-type></example2-text-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(String(value)));\n};\n\n@Component({\n  selector: 'example2-text-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Supplier', 'Quantity'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n      { data: 'supplier', type: 'text' },\n      { data: 'quantity', type: 'numeric' },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
index 0edf7d356..c8d3ec854 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n        { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n        { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n        { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n        { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n    ],\n    colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'sku', type: 'text' },\n        { data: 'category', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n        { data: 'unitPrice', type: 'numeric' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n        { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n        { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n        { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n        { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n    ],\n    colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'sku', type: 'text' },\n        { data: 'category', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n        { data: 'unitPrice', type: 'numeric' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
index aaa7a4e4a..6e2a4b611 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ],\n  colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n    { data: 'unitPrice', type: 'numeric' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ],\n  colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n    { data: 'unitPrice', type: 'numeric' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
index b931897a7..6be7879b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst skuValidator = (value, callback) => {\n    callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n    data: [\n        { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n        { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n        { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n        { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n        { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n    ],\n    colHeaders: ['SKU', 'Supplier', 'Quantity'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n        { data: 'supplier', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst skuValidator = (value, callback) => {\n    callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n    data: [\n        { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n        { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n        { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n        { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n        { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n    ],\n    colHeaders: ['SKU', 'Supplier', 'Quantity'],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    columns: [\n        { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n        { data: 'supplier', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
index 0f2ba1c80..f1fb09dce 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n  data: [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Quantity'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n    { data: 'supplier', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n  data: [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Quantity'],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  columns: [\n    { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n    { data: 'supplier', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
index 9842d8956..660b9ea3f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Text cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n  { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n  { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n  { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n  { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Category code', 'Quantity', 'Unit price ($)']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'sku', type: 'text' },\n        { data: 'category', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n        { data: 'unitPrice', type: 'numeric' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Text cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n  { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n  { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n  { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n  { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Category code', 'Quantity', 'Unit price ($)']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'sku', type: 'text' },\n        { data: 'category', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n        { data: 'unitPrice', type: 'numeric' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json
index ad69f4cb5..c137fa125 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Text cell type · Adding a validator · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nconst data = [\n  { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n  { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n  { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n  { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n  { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Supplier', 'Quantity']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n        { data: 'supplier', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Text cell type · Adding a validator · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nconst data = [\n  { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n  { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n  { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n  { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n  { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Supplier', 'Quantity']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      columns={[\n        { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n        { data: 'supplier', type: 'text' },\n        { data: 'quantity', type: 'numeric' },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json
index fbe11752f..af75fbb00 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ],\n  colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n    { data: 'unitPrice', type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n  ],\n  colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n    { data: 'unitPrice', type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
index 435d1d863..687e600f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Quantity'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n    { data: 'supplier', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n  callback(/^\\d{6}$/.test(value));\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n  ],\n  colHeaders: ['SKU', 'Supplier', 'Quantity'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  columns: [\n    { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n    { data: 'supplier', type: 'text' },\n    { data: 'quantity', type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
index 7c709819e..19c9569c4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-time-cell-type></example1-time-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface ShiftData {\n  shift: string;\n  start: string;\n  breakStart: string;\n  end: string;\n}\n\n@Component({\n  selector: 'example1-time-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: ShiftData[] = [\n    { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n    { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n    { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n    { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n    { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n    locale: this.locale,\n    columns: [\n      {\n        type: 'text',\n        data: 'shift',\n      },\n      {\n        type: 'intl-time',\n        data: 'start',\n        timeFormat: {\n          timeStyle: 'short',\n        },\n      },\n      {\n        type: 'intl-time',\n        data: 'breakStart',\n        timeFormat: {\n          hour: '2-digit',\n          minute: '2-digit',\n          second: '2-digit',\n        },\n      },\n      {\n        type: 'intl-time',\n        data: 'end',\n        timeFormat: {\n          hour: 'numeric',\n          hourCycle: 'h12',\n          dayPeriod: 'short',\n        },\n      },\n    ],\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/time-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-time-cell-type></example1-time-cell-type>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface ShiftData {\n  shift: string;\n  start: string;\n  breakStart: string;\n  end: string;\n}\n\n@Component({\n  selector: 'example1-time-cell-type',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdownRef>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of localeOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"locale === opt.value\"\n                  (click)=\"selectLocale(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isOpen = false;\n  locale = 'en-US';\n\n  readonly localeOptions = [\n    { value: 'ar-AR', label: 'Arabic (Global)' },\n    { value: 'cs-CZ', label: 'Czech (Czechia)' },\n    { value: 'de-CH', label: 'German (Switzerland)' },\n    { value: 'de-DE', label: 'German (Germany)' },\n    { value: 'en-US', label: 'English (United States)' },\n    { value: 'es-MX', label: 'Spanish (Mexico)' },\n    { value: 'fa-IR', label: 'Persian (Iran)' },\n    { value: 'fr-FR', label: 'French (France)' },\n    { value: 'hr-HR', label: 'Croatian (Croatia)' },\n    { value: 'it-IT', label: 'Italian (Italy)' },\n    { value: 'ja-JP', label: 'Japanese (Japan)' },\n    { value: 'ko-KR', label: 'Korean (Korea)' },\n    { value: 'lv-LV', label: 'Latvian (Latvia)' },\n    { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n    { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n    { value: 'pl-PL', label: 'Polish (Poland)' },\n    { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n    { value: 'ru-RU', label: 'Russian (Russia)' },\n    { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n    { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n    { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n  ];\n\n  readonly data: ShiftData[] = [\n    { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n    { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n    { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n    { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n    { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n    locale: this.locale,\n    columns: [\n      {\n        type: 'text',\n        data: 'shift',\n      },\n      {\n        type: 'intl-time',\n        data: 'start',\n        timeFormat: {\n          timeStyle: 'short',\n        },\n      },\n      {\n        type: 'intl-time',\n        data: 'breakStart',\n        timeFormat: {\n          hour: '2-digit',\n          minute: '2-digit',\n          second: '2-digit',\n        },\n      },\n      {\n        type: 'intl-time',\n        data: 'end',\n        timeFormat: {\n          hour: 'numeric',\n          hourCycle: 'h12',\n          dayPeriod: 'short',\n        },\n      },\n    ],\n    columnSorting: true,\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  get selectedLabel(): string {\n    return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n  }\n\n  private elementRef = inject(ElementRef);\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectLocale(value: string): void {\n    this.locale = value;\n    this.isOpen = false;\n    this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n      this.isOpen = false;\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.isOpen = false;\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/cell-types/time-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
index 384880799..5a80e0c5b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button\n          class=\"theme-dropdown-trigger\"\n          type=\"button\"\n          id=\"localeTrigger\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"false\"\n        >\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" role=\"listbox\" id=\"localeMenu\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button\n          class=\"theme-dropdown-trigger\"\n          type=\"button\"\n          id=\"localeTrigger\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"false\"\n        >\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" role=\"listbox\" id=\"localeMenu\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
index ce6aef116..fa83ba6b1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button\n          class=\"theme-dropdown-trigger\"\n          type=\"button\"\n          id=\"localeTrigger\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"false\"\n        >\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" role=\"listbox\" id=\"localeMenu\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"localeDropdown\">\n        <button\n          class=\"theme-dropdown-trigger\"\n          type=\"button\"\n          id=\"localeTrigger\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"false\"\n        >\n          <span id=\"localeLabel\">English (United States)</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" role=\"listbox\" id=\"localeMenu\" hidden>\n          <li role=\"option\" data-value=\"ar-AR\">Arabic (Global)</li>\n          <li role=\"option\" data-value=\"cs-CZ\">Czech (Czechia)</li>\n          <li role=\"option\" data-value=\"de-CH\">German (Switzerland)</li>\n          <li role=\"option\" data-value=\"de-DE\">German (Germany)</li>\n          <li role=\"option\" data-value=\"en-US\" aria-selected=\"true\">English (United States)</li>\n          <li role=\"option\" data-value=\"es-MX\">Spanish (Mexico)</li>\n          <li role=\"option\" data-value=\"fa-IR\">Persian (Iran)</li>\n          <li role=\"option\" data-value=\"fr-FR\">French (France)</li>\n          <li role=\"option\" data-value=\"hr-HR\">Croatian (Croatia)</li>\n          <li role=\"option\" data-value=\"it-IT\">Italian (Italy)</li>\n          <li role=\"option\" data-value=\"ja-JP\">Japanese (Japan)</li>\n          <li role=\"option\" data-value=\"ko-KR\">Korean (Korea)</li>\n          <li role=\"option\" data-value=\"lv-LV\">Latvian (Latvia)</li>\n          <li role=\"option\" data-value=\"nb-NO\">Norwegian Bokmal (Norway)</li>\n          <li role=\"option\" data-value=\"nl-NL\">Dutch (Netherlands)</li>\n          <li role=\"option\" data-value=\"pl-PL\">Polish (Poland)</li>\n          <li role=\"option\" data-value=\"pt-BR\">Portuguese (Brazil)</li>\n          <li role=\"option\" data-value=\"ru-RU\">Russian (Russia)</li>\n          <li role=\"option\" data-value=\"sr-SP\">Serbian Latin (Serbia)</li>\n          <li role=\"option\" data-value=\"zh-CN\">Chinese (Simplified, China)</li>\n          <li role=\"option\" data-value=\"zh-TW\">Chinese (Traditional, Taiwan)</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    hot.updateSettings({ locale: item.dataset.value });\n  }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
index bbdd5afe8..eccca912a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  const data = [\n    { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n    { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n    { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n    { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n    { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Shift', 'Start', 'Break start', 'End']}\n        locale={locale}\n        columns={[\n          {\n            type: 'text',\n            data: 'shift',\n          },\n          {\n            type: 'intl-time',\n            data: 'start',\n            timeFormat: {\n              timeStyle: 'short',\n            },\n          },\n          {\n            type: 'intl-time',\n            data: 'breakStart',\n            timeFormat: {\n              hour: '2-digit',\n              minute: '2-digit',\n              second: '2-digit',\n            },\n          },\n          {\n            type: 'intl-time',\n            data: 'end',\n            timeFormat: {\n              hour: 'numeric',\n              hourCycle: 'h12',\n              dayPeriod: 'short',\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/time-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Types ▸ Time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [locale, setLocale] = useState('en-US');\n\n  useEffect(() => {\n    const handleOutsideClick = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setLocale(value);\n    setIsOpen(false);\n    hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n  };\n\n  const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n  const data = [\n    { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n    { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n    { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n    { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n    { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n  ];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{selectedLabel}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {localeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={locale === opt.value}\n                    onClick={() => handleSelect(opt.value)}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Shift', 'Start', 'Break start', 'End']}\n        locale={locale}\n        columns={[\n          {\n            type: 'text',\n            data: 'shift',\n          },\n          {\n            type: 'intl-time',\n            data: 'start',\n            timeFormat: {\n              timeStyle: 'short',\n            },\n          },\n          {\n            type: 'intl-time',\n            data: 'breakStart',\n            timeFormat: {\n              hour: '2-digit',\n              minute: '2-digit',\n              second: '2-digit',\n            },\n          },\n          {\n            type: 'intl-time',\n            data: 'end',\n            timeFormat: {\n              hour: 'numeric',\n              hourCycle: 'h12',\n              dayPeriod: 'short',\n            },\n          },\n        ]}\n        columnSorting={true}\n        filters={true}\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/time-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json
index 61d8020b9..4de2cd260 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotRef.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  locale: 'en-US',\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/time-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions = [\n  { value: 'ar-AR', label: 'Arabic (Global)' },\n  { value: 'cs-CZ', label: 'Czech (Czechia)' },\n  { value: 'de-CH', label: 'German (Switzerland)' },\n  { value: 'de-DE', label: 'German (Germany)' },\n  { value: 'en-US', label: 'English (United States)' },\n  { value: 'es-MX', label: 'Spanish (Mexico)' },\n  { value: 'fa-IR', label: 'Persian (Iran)' },\n  { value: 'fr-FR', label: 'French (France)' },\n  { value: 'hr-HR', label: 'Croatian (Croatia)' },\n  { value: 'it-IT', label: 'Italian (Italy)' },\n  { value: 'ja-JP', label: 'Japanese (Japan)' },\n  { value: 'ko-KR', label: 'Korean (Korea)' },\n  { value: 'lv-LV', label: 'Latvian (Latvia)' },\n  { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n  { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n  { value: 'pl-PL', label: 'Polish (Poland)' },\n  { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n  { value: 'ru-RU', label: 'Russian (Russia)' },\n  { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n  { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n  { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst locale = ref('en-US');\n\nconst selectedLabel = () => localeOptions.find((o) => o.value === locale.value)?.label;\n\nconst handleSelect = (value: string) => {\n  locale.value = value;\n  isOpen.value = false;\n  hotRef.value?.hotInstance?.updateSettings({ locale: value } as GridSettings);\n};\n\nconst handleOutsideClick = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n};\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleOutsideClick);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('click', handleOutsideClick);\n  document.removeEventListener('keydown', handleEscape);\n});\n\nconst data = [\n  { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n  { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n  { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n  { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n  { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n  locale: 'en-US',\n  columns: [\n    {\n      type: 'text',\n      data: 'shift',\n    },\n    {\n      type: 'intl-time',\n      data: 'start',\n      timeFormat: {\n        timeStyle: 'short',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'breakStart',\n      timeFormat: {\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      },\n    },\n    {\n      type: 'intl-time',\n      data: 'end',\n      timeFormat: {\n        hour: 'numeric',\n        hourCycle: 'h12',\n        dayPeriod: 'short',\n      },\n    },\n  ],\n  columnSorting: true,\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" ref=\"dropdownRef\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ selectedLabel() }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in localeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"locale === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/cell-types/time-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
index 197ade229..6562c3510 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example1-column-adding></example1-column-adding>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-column-adding',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"insertColumn()\">\n          Insert column\n        </button>\n        <button class=\"button button--primary\" (click)=\"removeColumn()\">\n          Remove last column\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  insertColumn(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // insert one column at the end of the grid\n    hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n  }\n\n  removeColumn(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // remove the last column, but keep at least one column in the grid\n    if (hot && hot.countCols() > 1) {\n      hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example1-column-adding></example1-column-adding>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-column-adding',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"insertColumn()\">\n          Insert column\n        </button>\n        <button class=\"button button--primary\" (click)=\"removeColumn()\">\n          Remove last column\n        </button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  insertColumn(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // insert one column at the end of the grid\n    hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n  }\n\n  removeColumn(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // remove the last column, but keep at least one column in the grid\n    if (hot && hot.countCols() > 1) {\n      hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
index a5fefdf37..c67b96588 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example2-column-adding></example2-column-adding>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-column-adding',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    // show only the column insert and remove items in the context menu\n    contextMenu: ['col_left', 'col_right', 'remove_col'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-adding/angular/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example2-column-adding></example2-column-adding>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-column-adding',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    // show only the column insert and remove items in the context menu\n    contextMenu: ['col_left', 'col_right', 'remove_col'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-adding/angular/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json
index fc8a60381..d87175e12 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"insert-column\" class=\"button button--primary\">Insert column</button>\n      <button id=\"remove-column\" class=\"button button--primary\">Remove last column</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n        ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n        ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n        ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n        ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n        ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n    ],\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n    // insert one column at the end of the grid\n    hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n    // remove the last column, but keep at least one column in the grid\n    if (hot.countCols() > 1) {\n        hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"insert-column\" class=\"button button--primary\">Insert column</button>\n      <button id=\"remove-column\" class=\"button button--primary\">Remove last column</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n        ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n        ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n        ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n        ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n        ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n    ],\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n    // insert one column at the end of the grid\n    hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n    // remove the last column, but keep at least one column in the grid\n    if (hot.countCols() > 1) {\n        hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
index d5f0b68d6..e28ab2840 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"insert-column\" class=\"button button--primary\">Insert column</button>\n      <button id=\"remove-column\" class=\"button button--primary\">Remove last column</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n  // insert one column at the end of the grid\n  hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n  // remove the last column, but keep at least one column in the grid\n  if (hot.countCols() > 1) {\n    hot.alter('remove_col', hot.countCols() - 1, 1);\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"insert-column\" class=\"button button--primary\">Insert column</button>\n      <button id=\"remove-column\" class=\"button button--primary\">Remove last column</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n  // insert one column at the end of the grid\n  hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n  // remove the last column, but keep at least one column in the grid\n  if (hot.countCols() > 1) {\n    hot.alter('remove_col', hot.countCols() - 1, 1);\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
index 331877fde..9a10aad3e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n        ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n        ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n        ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n        ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n        ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n    ],\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    // show only the column insert and remove items in the context menu\n    contextMenu: ['col_left', 'col_right', 'remove_col'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n        ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n        ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n        ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n        ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n        ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n    ],\n    colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n    rowHeaders: true,\n    height: 'auto',\n    // show only the column insert and remove items in the context menu\n    contextMenu: ['col_left', 'col_right', 'remove_col'],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
index 0bded1ec5..12939cf8a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  // show only the column insert and remove items in the context menu\n  contextMenu: ['col_left', 'col_right', 'remove_col'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  // show only the column insert and remove items in the context menu\n  contextMenu: ['col_left', 'col_right', 'remove_col'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
index 5cc2a3ced..71d7defe6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n  ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n  ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n  ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n  ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n  ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const insertColumn = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    // insert one column at the end of the grid\n    hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n  };\n\n  const removeColumn = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    // remove the last column, but keep at least one column in the grid\n    if (hot && hot.countCols() > 1) {\n      hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={insertColumn}>\n            Insert column\n          </button>\n          <button className=\"button button--primary\" onClick={removeColumn}>\n            Remove last column\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Department', 'Title', 'Hire date']}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example1.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n  ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n  ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n  ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n  ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n  ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const insertColumn = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    // insert one column at the end of the grid\n    hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n  };\n\n  const removeColumn = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    // remove the last column, but keep at least one column in the grid\n    if (hot && hot.countCols() > 1) {\n      hot.alter('remove_col', hot.countCols() - 1, 1);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={insertColumn}>\n            Insert column\n          </button>\n          <button className=\"button button--primary\" onClick={removeColumn}>\n            Remove last column\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Department', 'Title', 'Hire date']}\n        rowHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example1.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json
index fb53a1c45..80fc5f6f1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n  ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n  ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n  ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n  ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n  ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Department', 'Title', 'Hire date']}\n      rowHeaders={true}\n      height=\"auto\"\n      // show only the column insert and remove items in the context menu\n      contextMenu={['col_left', 'col_right', 'remove_col']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example2.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n  ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n  ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n  ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n  ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n  ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Department', 'Title', 'Hire date']}\n      rowHeaders={true}\n      height=\"auto\"\n      // show only the column insert and remove items in the context menu\n      contextMenu={['col_left', 'col_right', 'remove_col']}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example2.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json
index 593c679e1..5e78c6543 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction insertColumn() {\n  const hot = hotRef.value?.hotInstance;\n\n  // insert one column at the end of the grid\n  hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n}\n\nfunction removeColumn() {\n  const hot = hotRef.value?.hotInstance;\n\n  // remove the last column, but keep at least one column in the grid\n  if (hot && hot.countCols() > 1) {\n    hot.alter('remove_col', hot.countCols() - 1, 1);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"insertColumn\">\n          Insert column\n        </button>\n        <button class=\"button button--primary\" @click=\"removeColumn\">\n          Remove last column\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction insertColumn() {\n  const hot = hotRef.value?.hotInstance;\n\n  // insert one column at the end of the grid\n  hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n}\n\nfunction removeColumn() {\n  const hot = hotRef.value?.hotInstance;\n\n  // remove the last column, but keep at least one column in the grid\n  if (hot && hot.countCols() > 1) {\n    hot.alter('remove_col', hot.countCols() - 1, 1);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"insertColumn\">\n          Insert column\n        </button>\n        <button class=\"button button--primary\" @click=\"removeColumn\">\n          Remove last column\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
index 011ebe1d0..345327b4a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  // show only the column insert and remove items in the context menu\n  contextMenu: ['col_left', 'col_right', 'remove_col'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n    ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n    ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n    ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n    ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n    ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n  ],\n  colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n  rowHeaders: true,\n  height: 'auto',\n  // show only the column insert and remove items in the context menu\n  contextMenu: ['col_left', 'col_right', 'remove_col'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
index 58a8d9f31..274874ce4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
index 939a29fec..4b36c1d99 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example10></app-example10>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example10',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    // `beforeFilter()` is a Handsontable hook\n    // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n    beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n      // gather information about the filters\n      console.log(`The amount of filters: ${conditionsStack.length}`);\n\n      // when the filters are cleared, the conditions stack is empty\n      const [lastChanged] = conditionsStack;\n\n      if (lastChanged) {\n        console.log(`The last changed column index: ${lastChanged.column}`);\n        console.log(\n          `The amount of filters added to this column: ${lastChanged.conditions.length}`\n        );\n        // the list of filter conditions\n        console.log(lastChanged.conditions);\n      }\n\n      // return `false` to disable filtering on the client side\n      return false;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example10></app-example10>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example10',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    // `beforeFilter()` is a Handsontable hook\n    // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n    beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n      // gather information about the filters\n      console.log(`The amount of filters: ${conditionsStack.length}`);\n\n      // when the filters are cleared, the conditions stack is empty\n      const [lastChanged] = conditionsStack;\n\n      if (lastChanged) {\n        console.log(`The last changed column index: ${lastChanged.column}`);\n        console.log(\n          `The amount of filters added to this column: ${lastChanged.conditions.length}`\n        );\n        // the list of filter conditions\n        console.log(lastChanged.conditions);\n      }\n\n      // return `false` to disable filtering on the client side\n      return false;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
index 63556dbbd..ca901f3eb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example11></app-example11>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example11',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"filterBelow200()\">Show items < $200</button>\n        <button (click)=\"filterAbove200()\">Show items > $200</button>\n        <button (click)=\"clearAllFilters()\">Clear filters</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n  // get the `Filters` plugin, so you can use its API\n  getFiltersPlugin(): Filters {\n    return this.hotTable.hotInstance!.getPlugin('filters');\n  }\n\n  filterBelow200() {\n    const filters = this.getFiltersPlugin();\n\n    // clear any existing filters\n    filters.clearConditions();\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  }\n\n  filterAbove200() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    // display only items that are more than ('gt') $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n  }\n\n  clearAllFilters() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    filters.filter();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example11.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example11","exampleTitle":"Filter data programmatically (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example11></app-example11>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example11',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"filterBelow200()\">Show items < $200</button>\n        <button (click)=\"filterAbove200()\">Show items > $200</button>\n        <button (click)=\"clearAllFilters()\">Clear filters</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n  // get the `Filters` plugin, so you can use its API\n  getFiltersPlugin(): Filters {\n    return this.hotTable.hotInstance!.getPlugin('filters');\n  }\n\n  filterBelow200() {\n    const filters = this.getFiltersPlugin();\n\n    // clear any existing filters\n    filters.clearConditions();\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  }\n\n  filterAbove200() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    // display only items that are more than ('gt') $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n  }\n\n  clearAllFilters() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    filters.filter();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example11.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example11","exampleTitle":"Filter data programmatically (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
index 4c7310b29..f646dc7e2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example12></app-example12>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example12',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering with option\n    filters: {\n      searchMode: 'apply'\n    },\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example12.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example12","exampleTitle":"Enable filtering within already filtered results (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example12></app-example12>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example12',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering with option\n    filters: {\n      searchMode: 'apply'\n    },\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example12.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example12","exampleTitle":"Enable filtering within already filtered results (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
index 37aa8a053..90a72afa3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example13></app-example13>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example13',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"applySampleFilter()\">Filter: price &gt; $200</button>\n        <button (click)=\"saveFilters()\">Save filter settings</button>\n        <button (click)=\"clearFilters()\">Clear filters</button>\n        <button (click)=\"restoreFilters()\">Restore filter settings</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  savedConditions: ColumnConditions[] = [];\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  // get the `Filters` plugin, so you can use its API\n  getFiltersPlugin(): Filters {\n    return this.hotTable.hotInstance!.getPlugin('filters');\n  }\n\n  applySampleFilter() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n  }\n\n  saveFilters() {\n    const filters = this.getFiltersPlugin();\n\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    this.savedConditions = filters.exportConditions();\n  }\n\n  clearFilters() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    filters.filter();\n  }\n\n  restoreFilters() {\n    const filters = this.getFiltersPlugin();\n\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters.importConditions(this.savedConditions);\n    filters.filter();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example13></app-example13>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example13',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"applySampleFilter()\">Filter: price &gt; $200</button>\n        <button (click)=\"saveFilters()\">Save filter settings</button>\n        <button (click)=\"clearFilters()\">Clear filters</button>\n        <button (click)=\"restoreFilters()\">Restore filter settings</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  savedConditions: ColumnConditions[] = [];\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  // get the `Filters` plugin, so you can use its API\n  getFiltersPlugin(): Filters {\n    return this.hotTable.hotInstance!.getPlugin('filters');\n  }\n\n  applySampleFilter() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n  }\n\n  saveFilters() {\n    const filters = this.getFiltersPlugin();\n\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    this.savedConditions = filters.exportConditions();\n  }\n\n  clearFilters() {\n    const filters = this.getFiltersPlugin();\n\n    filters.clearConditions();\n    filters.filter();\n  }\n\n  restoreFilters() {\n    const filters = this.getFiltersPlugin();\n\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters.importConditions(this.savedConditions);\n    filters.filter();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
index 2a9f6aba6..330c9d09f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example14></app-example14>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example14',\n  template: `\n    <p>{{ rowCountInfo }}</p>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  rowCountInfo = '';\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings;\n\n  constructor() {\n    // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n    // during the same change-detection cycle that first rendered the template\n    const updateRowCountInfo = (hotInstance: Handsontable) => {\n      setTimeout(() => {\n        // `getData()` returns only the rows that pass the current filters\n        // `getSourceData()` always returns every row, filtered or not\n        this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n      }, 0);\n    };\n\n    this.hotSettings = {\n      columns: [\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ],\n      // enable filtering\n      filters: true,\n      // enable the column menu\n      dropdownMenu: true,\n      // `afterInit()` and `afterFilter()` are Handsontable hooks\n      afterInit(this: Handsontable) {\n        updateRowCountInfo(this);\n      },\n      afterFilter(this: Handsontable) {\n        updateRowCountInfo(this);\n      },\n      height: 'auto',\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example14></app-example14>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example14',\n  template: `\n    <p>{{ rowCountInfo }}</p>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  rowCountInfo = '';\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings;\n\n  constructor() {\n    // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n    // during the same change-detection cycle that first rendered the template\n    const updateRowCountInfo = (hotInstance: Handsontable) => {\n      setTimeout(() => {\n        // `getData()` returns only the rows that pass the current filters\n        // `getSourceData()` always returns every row, filtered or not\n        this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n      }, 0);\n    };\n\n    this.hotSettings = {\n      columns: [\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ],\n      // enable filtering\n      filters: true,\n      // enable the column menu\n      dropdownMenu: true,\n      // `afterInit()` and `afterFilter()` are Handsontable hooks\n      afterInit(this: Handsontable) {\n        updateRowCountInfo(this);\n      },\n      afterFilter(this: Handsontable) {\n        updateRowCountInfo(this);\n      },\n      height: 'auto',\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example15.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example15.ts.json
index 183925fab..f5e090dd9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example15.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example15.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example15></app-example15>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example15',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        // turn filtering off for this column only: its menu opens without the filter controls\n        filters: false,\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering for the whole grid\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example15.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example15","exampleTitle":"Enable filtering for individual columns (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example15></app-example15>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example15',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        // turn filtering off for this column only: its menu opens without the filter controls\n        filters: false,\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering for the whole grid\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example15.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example15","exampleTitle":"Enable filtering for individual columns (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example16.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example16.ts.json
index db9c76646..880a4d107 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example16.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example16.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Change the order of values in the filter list (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example16></app-example16>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example16',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      { title: 'Task', data: 'task', type: 'text' },\n      {\n        title: 'Priority',\n        data: 'priority',\n        type: 'text',\n        // order this column's filter list by severity rather than alphabetically\n        filterValueComparator: orderBy(priorityOrder),\n      },\n      {\n        title: 'Size',\n        data: 'size',\n        type: 'text',\n        filterValueComparator: orderBy(sizeOrder),\n      },\n    ],\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example16.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example16","exampleTitle":"Change the order of values in the filter list (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Change the order of values in the filter list (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example16></app-example16>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example16',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      { title: 'Task', data: 'task', type: 'text' },\n      {\n        title: 'Priority',\n        data: 'priority',\n        type: 'text',\n        // order this column's filter list by severity rather than alphabetically\n        filterValueComparator: orderBy(priorityOrder),\n      },\n      {\n        title: 'Size',\n        data: 'size',\n        type: 'text',\n        filterValueComparator: orderBy(sizeOrder),\n      },\n    ],\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example16.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example16","exampleTitle":"Change the order of values in the filter list (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example17.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example17.ts.json
index 0c95bf815..4c7510f33 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example17.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example17.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example17></app-example17>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example17',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n        // offer only these conditions, in this order\n        filters: {\n          availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n        },\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        // the default date conditions, minus the relative ones\n        filters: {\n          availableConditions: {\n            exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n          },\n        },\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // remove \"Is not between\" from every numeric column\n    filters: {\n      availableConditions: {\n        numeric: { exclude: ['not_between'] },\n      },\n    },\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example17.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example17","exampleTitle":"Choose the conditions the filter menu offers (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example17></app-example17>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example17',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n        // offer only these conditions, in this order\n        filters: {\n          availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n        },\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        // the default date conditions, minus the relative ones\n        filters: {\n          availableConditions: {\n            exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n          },\n        },\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // remove \"Is not between\" from every numeric column\n    filters: {\n      availableConditions: {\n        numeric: { exclude: ['not_between'] },\n      },\n    },\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example17.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example17","exampleTitle":"Choose the conditions the filter menu offers (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example18.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example18.ts.json
index 8b65c5b54..9cc973f72 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example18.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example18.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filtering with nested headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example18></app-example18>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example18',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    nestedHeaders: [\n      [\n        { label: 'Item', colspan: 2 },\n        { label: 'Supply chain', colspan: 3 },\n      ],\n      ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example18.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example18","exampleTitle":"Filtering with nested headers (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filtering with nested headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example18></app-example18>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example18',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    nestedHeaders: [\n      [\n        { label: 'Item', colspan: 2 },\n        { label: 'Supply chain', colspan: 3 },\n      ],\n      ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example18.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example18","exampleTitle":"Filtering with nested headers (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
index ef3961049..7bed6a2bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu, but display only the filter menu items\n    dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example2","exampleTitle":"Enable filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu, but display only the filter menu items\n    dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example2","exampleTitle":"Enable filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
index aabc197a5..de033e092 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering for all columns\n    filters: true,\n    // enable the column menu for all columns\n    // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n    dropdownMenu: {\n      items: {\n        filter_by_value: {\n          // hide the 'Filter by value' list from all columns but the first one\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col > 0;\n          },\n        },\n        filter_action_bar: {\n          // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col > 0;\n          },\n        },\n        clear_column: {\n          // hide the 'Clear column' menu item from the first column\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col < 1;\n          },\n        },\n      },\n    },\n    // `afterGetColHeader()` is a Handsontable hook\n    // it's fired after Handsontable appends information about a column header to the table header\n    afterGetColHeader(col: number, TH: HTMLElement) {\n      // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n      if (col > 1) {\n        const button = TH.querySelector('.changeType');\n\n        if (!button) {\n          return;\n        }\n\n        button.parentElement?.removeChild(button);\n      }\n    },\n    height: 'auto',\n    // @ts-ignore\n    example: 'exampleEnableFilterInColumns',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example3.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example3","exampleTitle":"Enable filtering for individual columns (4)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering for all columns\n    filters: true,\n    // enable the column menu for all columns\n    // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n    dropdownMenu: {\n      items: {\n        filter_by_value: {\n          // hide the 'Filter by value' list from all columns but the first one\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col > 0;\n          },\n        },\n        filter_action_bar: {\n          // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col > 0;\n          },\n        },\n        clear_column: {\n          // hide the 'Clear column' menu item from the first column\n          hidden(this: Handsontable) {\n            const col = this.getSelectedRangeLast()?.to.col;\n            return col != null && col < 1;\n          },\n        },\n      },\n    },\n    // `afterGetColHeader()` is a Handsontable hook\n    // it's fired after Handsontable appends information about a column header to the table header\n    afterGetColHeader(col: number, TH: HTMLElement) {\n      // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n      if (col > 1) {\n        const button = TH.querySelector('.changeType');\n\n        if (!button) {\n          return;\n        }\n\n        button.parentElement?.removeChild(button);\n      }\n    },\n    height: 'auto',\n    // @ts-ignore\n    example: 'exampleEnableFilterInColumns',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example3.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example3","exampleTitle":"Enable filtering for individual columns (4)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
index 04f6854b3..7d1d2d850 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        // set the type of the 'Model' column\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        // set the type of the 'Price' column\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Sold on',\n        // set the type of the 'Date' column\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        // set the type of the 'Time' column\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        // set the type of the 'In stock' column\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n      {\n        title: 'Size',\n        // set the type of the 'Size' column\n        type: 'dropdown',\n        data: 'size',\n        source: ['XS', 'S', 'M', 'L', 'XL'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Color',\n        // set the type of the 'Size' column\n        type: 'autocomplete',\n        data: 'color',\n        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 175,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example4.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example4","exampleTitle":"Filter different types of data (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        // set the type of the 'Model' column\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        // set the type of the 'Price' column\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Sold on',\n        // set the type of the 'Date' column\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        // set the type of the 'Time' column\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        // set the type of the 'In stock' column\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n      {\n        title: 'Size',\n        // set the type of the 'Size' column\n        type: 'dropdown',\n        data: 'size',\n        source: ['XS', 'S', 'M', 'L', 'XL'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Color',\n        // set the type of the 'Size' column\n        type: 'autocomplete',\n        data: 'color',\n        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 175,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example4.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example4","exampleTitle":"Filter different types of data (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
index 80678c59e..e3b8f19fb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data on initialization (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n    afterInit(this: Handsontable) {\n      // get the `Filters` plugin, so you can use its API\n      const filters = this.getPlugin('filters');\n\n      // filter data by the 'Price' column (column at index 2)\n      // to display only items that are less than ('lt') $200\n      filters.addCondition(2, 'lt', [200]);\n      filters.filter();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example5.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example5","exampleTitle":"Filter data on initialization (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data on initialization (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n    afterInit(this: Handsontable) {\n      // get the `Filters` plugin, so you can use its API\n      const filters = this.getPlugin('filters');\n\n      // filter data by the 'Price' column (column at index 2)\n      // to display only items that are less than ('lt') $200\n      filters.addCondition(2, 'lt', [200]);\n      filters.filter();\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example5.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example5","exampleTitle":"Filter data on initialization (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
index 088e41509..b2fb66141 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · External quick filter (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, HostListener, ViewChild, ViewEncapsulation } from \"@angular/core\";\nimport { GridSettings, HotTableComponent, HotTableModule } from \"@handsontable/angular-wrapper\";\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: \"app-example6\",\n  encapsulation: ViewEncapsulation.None,\n  styles: `\n    .controlsQuickFilter {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      margin: 0;\n      padding: 0;\n    }\n\n    .selectColumn {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-size: 0.875rem;\n      color: #555555;\n      white-space: nowrap;\n    }\n\n    .selectColumn select {\n      border: 1px solid #e0e0e0;\n      background: none;\n      color: #333333;\n      font-size: 0.875rem;\n      padding: 0.4rem 0.625rem;\n      outline: none;\n      border-radius: 0;\n      cursor: pointer;\n    }\n\n    .selectColumn select:focus {\n      border-color: #1A42E8;\n    }\n\n    #filterField {\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      background: none;\n      color: var(--sl-color-text, #333333);\n      font-size: var(--sl-text-sm, 0.875rem);\n      padding: 0.4rem 0.625rem;\n      outline: none;\n      width: 140px;\n    }\n\n    #filterField::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    #filterField:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    #filterField:focus-visible {\n      border-color: var(--sl-color-accent, #1A42E8);\n      box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n    }\n\n    .filter-dropdown {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .filter-dropdown-label {\n      color: var(--sl-color-gray-2, #555555);\n      font-size: var(--sl-text-sm, 0.875rem);\n      white-space: nowrap;\n    }\n\n    .filter-dropdown-trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n      cursor: pointer;\n      font-size: var(--sl-text-sm, 0.875rem);\n      font-weight: 500;\n      padding: 0.4rem 0.625rem;\n      transition: color 0.15s, background-color 0.15s;\n      white-space: nowrap;\n      border-radius: 0;\n    }\n\n    .filter-dropdown-trigger:hover {\n      color: var(--sl-color-white, #333333);\n      background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n    }\n\n    .filter-dropdown-chevron {\n      flex-shrink: 0;\n      margin-inline-start: 0.15rem;\n      transition: transform 0.15s;\n    }\n\n    .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n      transform: rotate(180deg);\n    }\n\n    .filter-dropdown-menu {\n      background: var(--sl-color-bg-nav, #ffffff);\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      box-shadow: none;\n      inset-inline-start: 0;\n      list-style: none;\n      margin: 0;\n      min-width: 100%;\n      overflow-y: auto;\n      padding: 0;\n      position: absolute;\n      top: 100%;\n      z-index: 9999;\n    }\n\n    .filter-dropdown-menu li {\n      align-items: center;\n      color: var(--sl-color-text, #333333);\n      display: flex;\n      font-size: var(--sl-text-sm, 0.875rem);\n      padding: 0.5rem 0.75rem;\n      cursor: pointer;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      transition: background 0.1s, color 0.1s;\n      white-space: nowrap;\n      list-style: none;\n      margin: 0;\n    }\n\n    .filter-dropdown-menu li:last-child {\n      border-bottom: none;\n    }\n\n    .filter-dropdown-menu li:hover,\n    .filter-dropdown-menu li:focus-visible {\n      background: var(--sl-color-gray-6, #eeeeee);\n      color: var(--sl-color-white, #333333);\n      outline: none;\n    }\n\n    .filter-dropdown-menu li[aria-selected='true'] {\n      color: var(--sl-color-white, #333333);\n      box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n    }\n  `,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controlsQuickFilter\">\n        <div class=\"filter-dropdown\" (click)=\"$event.stopPropagation()\">\n          <label class=\"filter-dropdown-label\">Select a column:</label>\n          <button\n            class=\"filter-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span class=\"filter-dropdown-text\">{{ selectedLabel }}</span>\n            <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M6 9l6 6l6 -6\"/>\n            </svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"filter-dropdown-menu\" role=\"listbox\">\n              @for (option of columnOptions; track option.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"option.value === selectedColumn.toString() ? 'true' : 'false'\"\n                  (click)=\"selectColumn(option)\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n        <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" (keyup)=\"handleFilter($event)\" />\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  isOpen = false;\n  selectedColumn = 0;\n\n  readonly columnOptions: Array<{ value: string; label: string }> = [\n    { value: \"0\", label: \"Brand\" },\n    { value: \"1\", label: \"Model\" },\n    { value: \"2\", label: \"Price\" },\n    { value: \"3\", label: \"Date\" },\n    { value: \"4\", label: \"Time\" },\n    { value: \"5\", label: \"In stock\" },\n  ];\n\n  get selectedLabel(): string {\n    return this.columnOptions.find((o) => o.value === this.selectedColumn.toString())?.label ?? \"Brand\";\n  }\n\n  @HostListener(\"document:click\")\n  closeDropdown() {\n    this.isOpen = false;\n  }\n\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectColumn(option: { value: string; label: string }) {\n    this.selectedColumn = Number(option.value);\n    this.isOpen = false;\n  }\n\n  handleFilter(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    const filters = this.hotTable.hotInstance!.getPlugin(\"filters\");\n\n    filters.removeConditions(this.selectedColumn);\n    filters.addCondition(this.selectedColumn, \"contains\", [value]);\n    filters.filter();\n    this.hotTable.hotInstance!.render();\n  }\n\n  readonly hotData = [\n    {\n      brand: \"Jetpulse\",\n      model: \"Racing Socks\",\n      price: 30,\n      sellDate: \"2023-10-11\",\n      sellTime: \"01:23\",\n      inStock: false,\n    },\n    {\n      brand: \"Gigabox\",\n      model: \"HL Mountain Frame\",\n      price: 1890.9,\n      sellDate: \"2023-05-03\",\n      sellTime: \"11:27\",\n      inStock: false,\n    },\n    {\n      brand: \"Camido\",\n      model: \"Cycling Cap\",\n      price: 130.1,\n      sellDate: \"2023-03-27\",\n      sellTime: \"03:17\",\n      inStock: true,\n    },\n    {\n      brand: \"Chatterpoint\",\n      model: \"Road Tire Tube\",\n      price: 59,\n      sellDate: \"2023-08-28\",\n      sellTime: \"08:01\",\n      inStock: true,\n    },\n    {\n      brand: \"Eidel\",\n      model: \"HL Road Tire\",\n      price: 279.99,\n      sellDate: \"2023-10-02\",\n      sellTime: \"13:23\",\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: \"Brand\",\n        type: \"text\",\n        data: \"brand\",\n      },\n      {\n        title: \"Model\",\n        type: \"text\",\n        data: \"model\",\n      },\n      {\n        title: \"Price\",\n        type: \"numeric\",\n        data: \"price\",\n        locale: \"en-US\",\n        numericFormat: {\n          style: \"currency\",\n          currency: \"USD\",\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: \"Date\",\n        type: \"intl-date\",\n        data: \"sellDate\",\n        locale: \"en-GB\",\n        dateFormat: { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" },\n        className: \"htRight\",\n      },\n      {\n        title: \"Time\",\n        type: \"intl-time\",\n        data: \"sellTime\",\n        locale: \"en-GB\",\n        timeFormat: { hour: \"2-digit\", minute: \"2-digit\", hour12: false },\n        className: \"htRight\",\n      },\n      {\n        title: \"In stock\",\n        type: \"checkbox\",\n        data: \"inStock\",\n        className: \"htCenter\",\n      },\n    ],\n    colHeaders: true,\n    height: \"auto\",\n    filters: true,\n    className: \"exampleQuickFilter\",\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example6.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example6","exampleTitle":"External quick filter (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · External quick filter (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, HostListener, ViewChild, ViewEncapsulation } from \"@angular/core\";\nimport { GridSettings, HotTableComponent, HotTableModule } from \"@handsontable/angular-wrapper\";\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: \"app-example6\",\n  encapsulation: ViewEncapsulation.None,\n  styles: `\n    .controlsQuickFilter {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      margin: 0;\n      padding: 0;\n    }\n\n    .selectColumn {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-size: 0.875rem;\n      color: #555555;\n      white-space: nowrap;\n    }\n\n    .selectColumn select {\n      border: 1px solid #e0e0e0;\n      background: none;\n      color: #333333;\n      font-size: 0.875rem;\n      padding: 0.4rem 0.625rem;\n      outline: none;\n      border-radius: 0;\n      cursor: pointer;\n    }\n\n    .selectColumn select:focus {\n      border-color: #1A42E8;\n    }\n\n    #filterField {\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      background: none;\n      color: var(--sl-color-text, #333333);\n      font-size: var(--sl-text-sm, 0.875rem);\n      padding: 0.4rem 0.625rem;\n      outline: none;\n      width: 140px;\n    }\n\n    #filterField::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    #filterField:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    #filterField:focus-visible {\n      border-color: var(--sl-color-accent, #1A42E8);\n      box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n    }\n\n    .filter-dropdown {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .filter-dropdown-label {\n      color: var(--sl-color-gray-2, #555555);\n      font-size: var(--sl-text-sm, 0.875rem);\n      white-space: nowrap;\n    }\n\n    .filter-dropdown-trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n      cursor: pointer;\n      font-size: var(--sl-text-sm, 0.875rem);\n      font-weight: 500;\n      padding: 0.4rem 0.625rem;\n      transition: color 0.15s, background-color 0.15s;\n      white-space: nowrap;\n      border-radius: 0;\n    }\n\n    .filter-dropdown-trigger:hover {\n      color: var(--sl-color-white, #333333);\n      background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n    }\n\n    .filter-dropdown-chevron {\n      flex-shrink: 0;\n      margin-inline-start: 0.15rem;\n      transition: transform 0.15s;\n    }\n\n    .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n      transform: rotate(180deg);\n    }\n\n    .filter-dropdown-menu {\n      background: var(--sl-color-bg-nav, #ffffff);\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      box-shadow: none;\n      inset-inline-start: 0;\n      list-style: none;\n      margin: 0;\n      min-width: 100%;\n      overflow-y: auto;\n      padding: 0;\n      position: absolute;\n      top: 100%;\n      z-index: 9999;\n    }\n\n    .filter-dropdown-menu li {\n      align-items: center;\n      color: var(--sl-color-text, #333333);\n      display: flex;\n      font-size: var(--sl-text-sm, 0.875rem);\n      padding: 0.5rem 0.75rem;\n      cursor: pointer;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      transition: background 0.1s, color 0.1s;\n      white-space: nowrap;\n      list-style: none;\n      margin: 0;\n    }\n\n    .filter-dropdown-menu li:last-child {\n      border-bottom: none;\n    }\n\n    .filter-dropdown-menu li:hover,\n    .filter-dropdown-menu li:focus-visible {\n      background: var(--sl-color-gray-6, #eeeeee);\n      color: var(--sl-color-white, #333333);\n      outline: none;\n    }\n\n    .filter-dropdown-menu li[aria-selected='true'] {\n      color: var(--sl-color-white, #333333);\n      box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n    }\n  `,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controlsQuickFilter\">\n        <div class=\"filter-dropdown\" (click)=\"$event.stopPropagation()\">\n          <label class=\"filter-dropdown-label\">Select a column:</label>\n          <button\n            class=\"filter-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span class=\"filter-dropdown-text\">{{ selectedLabel }}</span>\n            <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M6 9l6 6l6 -6\"/>\n            </svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"filter-dropdown-menu\" role=\"listbox\">\n              @for (option of columnOptions; track option.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"option.value === selectedColumn.toString() ? 'true' : 'false'\"\n                  (click)=\"selectColumn(option)\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n        <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" (keyup)=\"handleFilter($event)\" />\n      </div>\n    </div>\n\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  isOpen = false;\n  selectedColumn = 0;\n\n  readonly columnOptions: Array<{ value: string; label: string }> = [\n    { value: \"0\", label: \"Brand\" },\n    { value: \"1\", label: \"Model\" },\n    { value: \"2\", label: \"Price\" },\n    { value: \"3\", label: \"Date\" },\n    { value: \"4\", label: \"Time\" },\n    { value: \"5\", label: \"In stock\" },\n  ];\n\n  get selectedLabel(): string {\n    return this.columnOptions.find((o) => o.value === this.selectedColumn.toString())?.label ?? \"Brand\";\n  }\n\n  @HostListener(\"document:click\")\n  closeDropdown() {\n    this.isOpen = false;\n  }\n\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectColumn(option: { value: string; label: string }) {\n    this.selectedColumn = Number(option.value);\n    this.isOpen = false;\n  }\n\n  handleFilter(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n    const filters = this.hotTable.hotInstance!.getPlugin(\"filters\");\n\n    filters.removeConditions(this.selectedColumn);\n    filters.addCondition(this.selectedColumn, \"contains\", [value]);\n    filters.filter();\n    this.hotTable.hotInstance!.render();\n  }\n\n  readonly hotData = [\n    {\n      brand: \"Jetpulse\",\n      model: \"Racing Socks\",\n      price: 30,\n      sellDate: \"2023-10-11\",\n      sellTime: \"01:23\",\n      inStock: false,\n    },\n    {\n      brand: \"Gigabox\",\n      model: \"HL Mountain Frame\",\n      price: 1890.9,\n      sellDate: \"2023-05-03\",\n      sellTime: \"11:27\",\n      inStock: false,\n    },\n    {\n      brand: \"Camido\",\n      model: \"Cycling Cap\",\n      price: 130.1,\n      sellDate: \"2023-03-27\",\n      sellTime: \"03:17\",\n      inStock: true,\n    },\n    {\n      brand: \"Chatterpoint\",\n      model: \"Road Tire Tube\",\n      price: 59,\n      sellDate: \"2023-08-28\",\n      sellTime: \"08:01\",\n      inStock: true,\n    },\n    {\n      brand: \"Eidel\",\n      model: \"HL Road Tire\",\n      price: 279.99,\n      sellDate: \"2023-10-02\",\n      sellTime: \"13:23\",\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: \"Brand\",\n        type: \"text\",\n        data: \"brand\",\n      },\n      {\n        title: \"Model\",\n        type: \"text\",\n        data: \"model\",\n      },\n      {\n        title: \"Price\",\n        type: \"numeric\",\n        data: \"price\",\n        locale: \"en-US\",\n        numericFormat: {\n          style: \"currency\",\n          currency: \"USD\",\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: \"Date\",\n        type: \"intl-date\",\n        data: \"sellDate\",\n        locale: \"en-GB\",\n        dateFormat: { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" },\n        className: \"htRight\",\n      },\n      {\n        title: \"Time\",\n        type: \"intl-time\",\n        data: \"sellTime\",\n        locale: \"en-GB\",\n        timeFormat: { hour: \"2-digit\", minute: \"2-digit\", hour12: false },\n        className: \"htRight\",\n      },\n      {\n        title: \"In stock\",\n        type: \"checkbox\",\n        data: \"inStock\",\n        className: \"htCenter\",\n      },\n    ],\n    colHeaders: true,\n    height: \"auto\",\n    filters: true,\n    className: \"exampleQuickFilter\",\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example6.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example6","exampleTitle":"External quick filter (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json
index eac274209..4c20e3ac4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .handsontable.customFilterButtonExample1 .changeType {\n        --ht-icon-button-background-color: #e2e2e263;\n        --ht-icon-button-border-radius: 100%;\n      }\n\n      .handsontable.customFilterButtonExample1 .changeType::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n      }\n    }\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // to differentiate this example's CSS from other examples on this page\n    className: 'customFilterButtonExample1',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example7.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example7","exampleTitle":"Customize the filter button (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .handsontable.customFilterButtonExample1 .changeType {\n        --ht-icon-button-background-color: #e2e2e263;\n        --ht-icon-button-border-radius: 100%;\n      }\n\n      .handsontable.customFilterButtonExample1 .changeType::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n      }\n    }\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // to differentiate this example's CSS from other examples on this page\n    className: 'customFilterButtonExample1',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example7.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example7","exampleTitle":"Customize the filter button (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
index c4425a8db..081ec7c74 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example8',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      /* hide the column menu button by default */\n      .customFilterButtonExample2 .changeType {\n        visibility: hidden;\n      }\n\n      /* show the column menu button on hover */\n      .customFilterButtonExample2 th .relative:hover .changeType {\n        visibility: visible;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // to differentiate this example's CSS from other examples on this page\n    className: 'customFilterButtonExample2',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example8.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example8","exampleTitle":"Customize the filter button (4)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example8',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      /* hide the column menu button by default */\n      .customFilterButtonExample2 .changeType {\n        visibility: hidden;\n      }\n\n      /* show the column menu button on hover */\n      .customFilterButtonExample2 th .relative:hover .changeType {\n        visibility: visible;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // to differentiate this example's CSS from other examples on this page\n    className: 'customFilterButtonExample2',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example8.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example8","exampleTitle":"Customize the filter button (4)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
index 124ffbeac..745397e11 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example9></app-example9>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example9',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'numeric',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    height: 200,\n    colWidths: [120, 150, 120, 140, 120, 120],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    colHeaders: true,\n    // enable filtering, and leave the frozen rows out of it\n    filters: {\n      filterFixedRows: false,\n    },\n    // enable the column menu\n    dropdownMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example9></app-example9>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example9',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'numeric',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    height: 200,\n    colWidths: [120, 150, 120, 140, 120, 120],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    colHeaders: true,\n    // enable filtering, and leave the frozen rows out of it\n    filters: {\n      filterFixedRows: false,\n    },\n    // enable the column menu\n    dropdownMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.js.json
index 84753a101..19a24f83d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleAvailableConditions');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleAvailableConditions.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleAvailableConditions');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleAvailableConditions.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.ts.json
index e11f46f93..03b3286d6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleAvailableConditions.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleAvailableConditions')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleAvailableConditions.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleAvailableConditions')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleAvailableConditions.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
index f9aeebb8b..3be224c00 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
index 433094c30..3fcf5a7c7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
index 5afbd1ac3..ab43c0851 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
index 9b9c10492..cbccef0a9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.js.json
index d9a941af7..b8020a9d1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleDisableFilterForColumn');\nnew Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n            // turn filtering off for this column only: its menu opens without the filter controls\n            filters: false,\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering for the whole grid\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleDisableFilterForColumn.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleDisableFilterForColumn');\nnew Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n            // turn filtering off for this column only: its menu opens without the filter controls\n            filters: false,\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering for the whole grid\n    filters: true,\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleDisableFilterForColumn.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.ts.json
index 828d3e4b9..d0ef045bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleDisableFilterForColumn.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleDisableFilterForColumn')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      // turn filtering off for this column only: its menu opens without the filter controls\n      filters: false,\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for the whole grid\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleDisableFilterForColumn.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleDisableFilterForColumn')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      // turn filtering off for this column only: its menu opens without the filter controls\n      filters: false,\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for the whole grid\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleDisableFilterForColumn.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
index b388271f1..f640820c8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast().to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast().to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast().to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader(col, TH) {\n    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n    if (col > 1) {\n      const button = TH.querySelector('.changeType');\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement.removeChild(button);\n    }\n  },\n  height: 'auto',\n  example: 'exampleEnableFilterInColumns',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast().to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast().to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast().to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader(col, TH) {\n    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n    if (col > 1) {\n      const button = TH.querySelector('.changeType');\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement.removeChild(button);\n    }\n  },\n  height: 'auto',\n  example: 'exampleEnableFilterInColumns',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
index de48bd294..d6044f2fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader(col, TH) {\n    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n    if (col > 1) {\n      const button = TH.querySelector('.changeType')!;\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement!.removeChild(button);\n    }\n  },\n  height: 'auto',\n  example: 'exampleEnableFilterInColumns',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader(col, TH) {\n    // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n    if (col > 1) {\n      const button = TH.querySelector('.changeType')!;\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement!.removeChild(button);\n    }\n  },\n  height: 'auto',\n  example: 'exampleEnableFilterInColumns',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
index 4a55be89a..167cbb945 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n    data: [\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 11,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 0,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 1,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '13:23',\n            inStock: 3,\n        },\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 5,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 22,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 13,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 0,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '13:23',\n            inStock: 14,\n        },\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 16,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 18,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 3,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 0,\n        },\n        {\n            brand: 'Vinte',\n            model: 'ML Road Frame-W',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 2,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n            className: 'htRight',\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'numeric',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    height: 200,\n    colWidths: [120, 150, 120, 140, 120, 120],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    colHeaders: true,\n    // enable filtering, and leave the frozen rows out of it\n    filters: {\n        filterFixedRows: false,\n    },\n    // enable the column menu\n    dropdownMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n    data: [\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 11,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 0,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 1,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '13:23',\n            inStock: 3,\n        },\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 5,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 22,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 13,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 0,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '13:23',\n            inStock: 14,\n        },\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 16,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: 18,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: 3,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: 0,\n        },\n        {\n            brand: 'Vinte',\n            model: 'ML Road Frame-W',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: 2,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n            className: 'htRight',\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'numeric',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    height: 200,\n    colWidths: [120, 150, 120, 140, 120, 120],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    colHeaders: true,\n    // enable filtering, and leave the frozen rows out of it\n    filters: {\n        filterFixedRows: false,\n    },\n    // enable the column menu\n    dropdownMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
index 4b0626d9e..150aa174b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'numeric',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 200,\n  colWidths: [120, 150, 120, 140, 120, 120],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  colHeaders: true,\n  // enable filtering, and leave the frozen rows out of it\n  filters: {\n    filterFixedRows: false,\n  },\n  // enable the column menu\n  dropdownMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'numeric',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 200,\n  colWidths: [120, 150, 120, 140, 120, 120],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  colHeaders: true,\n  // enable filtering, and leave the frozen rows out of it\n  filters: {\n    filterFixedRows: false,\n  },\n  // enable the column menu\n  dropdownMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
index 2dff61a32..26737753a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
index b71e6d156..b91313887 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
index b0224313e..9f29e2895 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
index e8e53fe7e..ece64a0cc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.js.json
index 7b874c37b..a0ba7df7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering with nested headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterNestedHeaders');\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterNestedHeaders.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering with nested headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterNestedHeaders');\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterNestedHeaders.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.ts.json
index 8a10a0412..ba0eed6b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterNestedHeaders.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering with nested headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterNestedHeaders')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterNestedHeaders.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering with nested headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterNestedHeaders')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterNestedHeaders.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
index 7871ce648..8f1bff74c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data on initialization · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n  afterInit() {\n    const handsontableInstance = this;\n    // get the `Filters` plugin, so you can use its API\n    const filters = handsontableInstance.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data on initialization · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n  afterInit() {\n    const handsontableInstance = this;\n    // get the `Filters` plugin, so you can use its API\n    const filters = handsontableInstance.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
index 628fed471..14b07cd38 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data on initialization · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n  afterInit() {\n    const handsontableInstance = this;\n    // get the `Filters` plugin, so you can use its API\n    const filters: Filters = handsontableInstance.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data on initialization · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n  afterInit() {\n    const handsontableInstance = this;\n    // get the `Filters` plugin, so you can use its API\n    const filters: Filters = handsontableInstance.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters.addCondition(2, 'lt', [200]);\n    filters.filter();\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
index 6eb154165..0f410ab79 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"filterBelow200\">Show items &lt; $200</button> \n      <button class=\"filterAbove200\">Show items &gt; $200</button> \n      <button class=\"clearAllFilters\">Clear filters</button>\n    </div>\n  </div>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n  // clear any existing filters\n  filters.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters.addCondition(2, 'lt', [200]);\n  filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n  filters.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"filterBelow200\">Show items &lt; $200</button> \n      <button class=\"filterAbove200\">Show items &gt; $200</button> \n      <button class=\"clearAllFilters\">Clear filters</button>\n    </div>\n  </div>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n  // clear any existing filters\n  filters.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters.addCondition(2, 'lt', [200]);\n  filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n  filters.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
index 4c977f4bc..9e26c09b5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"filterBelow200\">Show items &lt; $200</button> \n      <button class=\"filterAbove200\">Show items &gt; $200</button> \n      <button class=\"clearAllFilters\">Clear filters</button>\n    </div>\n  </div>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n  // clear any existing filters\n  filters.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters.addCondition(2, 'lt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n  filters.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"filterBelow200\">Show items &lt; $200</button> \n      <button class=\"filterAbove200\">Show items &gt; $200</button> \n      <button class=\"clearAllFilters\">Clear filters</button>\n    </div>\n  </div>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n  // clear any existing filters\n  filters.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters.addCondition(2, 'lt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n  filters.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.js.json
index a2912be21..e7b3ddfa5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order) => (a, b) => {\n  const rank = (value) => (order.indexOf(value) === -1 ? order.length : order.indexOf(value));\n\n  return rank(a) - rank(b);\n};\n\nconst container = document.querySelector('#exampleFilterValueOrder');\n\nnew Handsontable(container, {\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterValueOrder.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order) => (a, b) => {\n  const rank = (value) => (order.indexOf(value) === -1 ? order.length : order.indexOf(value));\n\n  return rank(a) - rank(b);\n};\n\nconst container = document.querySelector('#exampleFilterValueOrder');\n\nnew Handsontable(container, {\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterValueOrder.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.ts.json
index 9bd210b56..f5b05eeea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterValueOrder.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst container = document.querySelector('#exampleFilterValueOrder')!;\n\nnew Handsontable(container, {\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterValueOrder.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst container = document.querySelector('#exampleFilterValueOrder')!;\n\nnew Handsontable(container, {\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterValueOrder.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
index 76eb5341c..8d1d6bda7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <p id=\"rowCountInfo\"></p>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n    // `getData()` returns only the rows that pass the current filters\n    const visibleRowCount = instance.getData().length;\n    // `getSourceData()` always returns every row, filtered or not\n    const totalRowCount = instance.getSourceData().length;\n    rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '01:23',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // `afterFilter()` fires after Handsontable applies the filters\n    afterFilter() {\n        updateRowCountInfo(this);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <p id=\"rowCountInfo\"></p>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n    // `getData()` returns only the rows that pass the current filters\n    const visibleRowCount = instance.getData().length;\n    // `getSourceData()` always returns every row, filtered or not\n    const totalRowCount = instance.getSourceData().length;\n    rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '01:23',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    // `afterFilter()` fires after Handsontable applies the filters\n    afterFilter() {\n        updateRowCountInfo(this);\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
index 68341f6fa..21f566cfd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <p id=\"rowCountInfo\"></p>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n  // `getData()` returns only the rows that pass the current filters\n  const visibleRowCount = instance.getData().length;\n  // `getSourceData()` always returns every row, filtered or not\n  const totalRowCount = instance.getSourceData().length;\n\n  rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterFilter()` fires after Handsontable applies the filters\n  afterFilter() {\n    updateRowCountInfo(this);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <p id=\"rowCountInfo\"></p>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n  // `getData()` returns only the rows that pass the current filters\n  const visibleRowCount = instance.getData().length;\n  // `getSourceData()` always returns every row, filtered or not\n  const totalRowCount = instance.getSourceData().length;\n\n  rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // `afterFilter()` fires after Handsontable applies the filters\n  afterFilter() {\n    updateRowCountInfo(this);\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
index 31da26b4b..ca621d031 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · External quick filter · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controlsQuickFilter\">\n      <div class=\"filter-dropdown\" id=\"filterDropdown\">\n        <label class=\"filter-dropdown-label\">Select a column:</label>\n        <button class=\"filter-dropdown-trigger\" id=\"filterTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"filter-dropdown-text\" id=\"filterTriggerLabel\">Brand</span>\n          <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"filter-dropdown-menu\" id=\"filterMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"0\" aria-selected=\"true\">Brand</li>\n          <li role=\"option\" data-value=\"1\">Model</li>\n          <li role=\"option\" data-value=\"2\">Price</li>\n          <li role=\"option\" data-value=\"3\">Date</li>\n          <li role=\"option\" data-value=\"4\">Time</li>\n          <li role=\"option\" data-value=\"5\">In stock</li>\n        </ul>\n      </div>\n      <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" />\n    </div>\n  </div>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n  const open = trigger.getAttribute('aria-expanded') === 'true';\n\n  trigger.setAttribute('aria-expanded', String(!open));\n  menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n  const li = e.target.closest('li[data-value]');\n\n  if (!li) return;\n\n  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n  li.setAttribute('aria-selected', 'true');\n  selectedColumn = li.dataset.value;\n  label.textContent = li.textContent.trim();\n  trigger.setAttribute('aria-expanded', 'false');\n  menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!e.target.closest('#filterDropdown')) {\n    trigger.setAttribute('aria-expanded', 'false');\n    menu.hidden = true;\n  }\n});\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  filters: true,\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n  const filters = hot.getPlugin('filters');\n\n  filters.removeConditions(selectedColumn);\n  filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n  filters.filter();\n  hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · External quick filter · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controlsQuickFilter\">\n      <div class=\"filter-dropdown\" id=\"filterDropdown\">\n        <label class=\"filter-dropdown-label\">Select a column:</label>\n        <button class=\"filter-dropdown-trigger\" id=\"filterTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"filter-dropdown-text\" id=\"filterTriggerLabel\">Brand</span>\n          <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"filter-dropdown-menu\" id=\"filterMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"0\" aria-selected=\"true\">Brand</li>\n          <li role=\"option\" data-value=\"1\">Model</li>\n          <li role=\"option\" data-value=\"2\">Price</li>\n          <li role=\"option\" data-value=\"3\">Date</li>\n          <li role=\"option\" data-value=\"4\">Time</li>\n          <li role=\"option\" data-value=\"5\">In stock</li>\n        </ul>\n      </div>\n      <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" />\n    </div>\n  </div>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n  const open = trigger.getAttribute('aria-expanded') === 'true';\n\n  trigger.setAttribute('aria-expanded', String(!open));\n  menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n  const li = e.target.closest('li[data-value]');\n\n  if (!li) return;\n\n  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n  li.setAttribute('aria-selected', 'true');\n  selectedColumn = li.dataset.value;\n  label.textContent = li.textContent.trim();\n  trigger.setAttribute('aria-expanded', 'false');\n  menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!e.target.closest('#filterDropdown')) {\n    trigger.setAttribute('aria-expanded', 'false');\n    menu.hidden = true;\n  }\n});\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  filters: true,\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n  const filters = hot.getPlugin('filters');\n\n  filters.removeConditions(selectedColumn);\n  filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n  filters.filter();\n  hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
index 49aebcd4f..fbad7d56b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · External quick filter · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controlsQuickFilter\">\n      <div class=\"filter-dropdown\" id=\"filterDropdown\">\n        <label class=\"filter-dropdown-label\">Select a column:</label>\n        <button class=\"filter-dropdown-trigger\" id=\"filterTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"filter-dropdown-text\" id=\"filterTriggerLabel\">Brand</span>\n          <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"filter-dropdown-menu\" id=\"filterMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"0\" aria-selected=\"true\">Brand</li>\n          <li role=\"option\" data-value=\"1\">Model</li>\n          <li role=\"option\" data-value=\"2\">Price</li>\n          <li role=\"option\" data-value=\"3\">Date</li>\n          <li role=\"option\" data-value=\"4\">Time</li>\n          <li role=\"option\" data-value=\"5\">In stock</li>\n        </ul>\n      </div>\n      <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" />\n    </div>\n  </div>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n  const open = trigger.getAttribute('aria-expanded') === 'true';\n\n  trigger.setAttribute('aria-expanded', String(!open));\n  (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n  const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (!li) return;\n\n  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n  li.setAttribute('aria-selected', 'true');\n  selectedColumn = li.dataset.value!;\n  label.textContent = li.textContent!.trim();\n  trigger.setAttribute('aria-expanded', 'false');\n  (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n  if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n    trigger.setAttribute('aria-expanded', 'false');\n    (menu as HTMLElement).hidden = true;\n  }\n});\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  filters: true,\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n  const filters: Filters = hot.getPlugin('filters');\n\n  filters.removeConditions(selectedColumn as unknown as number);\n  filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n  filters.filter();\n  hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · External quick filter · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controlsQuickFilter\">\n      <div class=\"filter-dropdown\" id=\"filterDropdown\">\n        <label class=\"filter-dropdown-label\">Select a column:</label>\n        <button class=\"filter-dropdown-trigger\" id=\"filterTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"filter-dropdown-text\" id=\"filterTriggerLabel\">Brand</span>\n          <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"filter-dropdown-menu\" id=\"filterMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"0\" aria-selected=\"true\">Brand</li>\n          <li role=\"option\" data-value=\"1\">Model</li>\n          <li role=\"option\" data-value=\"2\">Price</li>\n          <li role=\"option\" data-value=\"3\">Date</li>\n          <li role=\"option\" data-value=\"4\">Time</li>\n          <li role=\"option\" data-value=\"5\">In stock</li>\n        </ul>\n      </div>\n      <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" />\n    </div>\n  </div>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n  const open = trigger.getAttribute('aria-expanded') === 'true';\n\n  trigger.setAttribute('aria-expanded', String(!open));\n  (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n  const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (!li) return;\n\n  menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n  li.setAttribute('aria-selected', 'true');\n  selectedColumn = li.dataset.value!;\n  label.textContent = li.textContent!.trim();\n  trigger.setAttribute('aria-expanded', 'false');\n  (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n  if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n    trigger.setAttribute('aria-expanded', 'false');\n    (menu as HTMLElement).hidden = true;\n  }\n});\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  filters: true,\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n  const filters: Filters = hot.getPlugin('filters');\n\n  filters.removeConditions(selectedColumn as unknown as number);\n  filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n  filters.filter();\n  hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
index 2d7345844..e99384ae1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"applySampleFilter\">Filter: price &gt; $200</button>\n      <button class=\"saveFilters\">Save filter settings</button>\n      <button class=\"clearFilters\">Clear filters</button>\n      <button class=\"restoreFilters\">Restore filter settings</button>\n    </div>\n  </div>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '01:23',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n    filters.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n    filters.clearConditions();\n    filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters.importConditions(savedConditions);\n    filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"applySampleFilter\">Filter: price &gt; $200</button>\n      <button class=\"saveFilters\">Save filter settings</button>\n      <button class=\"clearFilters\">Clear filters</button>\n      <button class=\"restoreFilters\">Restore filter settings</button>\n    </div>\n  </div>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n    data: [\n        {\n            brand: 'Jetpulse',\n            model: 'Racing Socks',\n            price: 30,\n            sellDate: '2023-10-11',\n            sellTime: '01:23',\n            inStock: false,\n        },\n        {\n            brand: 'Gigabox',\n            model: 'HL Mountain Frame',\n            price: 1890.9,\n            sellDate: '2023-05-03',\n            sellTime: '11:27',\n            inStock: false,\n        },\n        {\n            brand: 'Camido',\n            model: 'Cycling Cap',\n            price: 130.1,\n            sellDate: '2023-03-27',\n            sellTime: '03:17',\n            inStock: true,\n        },\n        {\n            brand: 'Chatterpoint',\n            model: 'Road Tire Tube',\n            price: 59,\n            sellDate: '2023-08-28',\n            sellTime: '08:01',\n            inStock: true,\n        },\n        {\n            brand: 'Eidel',\n            model: 'HL Road Tire',\n            price: 279.99,\n            sellDate: '2023-10-02',\n            sellTime: '01:23',\n            inStock: true,\n        },\n    ],\n    columns: [\n        {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n        },\n        {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n        },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n        {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n        },\n        {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n        },\n    ],\n    // enable filtering\n    filters: true,\n    // enable the column menu\n    dropdownMenu: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n    filters.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters.addCondition(2, 'gt', [200]);\n    filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n    filters.clearConditions();\n    filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters.importConditions(savedConditions);\n    filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
index 4602e211a..bb8307935 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"applySampleFilter\">Filter: price &gt; $200</button>\n      <button class=\"saveFilters\">Save filter settings</button>\n      <button class=\"clearFilters\">Clear filters</button>\n      <button class=\"restoreFilters\">Restore filter settings</button>\n    </div>\n  </div>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n  filters.clearConditions();\n  // filter the 'Price' column (column at index 2) for items over $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n  // `exportConditions()` returns the current conditions, keyed by physical column index\n  savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n  // `importConditions()` expects the same physical-column-indexed structure\n  filters.importConditions(savedConditions);\n  filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button class=\"applySampleFilter\">Filter: price &gt; $200</button>\n      <button class=\"saveFilters\">Save filter settings</button>\n      <button class=\"clearFilters\">Clear filters</button>\n      <button class=\"restoreFilters\">Restore filter settings</button>\n    </div>\n  </div>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n  filters.clearConditions();\n  // filter the 'Price' column (column at index 2) for items over $200\n  filters.addCondition(2, 'gt', [200]);\n  filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n  // `exportConditions()` returns the current conditions, keyed by physical column index\n  savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n  filters.clearConditions();\n  filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n  // `importConditions()` expects the same physical-column-indexed structure\n  filters.importConditions(savedConditions);\n  filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
index 21eb13b72..7dd690f55 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
index 2ec4528c1..2c97dda4c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
index 5fdbf755b..358d8484d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
index ff222fbbb..8d20abd1e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
index ba340fb19..2f37f5af6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
index 38108949f..48baa77bd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleAvailableConditions.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleAvailableConditions.tsx.json
index 1fd9b709a..fa0c4925f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleAvailableConditions.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleAvailableConditions.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleAvailableConditions\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n          // offer only these conditions, in this order\n          filters: {\n            availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n          },\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n          // the default date conditions, minus the relative ones\n          filters: {\n            availableConditions: {\n              exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n            },\n          },\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // remove \"Is not between\" from every numeric column\n      filters={{\n        availableConditions: {\n          numeric: { exclude: ['not_between'] },\n        },\n      }}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleAvailableConditions.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleAvailableConditions\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n          // offer only these conditions, in this order\n          filters: {\n            availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n          },\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n          // the default date conditions, minus the relative ones\n          filters: {\n            availableConditions: {\n              exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n            },\n          },\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // remove \"Is not between\" from every numeric column\n      filters={{\n        availableConditions: {\n          numeric: { exclude: ['not_between'] },\n        },\n      }}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleAvailableConditions.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
index bf7debbad..683c0d130 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      // to differentiate this example's CSS from other examples on this page\n      className=\"customFilterButtonExample1\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      // to differentiate this example's CSS from other examples on this page\n      className=\"customFilterButtonExample1\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json
index 0c2e9388d..57a4b2080 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      // to differentiate this example's CSS from other examples on this page\n      className=\"customFilterButtonExample2\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton2.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      // to differentiate this example's CSS from other examples on this page\n      className=\"customFilterButtonExample2\"\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton2.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleDisableFilterForColumn.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleDisableFilterForColumn.tsx.json
index 0dc08b652..508ed47ec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleDisableFilterForColumn.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleDisableFilterForColumn.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleDisableFilterForColumn\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n          // turn filtering off for this column only: its menu opens without the filter controls\n          filters: false,\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering for the whole grid\n      filters={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleDisableFilterForColumn.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleDisableFilterForColumn\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n          // turn filtering off for this column only: its menu opens without the filter controls\n          filters: false,\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering for the whole grid\n      filters={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleDisableFilterForColumn.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json
index 87c9f7cd0..dadab0034 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleEnableFilterInColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n  const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n    if (col > 1) {\n      const button = TH.querySelector('.changeType');\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement.removeChild(button);\n    }\n  };\n\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering for all columns\n      filters={true}\n      // enable the column menu for all columns\n      // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n      dropdownMenu={{\n        items: {\n          filter_by_value: {\n            // hide the 'Filter by value' list from all columns but the first one\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col > 0;\n            },\n          },\n          filter_action_bar: {\n            // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col > 0;\n            },\n          },\n          clear_column: {\n            // hide the 'Clear column' menu item from the first column\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col < 1;\n            },\n          },\n        },\n      }}\n      // `afterGetColHeader()` is a Handsontable hook\n      // it's fired after Handsontable appends information about a column header to the table header\n      afterGetColHeader={removeColumnMenuButton}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleEnableFilterInColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n  const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n    if (col > 1) {\n      const button = TH.querySelector('.changeType');\n\n      if (!button) {\n        return;\n      }\n\n      button.parentElement.removeChild(button);\n    }\n  };\n\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering for all columns\n      filters={true}\n      // enable the column menu for all columns\n      // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n      dropdownMenu={{\n        items: {\n          filter_by_value: {\n            // hide the 'Filter by value' list from all columns but the first one\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col > 0;\n            },\n          },\n          filter_action_bar: {\n            // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col > 0;\n            },\n          },\n          clear_column: {\n            // hide the 'Clear column' menu item from the first column\n            hidden() {\n              return this.getSelectedRangeLast()!.to.col < 1;\n            },\n          },\n        },\n      }}\n      // `afterGetColHeader()` is a Handsontable hook\n      // it's fired after Handsontable appends information about a column header to the table header\n      afterGetColHeader={removeColumnMenuButton}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
index 00b416ac5..a439d4a58 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 11,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 0,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 1,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: 3,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 5,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 22,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 13,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 0,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: 14,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 16,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 18,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 3,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 0,\n  },\n  {\n    brand: 'Vinte',\n    model: 'ML Road Frame-W',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 2,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n          className: 'htRight',\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'numeric',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      height={200}\n      colWidths={[120, 150, 120, 140, 120, 120]}\n      fixedRowsTop={1}\n      fixedRowsBottom={1}\n      colHeaders={true}\n      filters={{ filterFixedRows: false }}\n      dropdownMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 11,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 0,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 1,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: 3,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 5,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 22,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 13,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 0,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: 14,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 16,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: 18,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: 3,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: 0,\n  },\n  {\n    brand: 'Vinte',\n    model: 'ML Road Frame-W',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: 2,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n          className: 'htRight',\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'numeric',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      height={200}\n      colWidths={[120, 150, 120, 140, 120, 120]}\n      fixedRowsTop={1}\n      fixedRowsBottom={1}\n      colHeaders={true}\n      filters={{ filterFixedRows: false }}\n      dropdownMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json
index d009a029c..aeb3ee50c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Filtering demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterBasicDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterBasicDemo.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Filtering demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterBasicDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterBasicDemo.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json
index 14fe5d6cd..dfbb78d3e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Filter different types of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    model: 'Racing Socks',\n    size: 'S',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n    color: 'Black',\n  },\n  {\n    model: 'HL Mountain Shirt',\n    size: 'XS',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n    color: 'White',\n  },\n  {\n    model: 'Cycling Cap',\n    size: 'L',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n    color: 'Green',\n  },\n  {\n    model: 'Ski Jacket',\n    size: 'M',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n    color: 'Blue',\n  },\n  {\n    model: 'HL Goggles',\n    size: 'XL',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n    color: 'Black',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Model',\n          // set the type of the 'Model' column\n          type: 'text', // 'text' is the default type, so you can omit this line\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          // set the type of the 'Price' column\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Sold on',\n          // set the type of the 'Date' column\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          // set the type of the 'Time' column\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          // set the type of the 'In stock' column\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n        {\n          title: 'Size',\n          // set the type of the 'Size' column\n          type: 'dropdown',\n          data: 'size',\n          source: ['XS', 'S', 'M', 'L', 'XL'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Color',\n          // set the type of the 'Size' column\n          type: 'autocomplete',\n          data: 'color',\n          source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height={175}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Filter different types of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    model: 'Racing Socks',\n    size: 'S',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n    color: 'Black',\n  },\n  {\n    model: 'HL Mountain Shirt',\n    size: 'XS',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n    color: 'White',\n  },\n  {\n    model: 'Cycling Cap',\n    size: 'L',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n    color: 'Green',\n  },\n  {\n    model: 'Ski Jacket',\n    size: 'M',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n    color: 'Blue',\n  },\n  {\n    model: 'HL Goggles',\n    size: 'XL',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n    color: 'Black',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Model',\n          // set the type of the 'Model' column\n          type: 'text', // 'text' is the default type, so you can omit this line\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          // set the type of the 'Price' column\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Sold on',\n          // set the type of the 'Date' column\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          // set the type of the 'Time' column\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          // set the type of the 'In stock' column\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n        {\n          title: 'Size',\n          // set the type of the 'Size' column\n          type: 'dropdown',\n          data: 'size',\n          source: ['XS', 'S', 'M', 'L', 'XL'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Color',\n          // set the type of the 'Size' column\n          type: 'autocomplete',\n          data: 'color',\n          source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height={175}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterNestedHeaders.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterNestedHeaders.tsx.json
index ca8352d09..b668c714e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterNestedHeaders.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterNestedHeaders.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Filtering with nested headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterNestedHeaders\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      nestedHeaders={[\n        [\n          { label: 'Item', colspan: 2 },\n          { label: 'Supply chain', colspan: 3 },\n        ],\n        ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterNestedHeaders.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Filtering with nested headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterNestedHeaders\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      nestedHeaders={[\n        [\n          { label: 'Item', colspan: 2 },\n          { label: 'Supply chain', colspan: 3 },\n        ],\n        ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterNestedHeaders.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json
index ae7ae886c..92eaf5a3a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Filter data on initialization · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterOnInitialization\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n    // get the `Filters` plugin, so you can use its API\n    const filters = handsontableInstance?.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters?.addCondition(2, 'lt', [200]);\n    filters?.filter();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableComponentRef}\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterOnInitialization.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Filter data on initialization · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterOnInitialization\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n    // get the `Filters` plugin, so you can use its API\n    const filters = handsontableInstance?.getPlugin('filters');\n\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters?.addCondition(2, 'lt', [200]);\n    filters?.filter();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableComponentRef}\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterOnInitialization.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json
index c20edf363..1b59c3ebf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Filter data programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterThroughAPI1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const filterBelow200 = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // clear any existing filters\n    filters?.clearConditions();\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters?.addCondition(2, 'lt', [200]);\n    filters?.filter();\n  };\n\n  const filterAbove200 = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    // display only items that are more than ('gt') $200\n    filters?.addCondition(2, 'gt', [200]);\n    filters?.filter();\n  };\n\n  const clearAllFilters = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // clear all filters\n    filters?.clearConditions();\n    filters?.filter();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={filterBelow200}>Show items &lt; $200</button>\n          <button onClick={filterAbove200}>Show items &gt; $200</button>\n          <button onClick={clearAllFilters}>Clear filters</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Filter data programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterThroughAPI1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const filterBelow200 = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // clear any existing filters\n    filters?.clearConditions();\n    // filter data by the 'Price' column (column at index 2)\n    // to display only items that are less than ('lt') $200\n    filters?.addCondition(2, 'lt', [200]);\n    filters?.filter();\n  };\n\n  const filterAbove200 = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    // display only items that are more than ('gt') $200\n    filters?.addCondition(2, 'gt', [200]);\n    filters?.filter();\n  };\n\n  const clearAllFilters = () => {\n    // get the `Filters` plugin, so you can use its API\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // clear all filters\n    filters?.clearConditions();\n    filters?.filter();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={filterBelow200}>Show items &lt; $200</button>\n          <button onClick={filterAbove200}>Show items &gt; $200</button>\n          <button onClick={clearAllFilters}>Clear filters</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterValueOrder.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterValueOrder.tsx.json
index d1b3ce66f..53502753a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterValueOrder.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterValueOrder.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterValueOrder\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst data = [\n  { task: 'Fix login timeout', priority: 'High', size: 'M' },\n  { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n  { task: 'Database failover', priority: 'Critical', size: 'XL' },\n  { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n  { task: 'Rotate API keys', priority: 'High', size: 'L' },\n  { task: 'Archive old reports', priority: '', size: 'S' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        { title: 'Task', data: 'task', type: 'text' },\n        {\n          title: 'Priority',\n          data: 'priority',\n          type: 'text',\n          // order this column's filter list by severity rather than alphabetically\n          filterValueComparator: orderBy(priorityOrder),\n        },\n        {\n          title: 'Size',\n          data: 'size',\n          type: 'text',\n          filterValueComparator: orderBy(sizeOrder),\n        },\n      ]}\n      filters={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterValueOrder.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterValueOrder\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst data = [\n  { task: 'Fix login timeout', priority: 'High', size: 'M' },\n  { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n  { task: 'Database failover', priority: 'Critical', size: 'XL' },\n  { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n  { task: 'Rotate API keys', priority: 'High', size: 'L' },\n  { task: 'Archive old reports', priority: '', size: 'S' },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        { title: 'Task', data: 'task', type: 'text' },\n        {\n          title: 'Priority',\n          data: 'priority',\n          type: 'text',\n          // order this column's filter list by severity rather than alphabetically\n          filterValueComparator: orderBy(priorityOrder),\n        },\n        {\n          title: 'Size',\n          data: 'size',\n          type: 'text',\n          filterValueComparator: orderBy(sizeOrder),\n        },\n      ]}\n      filters={true}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterValueOrder.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json
index 72387fe59..5506d4a36 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Get filtered data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const [rowCountInfo, setRowCountInfo] = useState('');\n\n  const updateRowCountInfo = () => {\n    const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // `getData()` returns only the rows that pass the current filters\n    // `getSourceData()` always returns every row, filtered or not\n    setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n  };\n\n  return (\n    <>\n      <p>{rowCountInfo}</p>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        afterInit={updateRowCountInfo}\n        afterFilter={updateRowCountInfo}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleGetFilteredData.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Get filtered data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const [rowCountInfo, setRowCountInfo] = useState('');\n\n  const updateRowCountInfo = () => {\n    const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // `getData()` returns only the rows that pass the current filters\n    // `getSourceData()` always returns every row, filtered or not\n    setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n  };\n\n  return (\n    <>\n      <p>{rowCountInfo}</p>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        afterInit={updateRowCountInfo}\n        afterFilter={updateRowCountInfo}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleGetFilteredData.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json
index 1e08511c6..15d334aec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · External quick filter · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleQuickFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Embedded so the example is self-contained in bundler environments.\nconst QUICK_FILTER_STYLES = `\n  .controlsQuickFilter {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    margin: 0;\n    padding: 0;\n  }\n  #filterField {\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    background: none;\n    color: var(--sl-color-text, #333333);\n    font-size: var(--sl-text-sm, 0.875rem);\n    padding: 0.4rem 0.625rem;\n    outline: none;\n    width: 140px;\n  }\n  #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }\n  #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }\n  #filterField:focus-visible {\n    border-color: var(--sl-color-accent, #1A42E8);\n    box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n  }\n  .filter-dropdown {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  .filter-dropdown-label {\n    color: var(--sl-color-gray-2, #555555);\n    font-size: var(--sl-text-sm, 0.875rem);\n    white-space: nowrap;\n  }\n  .filter-dropdown-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: none;\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    color: var(--sl-color-gray-2, #555555);\n    cursor: pointer;\n    font-size: var(--sl-text-sm, 0.875rem);\n    font-weight: 500;\n    padding: 0.4rem 0.625rem;\n    transition: color 0.15s, background-color 0.15s;\n    white-space: nowrap;\n    border-radius: 0;\n  }\n  .filter-dropdown-trigger:hover {\n    color: var(--sl-color-white, #333333);\n    background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n  }\n  .filter-dropdown-chevron {\n    flex-shrink: 0;\n    margin-inline-start: 0.15rem;\n    transition: transform 0.15s;\n  }\n  .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }\n  .filter-dropdown-menu {\n    background: var(--sl-color-bg-nav, #ffffff);\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    border-radius: 0;\n    box-shadow: none;\n    inset-inline-start: 0;\n    list-style: none;\n    margin: 0;\n    min-width: 100%;\n    overflow-y: auto;\n    padding: 0;\n    position: absolute;\n    top: 100%;\n    z-index: 9999;\n  }\n  .filter-dropdown-menu li {\n    align-items: center;\n    color: var(--sl-color-text, #333333);\n    display: flex;\n    font-size: var(--sl-text-sm, 0.875rem);\n    padding: 0.5rem 0.75rem;\n    cursor: pointer;\n    border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    transition: background 0.1s, color 0.1s;\n    white-space: nowrap;\n    list-style: none;\n    margin: 0;\n  }\n  .filter-dropdown-menu li:last-child { border-bottom: none; }\n  .filter-dropdown-menu li:hover,\n  .filter-dropdown-menu li:focus-visible {\n    background: var(--sl-color-gray-6, #eeeeee);\n    color: var(--sl-color-white, #333333);\n    outline: none;\n  }\n  .filter-dropdown-menu li[aria-selected='true'] {\n    color: var(--sl-color-white, #333333);\n    box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n  }\n`;\n\nconst columnOptions = [\n  { value: '0', label: 'Brand' },\n  { value: '1', label: 'Model' },\n  { value: '2', label: 'Price' },\n  { value: '3', label: 'Date' },\n  { value: '4', label: 'Time' },\n  { value: '5', label: 'In stock' },\n];\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [selectedColumn, setSelectedColumn] = useState('0');\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, []);\n\n  const handleFilter = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n    const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n    filtersPlugin?.removeConditions(Number(selectedColumn));\n    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);\n    filtersPlugin?.filter();\n    handsontableInstance?.render();\n  };\n\n  const handleSelect = (col: { value: string; label: string }) => {\n    setSelectedColumn(col.value);\n    setOpen(false);\n  };\n\n  const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';\n\n  return (\n    <>\n      <style>{QUICK_FILTER_STYLES}</style>\n      <div className=\"example-controls-container\">\n        <div className=\"controlsQuickFilter\">\n          <div className=\"filter-dropdown\" ref={dropdownRef}>\n            <span className=\"filter-dropdown-label\">Select a column:</span>\n            <button\n              className=\"filter-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={open}\n              onClick={() => setOpen(!open)}\n            >\n              <span className=\"filter-dropdown-text\">{selectedLabel}</span>\n              <svg className=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {open && (\n              <ul className=\"filter-dropdown-menu\" role=\"listbox\">\n                {columnOptions.map((col) => (\n                  <li\n                    key={col.value}\n                    role=\"option\"\n                    aria-selected={col.value === selectedColumn}\n                    onClick={() => handleSelect(col)}\n                  >\n                    {col.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n          <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" onKeyUp={handleFilter} />\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        filters={true}\n        height=\"auto\"\n        className=\"exampleQuickFilter\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/react/exampleQuickFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · External quick filter · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleQuickFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Embedded so the example is self-contained in bundler environments.\nconst QUICK_FILTER_STYLES = `\n  .controlsQuickFilter {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    margin: 0;\n    padding: 0;\n  }\n  #filterField {\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    background: none;\n    color: var(--sl-color-text, #333333);\n    font-size: var(--sl-text-sm, 0.875rem);\n    padding: 0.4rem 0.625rem;\n    outline: none;\n    width: 140px;\n  }\n  #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }\n  #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }\n  #filterField:focus-visible {\n    border-color: var(--sl-color-accent, #1A42E8);\n    box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n  }\n  .filter-dropdown {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  .filter-dropdown-label {\n    color: var(--sl-color-gray-2, #555555);\n    font-size: var(--sl-text-sm, 0.875rem);\n    white-space: nowrap;\n  }\n  .filter-dropdown-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: none;\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    color: var(--sl-color-gray-2, #555555);\n    cursor: pointer;\n    font-size: var(--sl-text-sm, 0.875rem);\n    font-weight: 500;\n    padding: 0.4rem 0.625rem;\n    transition: color 0.15s, background-color 0.15s;\n    white-space: nowrap;\n    border-radius: 0;\n  }\n  .filter-dropdown-trigger:hover {\n    color: var(--sl-color-white, #333333);\n    background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n  }\n  .filter-dropdown-chevron {\n    flex-shrink: 0;\n    margin-inline-start: 0.15rem;\n    transition: transform 0.15s;\n  }\n  .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }\n  .filter-dropdown-menu {\n    background: var(--sl-color-bg-nav, #ffffff);\n    border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    border-radius: 0;\n    box-shadow: none;\n    inset-inline-start: 0;\n    list-style: none;\n    margin: 0;\n    min-width: 100%;\n    overflow-y: auto;\n    padding: 0;\n    position: absolute;\n    top: 100%;\n    z-index: 9999;\n  }\n  .filter-dropdown-menu li {\n    align-items: center;\n    color: var(--sl-color-text, #333333);\n    display: flex;\n    font-size: var(--sl-text-sm, 0.875rem);\n    padding: 0.5rem 0.75rem;\n    cursor: pointer;\n    border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    transition: background 0.1s, color 0.1s;\n    white-space: nowrap;\n    list-style: none;\n    margin: 0;\n  }\n  .filter-dropdown-menu li:last-child { border-bottom: none; }\n  .filter-dropdown-menu li:hover,\n  .filter-dropdown-menu li:focus-visible {\n    background: var(--sl-color-gray-6, #eeeeee);\n    color: var(--sl-color-white, #333333);\n    outline: none;\n  }\n  .filter-dropdown-menu li[aria-selected='true'] {\n    color: var(--sl-color-white, #333333);\n    box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n  }\n`;\n\nconst columnOptions = [\n  { value: '0', label: 'Brand' },\n  { value: '1', label: 'Model' },\n  { value: '2', label: 'Price' },\n  { value: '3', label: 'Date' },\n  { value: '4', label: 'Time' },\n  { value: '5', label: 'In stock' },\n];\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [selectedColumn, setSelectedColumn] = useState('0');\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, []);\n\n  const handleFilter = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n    const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n    filtersPlugin?.removeConditions(Number(selectedColumn));\n    filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);\n    filtersPlugin?.filter();\n    handsontableInstance?.render();\n  };\n\n  const handleSelect = (col: { value: string; label: string }) => {\n    setSelectedColumn(col.value);\n    setOpen(false);\n  };\n\n  const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';\n\n  return (\n    <>\n      <style>{QUICK_FILTER_STYLES}</style>\n      <div className=\"example-controls-container\">\n        <div className=\"controlsQuickFilter\">\n          <div className=\"filter-dropdown\" ref={dropdownRef}>\n            <span className=\"filter-dropdown-label\">Select a column:</span>\n            <button\n              className=\"filter-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={open}\n              onClick={() => setOpen(!open)}\n            >\n              <span className=\"filter-dropdown-text\">{selectedLabel}</span>\n              <svg className=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {open && (\n              <ul className=\"filter-dropdown-menu\" role=\"listbox\">\n                {columnOptions.map((col) => (\n                  <li\n                    key={col.value}\n                    role=\"option\"\n                    aria-selected={col.value === selectedColumn}\n                    onClick={() => handleSelect(col)}\n                  >\n                    {col.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n          <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" onKeyUp={handleFilter} />\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        filters={true}\n        height=\"auto\"\n        className=\"exampleQuickFilter\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/react/exampleQuickFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json
index 4ece0b8a7..c4559185e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Save and restore filter settings · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const savedConditions = useRef<ColumnConditions[]>([]);\n\n  const applySampleFilter = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters?.addCondition(2, 'gt', [200]);\n    filters?.filter();\n  };\n\n  const saveFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    savedConditions.current = filters?.exportConditions() ?? [];\n  };\n\n  const clearFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    filters?.filter();\n  };\n\n  const restoreFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters?.importConditions(savedConditions.current);\n    filters?.filter();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={applySampleFilter}>Filter: price &gt; $200</button>\n          <button onClick={saveFilters}>Save filter settings</button>\n          <button onClick={clearFilters}>Clear filters</button>\n          <button onClick={restoreFilters}>Restore filter settings</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSaveRestoreFilters.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Save and restore filter settings · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const savedConditions = useRef<ColumnConditions[]>([]);\n\n  const applySampleFilter = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    // filter the 'Price' column (column at index 2) for items over $200\n    filters?.addCondition(2, 'gt', [200]);\n    filters?.filter();\n  };\n\n  const saveFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // `exportConditions()` returns the current conditions, keyed by physical column index\n    savedConditions.current = filters?.exportConditions() ?? [];\n  };\n\n  const clearFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    filters?.clearConditions();\n    filters?.filter();\n  };\n\n  const restoreFilters = () => {\n    const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n    // `importConditions()` expects the same physical-column-indexed structure\n    filters?.importConditions(savedConditions.current);\n    filters?.filter();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={applySampleFilter}>Filter: price &gt; $200</button>\n          <button onClick={saveFilters}>Save filter settings</button>\n          <button onClick={clearFilters}>Clear filters</button>\n          <button onClick={restoreFilters}>Restore filter settings</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        // enable filtering\n        filters={true}\n        // enable the column menu\n        dropdownMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSaveRestoreFilters.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json
index d377dca39..c1aebf51b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSearchMode\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering with option\n      filters={{\n        searchMode: 'apply',\n      }}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSearchMode.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSearchMode\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering with option\n      filters={{\n        searchMode: 'apply',\n      }}\n      dropdownMenu={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSearchMode.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json
index 5ddb834d9..ce33b28a5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Server-side filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      // `beforeFilter()` is a Handsontable hook\n      // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n      beforeFilter={function (conditionsStack) {\n        // gather information about the filters\n        console.log(`The amount of filters: ${conditionsStack.length}`);\n\n        // when the filters are cleared, the conditions stack is empty\n        const [lastChanged] = conditionsStack;\n\n        if (lastChanged) {\n          console.log(`The last changed column index: ${lastChanged.column}`);\n          console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n          // the list of filter conditions\n          console.log(lastChanged.conditions);\n        }\n\n        // return `false` to disable filtering on the client side\n        return false;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleServerSideFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Server-side filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu\n      dropdownMenu={true}\n      height=\"auto\"\n      // `beforeFilter()` is a Handsontable hook\n      // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n      beforeFilter={function (conditionsStack) {\n        // gather information about the filters\n        console.log(`The amount of filters: ${conditionsStack.length}`);\n\n        // when the filters are cleared, the conditions stack is empty\n        const [lastChanged] = conditionsStack;\n\n        if (lastChanged) {\n          console.log(`The last changed column index: ${lastChanged.column}`);\n          console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n          // the list of filter conditions\n          console.log(lastChanged.conditions);\n        }\n\n        // return `false` to disable filtering on the client side\n        return false;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleServerSideFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json
index fafb24c75..e980852ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleShowFilterItemsOnly\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu, but display only the filter menu items\n      dropdownMenu={['filter_by_condition', 'filter_by_value', 'filter_action_bar']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleShowFilterItemsOnly\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '01:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable filtering\n      filters={true}\n      // enable the column menu, but display only the filter menu items\n      dropdownMenu={['filter_by_condition', 'filter_by_value', 'filter_action_bar']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleAvailableConditions.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleAvailableConditions.vue.json
index 4edebdff5..de20a538f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleAvailableConditions.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleAvailableConditions.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleAvailableConditions\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleAvailableConditions\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleAvailableConditions.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Choose the conditions the filter menu offers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleAvailableConditions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleAvailableConditions\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // offer only these conditions, in this order\n      filters: {\n        availableConditions: ['eq', 'neq', '---------', 'empty', 'not_empty'],\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      // the default date conditions, minus the relative ones\n      filters: {\n        availableConditions: {\n          exclude: ['intl_date_today', 'intl_date_tomorrow', 'intl_date_yesterday'],\n        },\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // remove \"Is not between\" from every numeric column\n  filters: {\n    availableConditions: {\n      numeric: { exclude: ['not_between'] },\n    },\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleAvailableConditions\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleAvailableConditions.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleAvailableConditions","exampleTitle":"Choose the conditions the filter menu offers","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json
index 88cdd5c40..177a18de9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomFilterButton\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample1',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomFilterButton\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.handsontable.customFilterButtonExample1 .changeType {\n  --ht-icon-button-background-color: #e2e2e263;\n  --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
index 596383187..8c0f787e2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomFilterButton2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton2.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomFilterButton2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  // to differentiate this example's CSS from other examples on this page\n  className: 'customFilterButtonExample2',\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomFilterButton2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n  visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n  visibility: visible;\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton2.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleDisableFilterForColumn.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleDisableFilterForColumn.vue.json
index 259ee682e..19d880e31 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleDisableFilterForColumn.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleDisableFilterForColumn.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleDisableFilterForColumn\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      // turn filtering off for this column only: its menu opens without the filter controls\n      filters: false,\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for the whole grid\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleDisableFilterForColumn\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleDisableFilterForColumn.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleDisableFilterForColumn\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleDisableFilterForColumn\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      // turn filtering off for this column only: its menu opens without the filter controls\n      filters: false,\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for the whole grid\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleDisableFilterForColumn\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleDisableFilterForColumn.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleDisableFilterForColumn","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
index 66244723f..46cebe0f4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleEnableFilterInColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// remove the column menu button from the 'Brand', 'Price', and 'Date' columns\nconst removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n  if (col > 1) {\n    const button = TH.querySelector('.changeType');\n\n    if (!button) {\n      return;\n    }\n\n    button.parentElement.removeChild(button);\n  }\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader: removeColumnMenuButton,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleEnableFilterInColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleEnableFilterInColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleEnableFilterInColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// remove the column menu button from the 'Brand', 'Price', and 'Date' columns\nconst removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n  if (col > 1) {\n    const button = TH.querySelector('.changeType');\n\n    if (!button) {\n      return;\n    }\n\n    button.parentElement.removeChild(button);\n  }\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering for all columns\n  filters: true,\n  // enable the column menu for all columns\n  // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n  dropdownMenu: {\n    items: {\n      filter_by_value: {\n        // hide the 'Filter by value' list from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      filter_action_bar: {\n        // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col > 0;\n        },\n      },\n      clear_column: {\n        // hide the 'Clear column' menu item from the first column\n        hidden() {\n          return this.getSelectedRangeLast()!.to.col < 1;\n        },\n      },\n    },\n  },\n  // `afterGetColHeader()` is a Handsontable hook\n  // it's fired after Handsontable appends information about a column header to the table header\n  afterGetColHeader: removeColumnMenuButton,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleEnableFilterInColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns (3)","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
index 8b6c419be..4075bf088 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'numeric',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 200,\n  colWidths: [120, 150, 120, 140, 120, 120],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  colHeaders: true,\n  filters: {\n    filterFixedRows: false,\n  },\n  dropdownMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleExcludeRowsFromFiltering\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromFiltering\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 11,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 0,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 1,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 3,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 5,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 22,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 13,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: 14,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 16,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: 18,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: 3,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: 0,\n    },\n    {\n      brand: 'Vinte',\n      model: 'ML Road Frame-W',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: 2,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'numeric',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 200,\n  colWidths: [120, 150, 120, 140, 120, 120],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  colHeaders: true,\n  filters: {\n    filterFixedRows: false,\n  },\n  dropdownMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleExcludeRowsFromFiltering\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
index fea51e0fb..2d6de2101 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterBasicDemo\");","/src/App.vue":"<script setup lang=\"ts\">\n// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterBasicDemo\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterBasicDemo.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterBasicDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterBasicDemo\");","/src/App.vue":"<script setup lang=\"ts\">\n// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterBasicDemo\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterBasicDemo.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
index 5ae93bb18..9819141b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterDifferentTypes\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterDifferentTypes\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterDifferentTypes\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n      color: 'Black',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 175,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterDifferentTypes\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterNestedHeaders.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterNestedHeaders.vue.json
index e408d4ed3..81b7faa38 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterNestedHeaders.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterNestedHeaders.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering with nested headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterNestedHeaders\");","/src/App.vue":"<script setup lang=\"ts\">\n// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterNestedHeaders\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterNestedHeaders.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering with nested headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterNestedHeaders\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterNestedHeaders\");","/src/App.vue":"<script setup lang=\"ts\">\n// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ],\n  nestedHeaders: [\n    [\n      { label: 'Item', colspan: 2 },\n      { label: 'Supply chain', colspan: 3 },\n    ],\n    ['SKU', 'Product name', 'Supplier', 'Category', 'Warehouse'],\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterNestedHeaders\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterNestedHeaders.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterNestedHeaders","exampleTitle":"Filtering with nested headers","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
index a43773ac6..2a08cebe2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data on initialization · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterOnInitialization\");","/src/App.vue":"<script setup lang=\"ts\">\n// you need a template ref to call Handsontable's instance methods\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nonMounted(() => {\n  const handsontableInstance = hotTableRef.value?.hotInstance;\n  // get the `Filters` plugin, so you can use its API\n  const filters = handsontableInstance?.getPlugin('filters');\n\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters?.addCondition(2, 'lt', [200]);\n  filters?.filter();\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterOnInitialization\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterOnInitialization.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data on initialization · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterOnInitialization\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterOnInitialization\");","/src/App.vue":"<script setup lang=\"ts\">\n// you need a template ref to call Handsontable's instance methods\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nonMounted(() => {\n  const handsontableInstance = hotTableRef.value?.hotInstance;\n  // get the `Filters` plugin, so you can use its API\n  const filters = handsontableInstance?.getPlugin('filters');\n\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters?.addCondition(2, 'lt', [200]);\n  filters?.filter();\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterOnInitialization\">\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterOnInitialization.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
index cee75f01e..d0abff2bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterThroughAPI1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst filterBelow200 = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // clear any existing filters\n  filters?.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters?.addCondition(2, 'lt', [200]);\n  filters?.filter();\n};\n\nconst filterAbove200 = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters?.addCondition(2, 'gt', [200]);\n  filters?.filter();\n};\n\nconst clearAllFilters = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // clear all filters\n  filters?.clearConditions();\n  filters?.filter();\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterThroughAPI1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"filterBelow200\">Show items &lt; $200</button>\n        <button @click=\"filterAbove200\">Show items &gt; $200</button>\n        <button @click=\"clearAllFilters\">Clear filters</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterThroughAPI1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterThroughAPI1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst filterBelow200 = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // clear any existing filters\n  filters?.clearConditions();\n  // filter data by the 'Price' column (column at index 2)\n  // to display only items that are less than ('lt') $200\n  filters?.addCondition(2, 'lt', [200]);\n  filters?.filter();\n};\n\nconst filterAbove200 = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  // display only items that are more than ('gt') $200\n  filters?.addCondition(2, 'gt', [200]);\n  filters?.filter();\n};\n\nconst clearAllFilters = () => {\n  // get the `Filters` plugin, so you can use its API\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // clear all filters\n  filters?.clearConditions();\n  filters?.filter();\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterThroughAPI1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"filterBelow200\">Show items &lt; $200</button>\n        <button @click=\"filterAbove200\">Show items &gt; $200</button>\n        <button @click=\"clearAllFilters\">Clear filters</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterValueOrder.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterValueOrder.vue.json
index f18cd82d4..8b87724ff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterValueOrder.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterValueOrder.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterValueOrder\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterValueOrder\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterValueOrder.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Change the order of values in the filter list · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleFilterValueOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterValueOrder\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// the order you want in the \"Filter by value\" list, most severe first\nconst priorityOrder = ['Critical', 'High', 'Medium', 'Low'];\nconst sizeOrder = ['XS', 'S', 'M', 'L', 'XL'];\n\n// turns an ordered list into a comparator; values the list does not know go last\nconst orderBy = (order: string[]) => (a: unknown, b: unknown): number => {\n  const rank = (value: unknown) =>\n    order.indexOf(value as string) === -1 ? order.length : order.indexOf(value as string);\n\n  return rank(a) - rank(b);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { task: 'Fix login timeout', priority: 'High', size: 'M' },\n    { task: 'Update privacy page', priority: 'Low', size: 'XS' },\n    { task: 'Database failover', priority: 'Critical', size: 'XL' },\n    { task: 'Refresh icons', priority: 'Medium', size: 'S' },\n    { task: 'Rotate API keys', priority: 'High', size: 'L' },\n    { task: 'Archive old reports', priority: '', size: 'S' },\n  ],\n  columns: [\n    { title: 'Task', data: 'task', type: 'text' },\n    {\n      title: 'Priority',\n      data: 'priority',\n      type: 'text',\n      // order this column's filter list by severity rather than alphabetically\n      filterValueComparator: orderBy(priorityOrder),\n    },\n    {\n      title: 'Size',\n      data: 'size',\n      type: 'text',\n      filterValueComparator: orderBy(sizeOrder),\n    },\n  ],\n  filters: true,\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleFilterValueOrder\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleFilterValueOrder.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterValueOrder","exampleTitle":"Change the order of values in the filter list","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
index df5dc76f5..bbc4c81f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleGetFilteredData\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst rowCountInfo = ref('');\n\nconst updateRowCountInfo = () => {\n  const hotInstance = hotTableRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  // `getData()` returns only the rows that pass the current filters\n  // `getSourceData()` always returns every row, filtered or not\n  rowCountInfo.value = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  afterInit: updateRowCountInfo,\n  afterFilter: updateRowCountInfo,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleGetFilteredData\">\n    <p>{{ rowCountInfo }}</p>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleGetFilteredData\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleGetFilteredData\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst rowCountInfo = ref('');\n\nconst updateRowCountInfo = () => {\n  const hotInstance = hotTableRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  // `getData()` returns only the rows that pass the current filters\n  // `getSourceData()` always returns every row, filtered or not\n  rowCountInfo.value = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  afterInit: updateRowCountInfo,\n  afterFilter: updateRowCountInfo,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleGetFilteredData\">\n    <p>{{ rowCountInfo }}</p>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
index 45ff0f4dd..f02f63ed2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · External quick filter · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleQuickFilter\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnOptions = [\n  { value: '0', label: 'Brand' },\n  { value: '1', label: 'Model' },\n  { value: '2', label: 'Price' },\n  { value: '3', label: 'Date' },\n  { value: '4', label: 'Time' },\n  { value: '5', label: 'In stock' },\n];\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst selectedColumn = ref('0');\nconst open = ref(false);\n\nconst selectedLabel = computed(\n  () => columnOptions.find((c) => c.value === selectedColumn.value)?.label || 'Brand'\n);\n\nconst handleClickOutside = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    open.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleClickOutside);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n});\n\nconst handleFilter = (event: KeyboardEvent) => {\n  const handsontableInstance = hotTableRef.value?.hotInstance;\n  const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n  filtersPlugin?.removeConditions(Number(selectedColumn.value));\n  filtersPlugin?.addCondition(Number(selectedColumn.value), 'contains', [\n    (event.target as HTMLInputElement).value,\n  ]);\n  filtersPlugin?.filter();\n  handsontableInstance?.render();\n};\n\nconst handleSelect = (col: { value: string; label: string }) => {\n  selectedColumn.value = col.value;\n  open.value = false;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  filters: true,\n  height: 'auto',\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleQuickFilter\">\n    <div class=\"example-controls-container\">\n      <div class=\"controlsQuickFilter\">\n        <div ref=\"dropdownRef\" class=\"filter-dropdown\">\n          <span class=\"filter-dropdown-label\">Select a column:</span>\n          <button\n            class=\"filter-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"open\"\n            @click=\"open = !open\"\n          >\n            <span class=\"filter-dropdown-text\">{{ selectedLabel }}</span>\n            <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"open\" class=\"filter-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"col in columnOptions\"\n              :key=\"col.value\"\n              role=\"option\"\n              :aria-selected=\"col.value === selectedColumn\"\n              @click=\"handleSelect(col)\"\n            >\n              {{ col.label }}\n            </li>\n          </ul>\n        </div>\n        <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" @keyup=\"handleFilter\" />\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleQuickFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · External quick filter · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleQuickFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleQuickFilter\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnOptions = [\n  { value: '0', label: 'Brand' },\n  { value: '1', label: 'Model' },\n  { value: '2', label: 'Price' },\n  { value: '3', label: 'Date' },\n  { value: '4', label: 'Time' },\n  { value: '5', label: 'In stock' },\n];\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst selectedColumn = ref('0');\nconst open = ref(false);\n\nconst selectedLabel = computed(\n  () => columnOptions.find((c) => c.value === selectedColumn.value)?.label || 'Brand'\n);\n\nconst handleClickOutside = (e: MouseEvent) => {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    open.value = false;\n  }\n};\n\nonMounted(() => {\n  document.addEventListener('click', handleClickOutside);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n});\n\nconst handleFilter = (event: KeyboardEvent) => {\n  const handsontableInstance = hotTableRef.value?.hotInstance;\n  const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n  filtersPlugin?.removeConditions(Number(selectedColumn.value));\n  filtersPlugin?.addCondition(Number(selectedColumn.value), 'contains', [\n    (event.target as HTMLInputElement).value,\n  ]);\n  filtersPlugin?.filter();\n  handsontableInstance?.render();\n};\n\nconst handleSelect = (col: { value: string; label: string }) => {\n  selectedColumn.value = col.value;\n  open.value = false;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  filters: true,\n  height: 'auto',\n  className: 'exampleQuickFilter',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleQuickFilter\">\n    <div class=\"example-controls-container\">\n      <div class=\"controlsQuickFilter\">\n        <div ref=\"dropdownRef\" class=\"filter-dropdown\">\n          <span class=\"filter-dropdown-label\">Select a column:</span>\n          <button\n            class=\"filter-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"open\"\n            @click=\"open = !open\"\n          >\n            <span class=\"filter-dropdown-text\">{{ selectedLabel }}</span>\n            <svg class=\"filter-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          <ul v-if=\"open\" class=\"filter-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"col in columnOptions\"\n              :key=\"col.value\"\n              role=\"option\"\n              :aria-selected=\"col.value === selectedColumn\"\n              @click=\"handleSelect(col)\"\n            >\n              {{ col.label }}\n            </li>\n          </ul>\n        </div>\n        <input id=\"filterField\" type=\"text\" placeholder=\"Filter\" @keyup=\"handleFilter\" />\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.controlsQuickFilter {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n}\n\n#filterField {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: none;\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.4rem 0.625rem;\n  outline: none;\n  width: 140px;\n}\n\n#filterField::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n  border-color: var(--sl-color-accent, #1A42E8);\n  box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-sm, 0.875rem);\n  white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.filter-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n</style>"},"docsPath":"guides/columns/column-filter/vue/exampleQuickFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
index d8b94f16b..5eea9735b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSaveRestoreFilters\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nlet savedConditions: ColumnConditions[] = [];\n\nconst applySampleFilter = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  // filter the 'Price' column (column at index 2) for items over $200\n  filters?.addCondition(2, 'gt', [200]);\n  filters?.filter();\n};\n\nconst saveFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // `exportConditions()` returns the current conditions, keyed by physical column index\n  savedConditions = filters?.exportConditions() ?? [];\n};\n\nconst clearFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  filters?.filter();\n};\n\nconst restoreFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // `importConditions()` expects the same physical-column-indexed structure\n  filters?.importConditions(savedConditions);\n  filters?.filter();\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSaveRestoreFilters\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"applySampleFilter\">Filter: price &gt; $200</button>\n        <button @click=\"saveFilters\">Save filter settings</button>\n        <button @click=\"clearFilters\">Clear filters</button>\n        <button @click=\"restoreFilters\">Restore filter settings</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSaveRestoreFilters\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSaveRestoreFilters\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\nlet savedConditions: ColumnConditions[] = [];\n\nconst applySampleFilter = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  // filter the 'Price' column (column at index 2) for items over $200\n  filters?.addCondition(2, 'gt', [200]);\n  filters?.filter();\n};\n\nconst saveFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // `exportConditions()` returns the current conditions, keyed by physical column index\n  savedConditions = filters?.exportConditions() ?? [];\n};\n\nconst clearFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  filters?.clearConditions();\n  filters?.filter();\n};\n\nconst restoreFilters = () => {\n  const filters = hotTableRef.value?.hotInstance?.getPlugin('filters');\n\n  // `importConditions()` expects the same physical-column-indexed structure\n  filters?.importConditions(savedConditions);\n  filters?.filter();\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSaveRestoreFilters\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"applySampleFilter\">Filter: price &gt; $200</button>\n        <button @click=\"saveFilters\">Save filter settings</button>\n        <button @click=\"clearFilters\">Clear filters</button>\n        <button @click=\"restoreFilters\">Restore filter settings</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
index 8c2950d80..f42d1d740 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSearchMode\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSearchMode\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleSearchMode.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSearchMode\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSearchMode\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering with option\n  filters: {\n    searchMode: 'apply',\n  },\n  dropdownMenu: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSearchMode\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleSearchMode.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
index 5d3c1ca9e..d273d933c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleServerSideFilter\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleServerSideFilter\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleServerSideFilter\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleServerSideFilter\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu\n  dropdownMenu: true,\n  height: 'auto',\n  // `beforeFilter()` is a Handsontable hook\n  // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n  beforeFilter(conditionsStack) {\n    // gather information about the filters\n    console.log(`The amount of filters: ${conditionsStack.length}`);\n\n    // when the filters are cleared, the conditions stack is empty\n    const [lastChanged] = conditionsStack;\n\n    if (lastChanged) {\n      console.log(`The last changed column index: ${lastChanged.column}`);\n      console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n      // the list of filter conditions\n      console.log(lastChanged.conditions);\n    }\n\n    // return `false` to disable filtering on the client side\n    return false;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleServerSideFilter\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
index 4c1fe91b1..92db01e4d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleShowFilterItemsOnly\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleShowFilterItemsOnly\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleShowFilterItemsOnly\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleShowFilterItemsOnly\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '01:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable filtering\n  filters: true,\n  // enable the column menu, but display only the filter menu items\n  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleShowFilterItemsOnly\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
index ae7dc2f4a..67ec7d781 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData= new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedColumnsStart: 1,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData= new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedColumnsStart: 1,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
index 4bc0380d9..10a13a2cf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column freezing · User-triggered freeze · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedColumnsStart: 2,\n    contextMenu: true,\n    manualColumnFreeze: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column freezing · User-triggered freeze · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedColumnsStart: 2,\n    contextMenu: true,\n    manualColumnFreeze: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
index ed77d5b26..8ebb2b411 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
index 63481b0d5..da3874baf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
index 2f367614f..8f53ace69 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column freezing · User-triggered freeze · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column freezing · User-triggered freeze · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
index 99a11872a..138b8fdb2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column freezing · User-triggered freeze · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column freezing · User-triggered freeze · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
index febe28fcf..8a15843c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedColumnsStart={1}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example1.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedColumnsStart={1}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example1.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json
index e56fcd0b4..b88fdb59f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column freezing · User-triggered freeze · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedColumnsStart={2}\n      contextMenu={true}\n      manualColumnFreeze={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example2.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column freezing · User-triggered freeze · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedColumnsStart={2}\n      contextMenu={true}\n      manualColumnFreeze={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example2.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json
index d78631ef5..f20f49c81 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-freezing/vue/example1.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 1,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-freezing/vue/example1.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
index d7019bf31..3aa55a7d6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column freezing · User-triggered freeze · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-freezing/vue/example2.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column freezing · User-triggered freeze · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedColumnsStart: 2,\n  contextMenu: true,\n  manualColumnFreeze: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-freezing/vue/example2.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
index ca9cd2f88..980d1b66a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
index 681411214..cfe4288d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 60,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    collapsibleColumns: [\n      { row: -4, col: 1, collapsible: true },\n      { row: -3, col: 1, collapsible: true },\n      { row: -2, col: 1, collapsible: true },\n      { row: -2, col: 3, collapsible: true },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 60,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    collapsibleColumns: [\n      { row: -4, col: 1, collapsible: true },\n      { row: -3, col: 1, collapsible: true },\n      { row: -2, col: 1, collapsible: true },\n      { row: -2, col: 3, collapsible: true },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
index a0fcf4417..360af3531 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 90,\n    height: 'auto',\n    nestedHeaders: [\n      ['Region', { label: 'Q1 2025', colspan: 4 }],\n      [\n        'Region',\n        { label: 'Jan', visibleWhen: 'expanded' },\n        { label: 'Feb', visibleWhen: 'expanded' },\n        { label: 'Mar', visibleWhen: 'expanded' },\n        { label: 'Total', visibleWhen: 'collapsed' },\n      ],\n    ],\n    collapsibleColumns: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 90,\n    height: 'auto',\n    nestedHeaders: [\n      ['Region', { label: 'Q1 2025', colspan: 4 }],\n      [\n        'Region',\n        { label: 'Jan', visibleWhen: 'expanded' },\n        { label: 'Feb', visibleWhen: 'expanded' },\n        { label: 'Mar', visibleWhen: 'expanded' },\n        { label: 'Total', visibleWhen: 'collapsed' },\n      ],\n    ],\n    collapsibleColumns: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
index 2930f7e11..3a3f9fd82 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n    rowHeaderWidth: 120,\n    height: 'auto',\n    manualColumnMove: true,\n    nestedHeaders: [\n      // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n      [\n        { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n        { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n      ],\n      ['January', 'February', 'March', 'April', 'May', 'June'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n    rowHeaderWidth: 120,\n    height: 'auto',\n    manualColumnMove: true,\n    nestedHeaders: [\n      // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n      [\n        { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n        { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n      ],\n      ['January', 'February', 'March', 'April', 'May', 'June'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
index 748b2af24..cfa3e8c92 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example1.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example1.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
index 1cefb2d5f..1dd1ebc4f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
index 35d89eb3d..e7e6ea209 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example2.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example2.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
index d4739fb6b..bba7ae9ac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
index 0987da3e1..58f69ee76 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['North America', 4200, 3800, 4500, 12500],\n        ['Europe', 3100, 2900, 3300, 9300],\n        ['Asia Pacific', 2600, 2400, 2800, 7800],\n        ['Latin America', 1500, 1700, 1600, 4800],\n        ['Middle East', 1200, 1300, 1450, 3950],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 90,\n    height: 'auto',\n    nestedHeaders: [\n        ['Region', { label: 'Q1 2025', colspan: 4 }],\n        [\n            'Region',\n            { label: 'Jan', visibleWhen: 'expanded' },\n            { label: 'Feb', visibleWhen: 'expanded' },\n            { label: 'Mar', visibleWhen: 'expanded' },\n            { label: 'Total', visibleWhen: 'collapsed' },\n        ],\n    ],\n    collapsibleColumns: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example3.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['North America', 4200, 3800, 4500, 12500],\n        ['Europe', 3100, 2900, 3300, 9300],\n        ['Asia Pacific', 2600, 2400, 2800, 7800],\n        ['Latin America', 1500, 1700, 1600, 4800],\n        ['Middle East', 1200, 1300, 1450, 3950],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    colWidths: 90,\n    height: 'auto',\n    nestedHeaders: [\n        ['Region', { label: 'Q1 2025', colspan: 4 }],\n        [\n            'Region',\n            { label: 'Jan', visibleWhen: 'expanded' },\n            { label: 'Feb', visibleWhen: 'expanded' },\n            { label: 'Mar', visibleWhen: 'expanded' },\n            { label: 'Total', visibleWhen: 'collapsed' },\n        ],\n    ],\n    collapsibleColumns: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example3.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
index 35b83ffc5..ffb360202 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 90,\n  height: 'auto',\n  nestedHeaders: [\n    ['Region', { label: 'Q1 2025', colspan: 4 }],\n    [\n      'Region',\n      { label: 'Jan', visibleWhen: 'expanded' },\n      { label: 'Feb', visibleWhen: 'expanded' },\n      { label: 'Mar', visibleWhen: 'expanded' },\n      { label: 'Total', visibleWhen: 'collapsed' },\n    ],\n  ],\n  collapsibleColumns: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 90,\n  height: 'auto',\n  nestedHeaders: [\n    ['Region', { label: 'Q1 2025', colspan: 4 }],\n    [\n      'Region',\n      { label: 'Jan', visibleWhen: 'expanded' },\n      { label: 'Feb', visibleWhen: 'expanded' },\n      { label: 'Mar', visibleWhen: 'expanded' },\n      { label: 'Total', visibleWhen: 'collapsed' },\n    ],\n  ],\n  collapsibleColumns: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
index a392a99af..34656d6ea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n        ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n        ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n        ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n        ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n    ],\n    colHeaders: true,\n    rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n    rowHeaderWidth: 120,\n    height: 'auto',\n    manualColumnMove: true,\n    nestedHeaders: [\n        // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n        [\n            { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n            { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n        ],\n        ['January', 'February', 'March', 'April', 'May', 'June'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n        ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n        ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n        ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n        ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n    ],\n    colHeaders: true,\n    rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n    rowHeaderWidth: 120,\n    height: 'auto',\n    manualColumnMove: true,\n    nestedHeaders: [\n        // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n        [\n            { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n            { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n        ],\n        ['January', 'February', 'March', 'April', 'May', 'June'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
index cdf31d07d..ed1d153de 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ],\n  colHeaders: true,\n  rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n  rowHeaderWidth: 120,\n  height: 'auto',\n  manualColumnMove: true,\n  nestedHeaders: [\n    // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n    [\n      { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n      { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n    ],\n    ['January', 'February', 'March', 'April', 'May', 'June'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ],\n  colHeaders: true,\n  rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n  rowHeaderWidth: 120,\n  height: 'auto',\n  manualColumnMove: true,\n  nestedHeaders: [\n    // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n    [\n      { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n      { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n    ],\n    ['January', 'February', 'March', 'April', 'May', 'June'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
index 7fa37ff07..c314f3ec4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column groups · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      nestedHeaders={[\n        ['A', { label: 'B', colspan: 8 }, 'C'],\n        ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n        [\n          'H',\n          { label: 'I', colspan: 2 },\n          { label: 'J', colspan: 2 },\n          { label: 'K', colspan: 2 },\n          { label: 'L', colspan: 2 },\n          'M',\n        ],\n        ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example1.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column groups · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      nestedHeaders={[\n        ['A', { label: 'B', colspan: 8 }, 'C'],\n        ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n        [\n          'H',\n          { label: 'I', colspan: 2 },\n          { label: 'J', colspan: 2 },\n          { label: 'K', colspan: 2 },\n          { label: 'L', colspan: 2 },\n          'M',\n        ],\n        ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example1.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json
index b031fa87f..2455c9e15 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column groups · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      colWidths={60}\n      height=\"auto\"\n      nestedHeaders={[\n        ['A', { label: 'B', colspan: 8 }, 'C'],\n        ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n        [\n          'H',\n          { label: 'I', colspan: 2 },\n          { label: 'J', colspan: 2 },\n          { label: 'K', colspan: 2 },\n          { label: 'L', colspan: 2 },\n          'M',\n        ],\n        ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n      ]}\n      collapsibleColumns={[\n        { row: -4, col: 1, collapsible: true },\n        { row: -3, col: 1, collapsible: true },\n        { row: -2, col: 1, collapsible: true },\n        { row: -2, col: 3, collapsible: true },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example2.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column groups · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      colWidths={60}\n      height=\"auto\"\n      nestedHeaders={[\n        ['A', { label: 'B', colspan: 8 }, 'C'],\n        ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n        [\n          'H',\n          { label: 'I', colspan: 2 },\n          { label: 'J', colspan: 2 },\n          { label: 'K', colspan: 2 },\n          { label: 'L', colspan: 2 },\n          'M',\n        ],\n        ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n      ]}\n      collapsibleColumns={[\n        { row: -4, col: 1, collapsible: true },\n        { row: -3, col: 1, collapsible: true },\n        { row: -2, col: 1, collapsible: true },\n        { row: -2, col: 3, collapsible: true },\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example2.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json
index c3cf62ba0..8c9c26048 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 4200, 3800, 4500, 12500],\n  ['Europe', 3100, 2900, 3300, 9300],\n  ['Asia Pacific', 2600, 2400, 2800, 7800],\n  ['Latin America', 1500, 1700, 1600, 4800],\n  ['Middle East', 1200, 1300, 1450, 3950],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      colWidths={90}\n      height=\"auto\"\n      nestedHeaders={[\n        ['Region', { label: 'Q1 2025', colspan: 4 }],\n        [\n          'Region',\n          { label: 'Jan', visibleWhen: 'expanded' },\n          { label: 'Feb', visibleWhen: 'expanded' },\n          { label: 'Mar', visibleWhen: 'expanded' },\n          { label: 'Total', visibleWhen: 'collapsed' },\n        ],\n      ]}\n      collapsibleColumns={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example3.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['North America', 4200, 3800, 4500, 12500],\n  ['Europe', 3100, 2900, 3300, 9300],\n  ['Asia Pacific', 2600, 2400, 2800, 7800],\n  ['Latin America', 1500, 1700, 1600, 4800],\n  ['Middle East', 1200, 1300, 1450, 3950],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      colWidths={90}\n      height=\"auto\"\n      nestedHeaders={[\n        ['Region', { label: 'Q1 2025', colspan: 4 }],\n        [\n          'Region',\n          { label: 'Jan', visibleWhen: 'expanded' },\n          { label: 'Feb', visibleWhen: 'expanded' },\n          { label: 'Mar', visibleWhen: 'expanded' },\n          { label: 'Total', visibleWhen: 'collapsed' },\n        ],\n      ]}\n      collapsibleColumns={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example3.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json
index 07976289a..5cc899815 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n  ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n  ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n  ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n  ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East']}\n      rowHeaderWidth={120}\n      height=\"auto\"\n      manualColumnMove={true}\n      nestedHeaders={[\n        // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n        [\n          { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n          { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n        ],\n        ['January', 'February', 'March', 'April', 'May', 'June'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example4.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n  ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n  ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n  ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n  ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East']}\n      rowHeaderWidth={120}\n      height=\"auto\"\n      manualColumnMove={true}\n      nestedHeaders={[\n        // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n        [\n          { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n          { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n        ],\n        ['January', 'February', 'March', 'April', 'May', 'June'],\n      ]}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example4.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json
index 381797df5..db0fa59ba 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example1.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example1.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
index 20017282a..238da23aa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example2.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 60,\n  height: 'auto',\n  nestedHeaders: [\n    ['A', { label: 'B', colspan: 8 }, 'C'],\n    ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n    [\n      'H',\n      { label: 'I', colspan: 2 },\n      { label: 'J', colspan: 2 },\n      { label: 'K', colspan: 2 },\n      { label: 'L', colspan: 2 },\n      'M',\n    ],\n    ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n  ],\n  collapsibleColumns: [\n    { row: -4, col: 1, collapsible: true },\n    { row: -3, col: 1, collapsible: true },\n    { row: -2, col: 1, collapsible: true },\n    { row: -2, col: 3, collapsible: true },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example2.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
index 74f4ed5a3..0cde1e6a3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 90,\n  height: 'auto',\n  nestedHeaders: [\n    ['Region', { label: 'Q1 2025', colspan: 4 }],\n    [\n      'Region',\n      { label: 'Jan', visibleWhen: 'expanded' },\n      { label: 'Feb', visibleWhen: 'expanded' },\n      { label: 'Mar', visibleWhen: 'expanded' },\n      { label: 'Total', visibleWhen: 'collapsed' },\n    ],\n  ],\n  collapsibleColumns: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example3.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['North America', 4200, 3800, 4500, 12500],\n    ['Europe', 3100, 2900, 3300, 9300],\n    ['Asia Pacific', 2600, 2400, 2800, 7800],\n    ['Latin America', 1500, 1700, 1600, 4800],\n    ['Middle East', 1200, 1300, 1450, 3950],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  colWidths: 90,\n  height: 'auto',\n  nestedHeaders: [\n    ['Region', { label: 'Q1 2025', colspan: 4 }],\n    [\n      'Region',\n      { label: 'Jan', visibleWhen: 'expanded' },\n      { label: 'Feb', visibleWhen: 'expanded' },\n      { label: 'Mar', visibleWhen: 'expanded' },\n      { label: 'Total', visibleWhen: 'collapsed' },\n    ],\n  ],\n  collapsibleColumns: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example3.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
index 4c44b5498..eb899f3ff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ],\n  colHeaders: true,\n  rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n  rowHeaderWidth: 120,\n  height: 'auto',\n  manualColumnMove: true,\n  nestedHeaders: [\n    // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n    [\n      { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n      { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n    ],\n    ['January', 'February', 'March', 'April', 'May', 'June'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n    ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n    ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n    ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n    ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n  ],\n  colHeaders: true,\n  rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n  rowHeaderWidth: 120,\n  height: 'auto',\n  manualColumnMove: true,\n  nestedHeaders: [\n    // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n    [\n      { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n      { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n    ],\n    ['January', 'February', 'March', 'April', 'May', 'June'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
index 4221ac6ce..6f173c983 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    nestedHeaders: [\n      ['A', { label: 'B', colspan: 8 }, 'C'],\n      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n      [\n        'H',\n        { label: 'I', colspan: 2 },\n        { label: 'J', colspan: 2 },\n        { label: 'K', colspan: 2 },\n        { label: 'L', colspan: 2 },\n        'M',\n      ],\n      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
index cfe8ae3ee..37f08ef50 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: [\n      'Name',\n      'Symbol',\n      'Atomic Number',\n      'Atomic Mass (u)',\n      'Known Isotopes',\n      'Melting Point (°F)',\n      'Boiling Point (°F)',\n    ],\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: [\n      'Name',\n      'Symbol',\n      'Atomic Number',\n      'Atomic Mass (u)',\n      'Known Isotopes',\n      'Melting Point (°F)',\n      'Boiling Point (°F)',\n    ],\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
index 7b9863837..30da8cb39 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    // Number each header with its column position, something a plain array can't do.\n    colHeaders: (index: number) => {\n      return `${index + 1}. ${this.columnHeaders[index]}`;\n    },\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    // Number each header with its column position, something a plain array can't do.\n    colHeaders: (index: number) => {\n      return `${index + 1}. ${this.columnHeaders[index]}`;\n    },\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json
index 2a6b4af92..766fc0271 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    stretchH: 'all',\n    headerClassName: 'htCenter',\n    columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    stretchH: 'all',\n    headerClassName: 'htCenter',\n    columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json
index fa0d3f720..e8bb094be 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .bold-text {\n        font-weight: bold;\n      }\n      .italic-text {\n          font-style: italic;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    stretchH: 'all',\n    headerClassName: 'htLeft',\n    columns: [\n      { headerClassName: 'italic-text' },\n      { headerClassName: 'bold-text italic-text' },\n      { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .bold-text {\n        font-weight: bold;\n      }\n      .italic-text {\n          font-style: italic;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n    rowHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    stretchH: 'all',\n    headerClassName: 'htLeft',\n    columns: [\n      { headerClassName: 'italic-text' },\n      { headerClassName: 'bold-text italic-text' },\n      { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json
index be219df49..6f9ca945f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels in the columns option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    // Set each column header label with the `title` option inside `columns`.\n    columns: [\n      { title: 'Name' },\n      { title: 'Symbol' },\n      { title: 'Atomic Number', type: 'numeric' },\n      { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { title: 'Known Isotopes', type: 'numeric' },\n      { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels in the columns option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    // Set each column header label with the `title` option inside `columns`.\n    columns: [\n      { title: 'Name' },\n      { title: 'Symbol' },\n      { title: 'Atomic Number', type: 'numeric' },\n      { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { title: 'Known Isotopes', type: 'numeric' },\n      { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json
index 73a524bab..bf9497932 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Column header height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    // Wide enough that no label gets cut off by the header's ellipsis truncation.\n    colWidths: [90, 90, 120, 130, 120, 155, 155],\n    columnHeaderHeight: 50,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Column header height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n    columns: [\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    ],\n    rowHeaders: true,\n    // Wide enough that no label gets cut off by the header's ellipsis truncation.\n    colWidths: [90, 90, 120, 130, 120, 155, 155],\n    columnHeaderHeight: 50,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-header/angular/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json
index decb3ec5c..cae304e28 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example1.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example1.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json
index 73ec99251..e4eca1933 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json
index 3209a7888..3fb66cd01 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example2.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example2.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json
index 3e2dc63fb..f2a044ada 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json
index 402985679..dc4710cab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst columnHeaders = [\n  'Name',\n  'Symbol',\n  'Atomic Number',\n  'Atomic Mass (u)',\n  'Known Isotopes',\n  'Melting Point (°F)',\n  'Boiling Point (°F)',\n];\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders(index) {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example3.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst columnHeaders = [\n  'Name',\n  'Symbol',\n  'Atomic Number',\n  'Atomic Mass (u)',\n  'Known Isotopes',\n  'Melting Point (°F)',\n  'Boiling Point (°F)',\n];\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders(index) {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example3.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json
index abd8ae49b..b23294159 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst columnHeaders = [\n  'Name',\n  'Symbol',\n  'Atomic Number',\n  'Atomic Mass (u)',\n  'Known Isotopes',\n  'Melting Point (°F)',\n  'Boiling Point (°F)',\n];\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders(index: number) {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst columnHeaders = [\n  'Name',\n  'Symbol',\n  'Atomic Number',\n  'Atomic Mass (u)',\n  'Known Isotopes',\n  'Melting Point (°F)',\n  'Boiling Point (°F)',\n];\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders(index: number) {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json
index c773cf70e..c1e439d22 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example4.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example4.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json
index ba0e2cd1f..e97a0d7ba 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, { type: 'numeric' }],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json
index 2792e8d3c..4338d2bf9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json
index b7551e46c..68fdcb48d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json
index 4a376ec7c..5e89f56b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels in the columns option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    {\n      title: 'Atomic Mass (u)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false },\n    },\n    { title: 'Known Isotopes', type: 'numeric' },\n    {\n      title: 'Melting Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n    {\n      title: 'Boiling Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example6.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels in the columns option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    {\n      title: 'Atomic Mass (u)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false },\n    },\n    { title: 'Known Isotopes', type: 'numeric' },\n    {\n      title: 'Melting Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n    {\n      title: 'Boiling Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example6.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json
index a060271b8..e4b9109f1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels in the columns option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    {\n      title: 'Atomic Mass (u)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false },\n    },\n    { title: 'Known Isotopes', type: 'numeric' },\n    {\n      title: 'Melting Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n    {\n      title: 'Boiling Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels in the columns option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    {\n      title: 'Atomic Mass (u)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false },\n    },\n    { title: 'Known Isotopes', type: 'numeric' },\n    {\n      title: 'Melting Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n    {\n      title: 'Boiling Point (°F)',\n      type: 'numeric',\n      numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false },\n    },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json
index d776c9ff1..1a6fe644c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column headers · Column header height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example7.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column headers · Column header height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example7.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json
index 87e7adb7f..964d0d3ae 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column headers · Column header height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column headers · Column header height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\nnew Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: [\n    'Name',\n    'Symbol',\n    'Atomic Number',\n    'Atomic Mass (u)',\n    'Known Isotopes',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n  ],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json
index a030b8870..848880a72 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example1.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example1.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json
index 7f1bdcd16..6ebff6bb0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)']}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example2.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)']}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example2.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json
index c97373e27..3e4b9c5a7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // Number each header with its column position, something a plain array can't do.\n      colHeaders={(index: number) => {\n        return `${index + 1}. ${columnHeaders[index]}`;\n      }}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example3.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // Number each header with its column position, something a plain array can't do.\n      colHeaders={(index: number) => {\n        return `${index + 1}. ${columnHeaders[index]}`;\n      }}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example3.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json
index f33ea871a..4cd127a2e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1],\n  ['Helium', 'He', 2],\n  ['Lithium', 'Li', 3],\n  ['Beryllium', 'Be', 4],\n  ['Boron', 'B', 5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number']}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      headerClassName=\"htCenter\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn headerClassName=\"htRight\" />\n      <HotColumn headerClassName=\"htLeft\" />\n      <HotColumn type=\"numeric\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example4.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1],\n  ['Helium', 'He', 2],\n  ['Lithium', 'Li', 3],\n  ['Beryllium', 'Be', 4],\n  ['Boron', 'B', 5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number']}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      headerClassName=\"htCenter\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn headerClassName=\"htRight\" />\n      <HotColumn headerClassName=\"htLeft\" />\n      <HotColumn type=\"numeric\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example4.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json
index c462736fc..ffaa6d1e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)']}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn headerClassName=\"italic-text\" />\n      <HotColumn headerClassName=\"bold-text italic-text\" />\n      <HotColumn headerClassName=\"htRight bold-text italic-text\" type=\"numeric\" />\n      <HotColumn type=\"numeric\" numericFormat={{ minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false }} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/react/example5.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)']}\n      rowHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn headerClassName=\"italic-text\" />\n      <HotColumn headerClassName=\"bold-text italic-text\" />\n      <HotColumn headerClassName=\"htRight bold-text italic-text\" type=\"numeric\" />\n      <HotColumn type=\"numeric\" numericFormat={{ minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false }} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".bold-text {\n    font-weight: bold;\n}\n\n.italic-text {\n    font-style: italic;\n}"},"docsPath":"guides/columns/column-header/react/example5.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json
index 36b44f34a..e0797f88f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Header labels in the columns option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // Set each column header label with the `title` option inside `columns`.\n      columns={[\n        { title: 'Name' },\n        { title: 'Symbol' },\n        { title: 'Atomic Number', type: 'numeric' },\n        { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { title: 'Known Isotopes', type: 'numeric' },\n        { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example6.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Header labels in the columns option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // Set each column header label with the `title` option inside `columns`.\n      columns={[\n        { title: 'Name' },\n        { title: 'Symbol' },\n        { title: 'Atomic Number', type: 'numeric' },\n        { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { title: 'Known Isotopes', type: 'numeric' },\n        { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example6.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json
index db12abc2b..9aced576c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column headers · Column header height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)']}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      // Wide enough that no label gets cut off by the header's ellipsis truncation.\n      colWidths={[90, 90, 120, 130, 120, 155, 155]}\n      columnHeaderHeight={50}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example7.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column headers · Column header height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n  ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n  ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n  ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n  ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)']}\n      columns={[\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      ]}\n      rowHeaders={true}\n      // Wide enough that no label gets cut off by the header's ellipsis truncation.\n      colWidths={[90, 90, 120, 130, 120, 155, 155]}\n      columnHeaderHeight={50}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example7.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json
index d4408a068..9b6e88e33 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example1.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: true,\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example1.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json
index 566836984..26208d780 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example2.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example2.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json
index 2f31d3332..60da8ebad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders: (index) => {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example3.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst columnHeaders = ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'];\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Number each header with its column position, something a plain array can't do.\n  colHeaders: (index) => {\n    return `${index + 1}. ${columnHeaders[index]}`;\n  },\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example3.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json
index cf6b05d04..962bec90f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [\n    { headerClassName: 'htRight' },\n    { headerClassName: 'htLeft' },\n    { type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example4.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1],\n    ['Helium', 'He', 2],\n    ['Lithium', 'Li', 3],\n    ['Beryllium', 'Be', 4],\n    ['Boron', 'B', 5],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htCenter',\n  columns: [\n    { headerClassName: 'htRight' },\n    { headerClassName: 'htLeft' },\n    { type: 'numeric' },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example4.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json
index 3a6507bd4..7b337ba44 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.bold-text {\n  font-weight: bold;\n}\n\n.italic-text {\n  font-style: italic;\n}\n</style>"},"docsPath":"guides/columns/column-header/vue/example5.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)'],\n  rowHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  stretchH: 'all',\n  headerClassName: 'htLeft',\n  columns: [\n    { headerClassName: 'italic-text' },\n    { headerClassName: 'bold-text italic-text' },\n    { headerClassName: 'htRight bold-text italic-text', type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.bold-text {\n  font-weight: bold;\n}\n\n.italic-text {\n  font-style: italic;\n}\n</style>"},"docsPath":"guides/columns/column-header/vue/example5.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json
index f05df1db2..f00405eda 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels in the columns option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { title: 'Known Isotopes', type: 'numeric' },\n    { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example6.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels in the columns option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  // Set each column header label with the `title` option inside `columns`.\n  columns: [\n    { title: 'Name' },\n    { title: 'Symbol' },\n    { title: 'Atomic Number', type: 'numeric' },\n    { title: 'Atomic Mass (u)', type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { title: 'Known Isotopes', type: 'numeric' },\n    { title: 'Melting Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { title: 'Boiling Point (°F)', type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example6.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json
index 8f27d05fc..4a58721fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column headers · Column header height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example7.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column headers · Column header height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7, -434.4, -423.2],\n    ['Helium', 'He', 2, 4.003, 9, -458.0, -452.1],\n    ['Lithium', 'Li', 3, 6.94, 9, 356.9, 2447.6],\n    ['Beryllium', 'Be', 4, 9.012, 11, 2348.6, 4478.8],\n    ['Boron', 'B', 5, 10.81, 15, 3768.8, 7100.6],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes', 'Melting Point (°F)', 'Boiling Point (°F)'],\n  columns: [\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 3, maximumFractionDigits: 3, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n  ],\n  rowHeaders: true,\n  // Wide enough that no label gets cut off by the header's ellipsis truncation.\n  colWidths: [90, 90, 120, 130, 120, 155, 155],\n  columnHeaderHeight: 50,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-header/vue/example7.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json
index da081c92c..ab4a50418 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n      columns: [2, 4, 6],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n      columns: [2, 4, 6],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json
index abe7c42aa..d3ec324c7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n      // specify columns hidden by default\n      columns: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n      // specify columns hidden by default\n      columns: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json
index 720713d1c..b49af5677 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      // show UI indicators to mark hidden columns\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      // show UI indicators to mark hidden columns\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json
index a45947b62..8ab911862 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    // automatically adds the context menu's column hiding items\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    // automatically adds the context menu's column hiding items\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json
index b7bfb6a5b..e918f981d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add column hiding context menu items\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add column hiding context menu items\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json
index dd7eb3fe7..ff98aa7f8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n      // exclude hidden columns from copying and pasting\n      copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n      columns: [3, 5, 9],\n      indicators: true,\n      // exclude hidden columns from copying and pasting\n      copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json
index e3127dea1..965dcbfed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n        columns: [2, 4, 6],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n        columns: [2, 4, 6],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json
index b08b9a836..8d9157959 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    columns: [2, 4, 6],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    columns: [2, 4, 6],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json
index b2d423346..ce6df30dd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n        // specify columns hidden by default\n        columns: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenColumns` plugin\n    hiddenColumns: {\n        // specify columns hidden by default\n        columns: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json
index 51d9a6613..fbed76bdd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    // specify columns hidden by default\n    columns: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    // specify columns hidden by default\n    columns: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json
index b3df284ae..c809358b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        // show UI indicators to mark hidden columns\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        // show UI indicators to mark hidden columns\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json
index 0c73414e3..7daa4137c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    // show UI indicators to mark hidden columns\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    // show UI indicators to mark hidden columns\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json
index 4b5fc8b76..b999abd1c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    // automatically adds the context menu's column hiding items\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenColumns` plugin\n    // automatically adds the context menu's column hiding items\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json
index 4e9570b42..a51421f93 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  // automatically adds the context menu's column hiding items\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  // automatically adds the context menu's column hiding items\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json
index 929a781a8..a11a053bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add column hiding context menu items\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add column hiding context menu items\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json
index eb5d1cf41..cd5b5fa4f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add column hiding context menu items\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add column hiding context menu items\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json
index 4a23a6b25..bcaf0a7f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n        // exclude hidden columns from copying and pasting\n        copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n    ],\n    height: 200,\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n    hiddenColumns: {\n        columns: [3, 5, 9],\n        indicators: true,\n        // exclude hidden columns from copying and pasting\n        copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json
index 97978b48e..c45588fa5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n    // exclude hidden columns from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n    // exclude hidden columns from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json
index ee3925a00..095bfb7ba 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={true}\n      // enable the `HiddenColumns` plugin\n      hiddenColumns={{\n        columns: [2, 4, 6],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example1.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={true}\n      // enable the `HiddenColumns` plugin\n      hiddenColumns={{\n        columns: [2, 4, 6],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example1.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json
index a7a2f3e9c..2639e3211 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      // enable the `HiddenColumns` plugin\n      hiddenColumns={{\n        // specify columns hidden by default\n        columns: [3, 5, 9],\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example2.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      // enable the `HiddenColumns` plugin\n      hiddenColumns={{\n        // specify columns hidden by default\n        columns: [3, 5, 9],\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example2.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example3.tsx.json
index a4d1b3fbf..d7e657563 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        // show UI indicators to mark hidden columns\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example3.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        // show UI indicators to mark hidden columns\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example3.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example4.tsx.json
index fd15e888e..b51f0364c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      // enable the context menu\n      contextMenu={true}\n      // enable the `HiddenColumns` plugin\n      // automatically adds the context menu's column hiding items\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example4.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      // enable the context menu\n      contextMenu={true}\n      // enable the `HiddenColumns` plugin\n      // automatically adds the context menu's column hiding items\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example4.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example5.tsx.json
index 178f4f21d..2d520a165 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_columns_show', 'hidden_columns_hide']}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example5.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_columns_show', 'hidden_columns_hide']}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example5.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example6.tsx.json
index 6cb8f5b1f..c7b7d461b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_columns_show', 'hidden_columns_hide']}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n        // exclude hidden columns from copying and pasting\n        copyPasteEnabled: false,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example6.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height={200}\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_columns_show', 'hidden_columns_hide']}\n      hiddenColumns={{\n        columns: [3, 5, 9],\n        indicators: true,\n        // exclude hidden columns from copying and pasting\n        copyPasteEnabled: false,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example6.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example1.vue.json
index e98adbc9b..0037b835e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    columns: [2, 4, 6],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example1.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    columns: [2, 4, 6],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example1.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example2.vue.json
index 1f91ae132..409b5c0d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    // specify columns hidden by default\n    columns: [3, 5, 9],\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example2.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenColumns` plugin\n  hiddenColumns: {\n    // specify columns hidden by default\n    columns: [3, 5, 9],\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example2.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example3.vue.json
index 84ee4db99..2ed06c497 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    // show UI indicators to mark hidden columns\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example3.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    // show UI indicators to mark hidden columns\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example3.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example4.vue.json
index 85e985107..46e65a9d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  // automatically adds the context menu's column hiding items\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example4.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenColumns` plugin\n  // automatically adds the context menu's column hiding items\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example4.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example5.vue.json
index 9b9c5db32..4b63f3964 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example5.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example5.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example6.vue.json
index d324de807..181606aa2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n    // exclude hidden columns from copying and pasting\n    copyPasteEnabled: false,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example6.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle', 142, 24.99, 40, 'In stock', '2026-03-12'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver', 0, 29.5, 25, 'Backorder', '2026-01-08'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland', 67, 349, 20, 'In stock', '2026-04-21'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin', 215, 12.99, 80, 'In stock', '2026-02-17'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis', 38, 89, 30, 'Low stock', '2026-05-03'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston', 190, 18.5, 50, 'In stock', '2026-03-29'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago', 54, 45, 20, 'In stock', '2026-06-11'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix', 88, 32, 24, 'In stock', '2026-04-02'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta', 12, 54.99, 15, 'Low stock', '2026-07-19'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas', 73, 79, 20, 'In stock', '2026-05-28'],\n  ],\n  height: 200,\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n  hiddenColumns: {\n    columns: [3, 5, 9],\n    indicators: true,\n    // exclude hidden columns from copying and pasting\n    copyPasteEnabled: false,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-hiding/vue/example6.vue","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example1.ts.json
index e1f865bbb..0896f0ab5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column moving · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(200) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(20) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example1.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column moving · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(200) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(20) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example1.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example2.ts.json
index 1975d638f..5acd7bd4b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column moving · Move column headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example2.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column moving · Move column headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example2.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example3.ts.json
index 9bbe4b549..9add37024 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column moving · Move column headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Supplier'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example3.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column moving · Move column headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Supplier'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example3.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example4.ts.json
index 7fa1b841d..9eb0cc88b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column moving · Control column moving · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-column-moving></example4-column-moving>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\n@Component({\n  selector: 'example4-column-moving',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" (change)=\"onAllowColumnMovingChange($event)\" />\n          Allow column moving\n        </label>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\n\nexport class AppComponent {\n  readonly data = data;\n  allowColumnMoving = false;\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    beforeColumnMove: () => this.allowColumnMoving,\n    stretchH: 'all',\n    height: 'auto',\n  };\n\n  onAllowColumnMovingChange(event: Event): void {\n    this.allowColumnMoving = (event.target as HTMLInputElement).checked;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column moving · Control column moving · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-column-moving></example4-column-moving>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\n@Component({\n  selector: 'example4-column-moving',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" (change)=\"onAllowColumnMovingChange($event)\" />\n          Allow column moving\n        </label>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\n\nexport class AppComponent {\n  readonly data = data;\n  allowColumnMoving = false;\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    beforeColumnMove: () => this.allowColumnMoving,\n    stretchH: 'all',\n    height: 'auto',\n  };\n\n  onAllowColumnMovingChange(event: Event): void {\n    this.allowColumnMoving = (event.target as HTMLInputElement).checked;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/columns/column-moving/angular/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.js.json
index c950fef3f..52174f3a9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column moving · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example1.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column moving · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example1.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.ts.json
index fc89ceadc..100e76dbc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column moving · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example1.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column moving · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example1.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.js.json
index bb95ff8b5..5d3105334 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column moving · Move column headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example2.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column moving · Move column headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example2.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.ts.json
index 719275204..c82a48717 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column moving · Move column headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example2.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column moving · Move column headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example2.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.js.json
index 1eabbf67a..b2b418971 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column moving · Move column headers (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ],\n    colHeaders: ['SKU', 'Product', 'Supplier'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example3.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column moving · Move column headers (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ],\n    colHeaders: ['SKU', 'Product', 'Supplier'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example3.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.ts.json
index 5fd698105..8e7021a67 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column moving · Move column headers (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example3.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column moving · Move column headers (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example3.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.js.json
index 1322eeb4f..63dbdd652 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column moving · Control column moving · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label>\n        <input id=\"allow-column-moving\" type=\"checkbox\" />\n        Allow column moving\n      </label>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n    ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n    ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n    ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n    ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n    ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4');\nconst allowColumnMovingInput = document.querySelector('#allow-column-moving');\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n    allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    beforeColumnMove: () => allowColumnMoving,\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example4.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column moving · Control column moving · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label>\n        <input id=\"allow-column-moving\" type=\"checkbox\" />\n        Allow column moving\n      </label>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n    ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n    ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n    ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n    ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n    ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4');\nconst allowColumnMovingInput = document.querySelector('#allow-column-moving');\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n    allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n    rowHeaders: true,\n    manualColumnMove: true,\n    beforeColumnMove: () => allowColumnMoving,\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example4.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.ts.json
index 0a14dba04..2ec4de383 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column moving · Control column moving · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label>\n        <input id=\"allow-column-moving\" type=\"checkbox\" />\n        Allow column moving\n      </label>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4')!;\nconst allowColumnMovingInput = document.querySelector<HTMLInputElement>('#allow-column-moving')!;\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n  allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  beforeColumnMove: () => allowColumnMoving,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column moving · Control column moving · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label>\n        <input id=\"allow-column-moving\" type=\"checkbox\" />\n        Allow column moving\n      </label>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4')!;\nconst allowColumnMovingInput = document.querySelector<HTMLInputElement>('#allow-column-moving')!;\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n  allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  beforeColumnMove: () => allowColumnMoving,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example1.tsx.json
index 73cd029de..57b4fcc5c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column moving · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      colWidths={100}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example1.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column moving · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      colWidths={100}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example1.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example2.tsx.json
index 4591747c0..49f5e71ad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column moving · Move column headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example2.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column moving · Move column headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example2.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example3.tsx.json
index 943b8a940..a56dd3b59 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column moving · Move column headers (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Product', 'Supplier']}\n      rowHeaders={true}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example3.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column moving · Move column headers (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Product', 'Supplier']}\n      rowHeaders={true}\n      manualColumnMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example3.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example4.tsx.json
index 8e1af63ac..faa482bb2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column moving · Control column moving · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst ExampleComponent = () => {\n  const allowColumnMoving = useRef(false);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    allowColumnMoving.current = event.target.checked;\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" onChange={handleChange} />\n            Allow column moving\n          </label>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        colHeaders={['SKU', 'Product', 'Supplier', 'Stock']}\n        rowHeaders={true}\n        manualColumnMove={true}\n        beforeColumnMove={() => allowColumnMoving.current}\n        stretchH=\"all\"\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example4.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column moving · Control column moving · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n  ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n  ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n  ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n  ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst ExampleComponent = () => {\n  const allowColumnMoving = useRef(false);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    allowColumnMoving.current = event.target.checked;\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input type=\"checkbox\" onChange={handleChange} />\n            Allow column moving\n          </label>\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        colHeaders={['SKU', 'Product', 'Supplier', 'Stock']}\n        rowHeaders={true}\n        manualColumnMove={true}\n        beforeColumnMove={() => allowColumnMoving.current}\n        stretchH=\"all\"\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example4.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example1.vue.json
index 029af20d0..ddbb68d6a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column moving · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example1.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column moving · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(200) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(20) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example1.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-moving","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example2.vue.json
index 1c45afd03..07d163e45 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column moving · Move column headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example2.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column moving · Move column headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example2.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example2","exampleTitle":"Move column headers","docPermalink":"/column-moving","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example3.vue.json
index fe62c08bd..b7276dcce 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column moving · Move column headers (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example3.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column moving · Move column headers (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example3.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example3","exampleTitle":"Move column headers (2)","docPermalink":"/column-moving","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example4.vue.json
index ecaf578a7..26a81c128 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-moving__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column moving · Control column moving · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst allowColumnMoving = ref(false);\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n    ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n    ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n    ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n    ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  beforeColumnMove: () => allowColumnMoving.value,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input v-model=\"allowColumnMoving\" type=\"checkbox\" />\n          Allow column moving\n        </label>\n      </div>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example4.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column moving · Control column moving · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst allowColumnMoving = ref(false);\n\nconst hotSettings: GridSettings = {\n  data: [\n    ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n    ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n    ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n    ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n    ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n  rowHeaders: true,\n  manualColumnMove: true,\n  beforeColumnMove: () => allowColumnMoving.value,\n  stretchH: 'all',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input v-model=\"allowColumnMoving\" type=\"checkbox\" />\n          Allow column moving\n        </label>\n      </div>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-moving/vue/example4.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example1.ts.json
index b54f88aa0..fc94fdd65 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null]\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    rowHeaders: true,\n    // enable and configure the `ColumnSummary` plugin\n    columnSummary: [\n      {\n        sourceColumn: 0,\n        type: 'sum',\n        destinationRow: 3,\n        destinationColumn: 0,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n      {\n        sourceColumn: 1,\n        type: 'min',\n        destinationRow: 3,\n        destinationColumn: 1,\n      },\n      {\n        sourceColumn: 2,\n        type: 'max',\n        destinationRow: 3,\n        destinationColumn: 2,\n      },\n      {\n        sourceColumn: 3,\n        type: 'count',\n        destinationRow: 3,\n        destinationColumn: 3,\n      },\n      {\n        sourceColumn: 4,\n        type: 'average',\n        destinationRow: 3,\n        destinationColumn: 4,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example1.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null]\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    rowHeaders: true,\n    // enable and configure the `ColumnSummary` plugin\n    columnSummary: [\n      {\n        sourceColumn: 0,\n        type: 'sum',\n        destinationRow: 3,\n        destinationColumn: 0,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n      {\n        sourceColumn: 1,\n        type: 'min',\n        destinationRow: 3,\n        destinationColumn: 1,\n      },\n      {\n        sourceColumn: 2,\n        type: 'max',\n        destinationRow: 3,\n        destinationColumn: 2,\n      },\n      {\n        sourceColumn: 3,\n        type: 'count',\n        destinationRow: 3,\n        destinationColumn: 3,\n      },\n      {\n        sourceColumn: 4,\n        type: 'average',\n        destinationRow: 3,\n        destinationColumn: 4,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example1.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example2.ts.json
index 1a71f16b8..e95251090 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        sourceColumn: 0,\n        type: 'sum',\n        // for this column summary, count row coordinates backward\n        reversedRowCoords: true,\n        // now, to always display this column summary in the bottom row,\n        // set `destinationRow` to `0` (i.e. the last possible row)\n        destinationRow: 0,\n        destinationColumn: 0,\n      },\n      {\n        sourceColumn: 1,\n        type: 'min',\n        // for this column summary, count row coordinates backward\n        reversedRowCoords: true,\n        // now, to always display this column summary in the bottom row,\n        // set `destinationRow` to `0` (i.e. the last possible row)\n        destinationRow: 0,\n        destinationColumn: 1,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example2.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        sourceColumn: 0,\n        type: 'sum',\n        // for this column summary, count row coordinates backward\n        reversedRowCoords: true,\n        // now, to always display this column summary in the bottom row,\n        // set `destinationRow` to `0` (i.e. the last possible row)\n        destinationRow: 0,\n        destinationColumn: 0,\n      },\n      {\n        sourceColumn: 1,\n        type: 'min',\n        // for this column summary, count row coordinates backward\n        reversedRowCoords: true,\n        // now, to always display this column summary in the bottom row,\n        // set `destinationRow` to `0` (i.e. the last possible row)\n        destinationRow: 0,\n        destinationColumn: 1,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example2.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example3.ts.json
index e0268c8e8..9ae1daa2a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    // set the `columnSummary` configuration option to a function\n    // @ts-ignore\n    columnSummary() {\n      const configArray = [];\n      const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n      for (let i = 0; i < (this as any).hot.countCols(); i++) {\n        // iterate over visible columns\n        // for each visible column, add a column summary with a configuration\n        configArray.push({\n          sourceColumn: i,\n          type: summaryTypes[i],\n          // count row coordinates backward\n          reversedRowCoords: true,\n          // display the column summary in the bottom row (because of the reversed row coordinates)\n          destinationRow: 0,\n          destinationColumn: i,\n          forceNumeric: true,\n        });\n      }\n\n      return configArray;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    // initialize a Handsontable instance with the generated data\n    this.hotData = this.generateData(5, 5, true);\n  }\n\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    // add an empty row at the bottom, to display column summaries\n    if (additionalRows) {\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example3.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example3","exampleTitle":"Set up column summaries, using a function (2)","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    // set the `columnSummary` configuration option to a function\n    // @ts-ignore\n    columnSummary() {\n      const configArray = [];\n      const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n      for (let i = 0; i < (this as any).hot.countCols(); i++) {\n        // iterate over visible columns\n        // for each visible column, add a column summary with a configuration\n        configArray.push({\n          sourceColumn: i,\n          type: summaryTypes[i],\n          // count row coordinates backward\n          reversedRowCoords: true,\n          // display the column summary in the bottom row (because of the reversed row coordinates)\n          destinationRow: 0,\n          destinationColumn: i,\n          forceNumeric: true,\n        });\n      }\n\n      return configArray;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    // initialize a Handsontable instance with the generated data\n    this.hotData = this.generateData(5, 5, true);\n  }\n\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    // add an empty row at the bottom, to display column summaries\n    if (additionalRows) {\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example3.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example3","exampleTitle":"Set up column summaries, using a function (2)","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example4.ts.json
index 789dbf568..ca38f910f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [{ data: 'value' }],\n    nestedRows: true,\n    rowHeaders: true,\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    columnSummary() {\n      const endpoints = [];\n      const nestedRowsPlugin = (this as any).hot.getPlugin('nestedRows');\n      const resultColumn = 0;\n\n      if (!nestedRowsPlugin.isEnabled()) {\n        return [];\n      }\n\n      for (let visualRow = 0; visualRow < (this as any).hot.countRows(); visualRow++) {\n        // Only summarize the top-level parents.\n        if (\n          nestedRowsPlugin.getRowLevel(visualRow) !== 0 ||\n          !nestedRowsPlugin.isParent(visualRow)\n        ) {\n          continue;\n        }\n\n        const parentRow = (this as any).hot.toPhysicalRow(visualRow);\n        const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n        // A parent's descendants sit in one block right after it in the source data, so the\n        // whole subtree is a single range. Count them recursively - the direct child count\n        // would stop short whenever a child has children of its own.\n        endpoints.push({\n          destinationColumn: resultColumn,\n          destinationRow: parentRow,\n          type: 'sum',\n          forceNumeric: true,\n          ranges: [[parentRow + 1, parentRow + descendantCount]],\n        });\n      }\n\n      return endpoints;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example4.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example4","exampleTitle":"Set up column summaries, using a function (4)","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [{ data: 'value' }],\n    nestedRows: true,\n    rowHeaders: true,\n    colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n    columnSummary() {\n      const endpoints = [];\n      const nestedRowsPlugin = (this as any).hot.getPlugin('nestedRows');\n      const resultColumn = 0;\n\n      if (!nestedRowsPlugin.isEnabled()) {\n        return [];\n      }\n\n      for (let visualRow = 0; visualRow < (this as any).hot.countRows(); visualRow++) {\n        // Only summarize the top-level parents.\n        if (\n          nestedRowsPlugin.getRowLevel(visualRow) !== 0 ||\n          !nestedRowsPlugin.isParent(visualRow)\n        ) {\n          continue;\n        }\n\n        const parentRow = (this as any).hot.toPhysicalRow(visualRow);\n        const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n        // A parent's descendants sit in one block right after it in the source data, so the\n        // whole subtree is a single range. Count them recursively - the direct child count\n        // would stop short whenever a child has children of its own.\n        endpoints.push({\n          destinationColumn: resultColumn,\n          destinationRow: parentRow,\n          type: 'sum',\n          forceNumeric: true,\n          ranges: [[parentRow + 1, parentRow + descendantCount]],\n        });\n      }\n\n      return endpoints;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example4.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example4","exampleTitle":"Set up column summaries, using a function (4)","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example5.ts.json
index ca39f3068..3bab3def1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Implement a custom summary function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `ColumnSummary` plugin\n    columnSummary: [\n      // configure a column summary\n      {\n        // set the `type` option to `'custom'`\n        type: 'custom',\n        destinationRow: 0,\n        destinationColumn: 5,\n        reversedRowCoords: true,\n        // add your custom summary function\n        customFunction(endpoint: any) {\n          // implement a function that counts the number of even values in the column\n          const hotInstance = this.hot;\n          let evenCount = 0;\n          // a helper function\n          const checkRange = (rowRange: any) => {\n            let i = rowRange[1] || rowRange[0];\n            let counter = 0;\n\n            do {\n              if (\n                parseInt(\n                  hotInstance.getDataAtCell(i, endpoint.sourceColumn),\n                  10\n                ) %\n                2 ===\n                0\n              ) {\n                counter++;\n              }\n\n              i--;\n            } while (i >= rowRange[0]);\n\n            return counter;\n          };\n\n          // go through all declared ranges\n          for (const r in endpoint.ranges) {\n            if (endpoint.ranges.hasOwnProperty(r)) {\n              evenCount += checkRange(endpoint.ranges[r]);\n            }\n          }\n\n          return evenCount;\n        },\n        forceNumeric: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    // initialize a Handsontable instance with the generated numeric data\n    this.hotData = this.generateData(5, 7);\n  }\n\n  // generate an array of arrays with dummy numeric data\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    if (additionalRows) {\n      array2d.push([]);\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example5.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example5","exampleTitle":"Implement a custom summary function (2)","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Implement a custom summary function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `ColumnSummary` plugin\n    columnSummary: [\n      // configure a column summary\n      {\n        // set the `type` option to `'custom'`\n        type: 'custom',\n        destinationRow: 0,\n        destinationColumn: 5,\n        reversedRowCoords: true,\n        // add your custom summary function\n        customFunction(endpoint: any) {\n          // implement a function that counts the number of even values in the column\n          const hotInstance = this.hot;\n          let evenCount = 0;\n          // a helper function\n          const checkRange = (rowRange: any) => {\n            let i = rowRange[1] || rowRange[0];\n            let counter = 0;\n\n            do {\n              if (\n                parseInt(\n                  hotInstance.getDataAtCell(i, endpoint.sourceColumn),\n                  10\n                ) %\n                2 ===\n                0\n              ) {\n                counter++;\n              }\n\n              i--;\n            } while (i >= rowRange[0]);\n\n            return counter;\n          };\n\n          // go through all declared ranges\n          for (const r in endpoint.ranges) {\n            if (endpoint.ranges.hasOwnProperty(r)) {\n              evenCount += checkRange(endpoint.ranges[r]);\n            }\n          }\n\n          return evenCount;\n        },\n        forceNumeric: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    // initialize a Handsontable instance with the generated numeric data\n    this.hotData = this.generateData(5, 7);\n  }\n\n  // generate an array of arrays with dummy numeric data\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    if (additionalRows) {\n      array2d.push([]);\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example5.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example5","exampleTitle":"Implement a custom summary function (2)","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example6.ts.json
index b5ff67d31..7ad0ceff0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Round a column summary result (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'average',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n      },\n      {\n        type: 'average',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        // round this column summary result to two digits after the decimal point\n        roundFloat: 2,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example6.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example6","exampleTitle":"Round a column summary result (2)","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Round a column summary result (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'average',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n      },\n      {\n        type: 'average',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        // round this column summary result to two digits after the decimal point\n        roundFloat: 2,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example6.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example6","exampleTitle":"Round a column summary result (2)","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example7.ts.json
index 220973ec7..9f6e655f0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example7.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        // force this column summary to treat non-numeric values as numeric values\n        forceNumeric: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example7.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example8.ts.json
index 8c996c1bb..69b5e1c43 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example8',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"throwErrors()\">\n          Throw data type errors\n        </button>\n      </div>\n    </div>\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n\n  throwErrors(): void {\n    this.hotTable?.hotInstance?.updateSettings({\n      columnSummary: [\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n      ],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example8',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"throwErrors()\">\n          Throw data type errors\n        </button>\n      </div>\n    </div>\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n      },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n  };\n\n  throwErrors(): void {\n    this.hotTable?.hotInstance?.updateSettings({\n      columnSummary: [\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n      ],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-summary/angular/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.js.json
index 887bee6fb..e20c74e40 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 12.345], [11, 12, 13, null, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  // enable and configure the `ColumnSummary` plugin\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      roundFloat: 'auto',\n      destinationRow: 3,\n      destinationColumn: 4,\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example1.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 12.345], [11, 12, 13, null, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  // enable and configure the `ColumnSummary` plugin\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      roundFloat: 'auto',\n      destinationRow: 3,\n      destinationColumn: 4,\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example1.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.ts.json
index b7e13d837..d5f96395a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 12.345], [11, 12, 13, null, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  // enable and configure the `ColumnSummary` plugin\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      roundFloat: 'auto',\n      destinationRow: 3,\n      destinationColumn: 4,\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example1.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 12.345], [11, 12, 13, null, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  // enable and configure the `ColumnSummary` plugin\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      roundFloat: 'auto',\n      destinationRow: 3,\n      destinationColumn: 4,\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example1.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.js.json
index 9f2ca110c..c3ccfbf79 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Force numeric values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example10.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Force numeric values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example10.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.ts.json
index 3b216978d..3dc6d2388 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example10.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Force numeric values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example10.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Force numeric values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example10.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.js.json
index 16147548c..966fe48d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Throw data type errors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"throwErrorsButton\" class=\"button button--primary\">Throw data type errors</button>\n    </div>\n  </div>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst throwErrorsButton = document.querySelector('#throwErrorsButton');\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n  hot.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example11.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Throw data type errors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"throwErrorsButton\" class=\"button button--primary\">Throw data type errors</button>\n    </div>\n  </div>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst throwErrorsButton = document.querySelector('#throwErrorsButton');\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n  hot.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example11.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.ts.json
index 5220dacdc..81979c35a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example11.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Throw data type errors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"throwErrorsButton\" class=\"button button--primary\">Throw data type errors</button>\n    </div>\n  </div>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst throwErrorsButton = document.querySelector('#throwErrorsButton')!;\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n  hot.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example11.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Throw data type errors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"throwErrorsButton\" class=\"button button--primary\">Throw data type errors</button>\n    </div>\n  </div>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst throwErrorsButton = document.querySelector('#throwErrorsButton')!;\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n  hot.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example11.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.js.json
index 6aba99322..414ef0b65 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Round a column summary result · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example12');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example12.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Round a column summary result · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example12');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example12.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.ts.json
index b13581cca..613736eaa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example12.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Round a column summary result · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example12')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example12.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Round a column summary result · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example12')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example12.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.js.json
index 7715043b2..45925fe4f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example2.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example2.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.ts.json
index 3dc9367fc..69dc62e25 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example2.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example2.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.js.json
index 76a91bf4e..519425d71 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated data\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  // set the `columnSummary` configuration option to a function\n  columnSummary() {\n    const configArray = [];\n    const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i],\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example7.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated data\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  // set the `columnSummary` configuration option to a function\n  columnSummary() {\n    const configArray = [];\n    const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i],\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example7.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.ts.json
index 90522f052..a8eec112b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated data\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  // set the `columnSummary` configuration option to a function\n  columnSummary() {\n    const configArray: DetailedSettings[] = [];\n    const summaryTypes: ('sum' | 'min' | 'max' | 'count' | 'average')[] = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i]!,\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example7.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated data\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  // set the `columnSummary` configuration option to a function\n  columnSummary() {\n    const configArray: DetailedSettings[] = [];\n    const summaryTypes: ('sum' | 'min' | 'max' | 'count' | 'average')[] = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i]!,\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example7.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.js.json
index 1d34d09f8..770ca6db7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example8');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary() {\n    const endpoints = [];\n    const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example8.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example8');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary() {\n    const endpoints = [];\n    const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example8.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.ts.json
index 6a31e0fc6..08c1c8f45 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example8.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { NestedRows } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary() {\n    const endpoints: DetailedSettings[] = [];\n    const nestedRowsPlugin: NestedRows = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { NestedRows } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary() {\n    const endpoints: DetailedSettings[] = [];\n    const nestedRowsPlugin: NestedRows = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.js.json
index 1638053f1..7ef3de7ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column summary · Implement a custom summary function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example9');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated numeric data\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `ColumnSummary` plugin\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n        // a helper function\n        const checkRange = (rowRange) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example9.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column summary · Implement a custom summary function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example9');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated numeric data\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `ColumnSummary` plugin\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n        // a helper function\n        const checkRange = (rowRange) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example9.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.ts.json
index db11d567e..4686c2691 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__javascript__example9.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column summary · Implement a custom summary function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated numeric data\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `ColumnSummary` plugin\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n\n        // a helper function\n        const checkRange = (rowRange: number[]) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example9.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column summary · Implement a custom summary function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  // initialize a Handsontable instance with the generated numeric data\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `ColumnSummary` plugin\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n\n        // a helper function\n        const checkRange = (rowRange: number[]) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example9.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example1.tsx.json
index 5053eae48..9051fe342 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [null]];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          sourceColumn: 0,\n          type: 'sum',\n          destinationRow: 3,\n          destinationColumn: 0,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n        {\n          sourceColumn: 1,\n          type: 'min',\n          destinationRow: 3,\n          destinationColumn: 1,\n        },\n        {\n          sourceColumn: 2,\n          type: 'max',\n          destinationRow: 3,\n          destinationColumn: 2,\n        },\n        {\n          sourceColumn: 3,\n          type: 'count',\n          destinationRow: 3,\n          destinationColumn: 3,\n        },\n        {\n          sourceColumn: 4,\n          type: 'average',\n          destinationRow: 3,\n          destinationColumn: 4,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example1.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [null]];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          sourceColumn: 0,\n          type: 'sum',\n          destinationRow: 3,\n          destinationColumn: 0,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n        {\n          sourceColumn: 1,\n          type: 'min',\n          destinationRow: 3,\n          destinationColumn: 1,\n        },\n        {\n          sourceColumn: 2,\n          type: 'max',\n          destinationRow: 3,\n          destinationColumn: 2,\n        },\n        {\n          sourceColumn: 3,\n          type: 'count',\n          destinationRow: 3,\n          destinationColumn: 3,\n        },\n        {\n          sourceColumn: 4,\n          type: 'average',\n          destinationRow: 3,\n          destinationColumn: 4,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example1.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example10.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example10.tsx.json
index 593f038ba..4b18a5fde 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example10.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example10.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Force numeric values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example10.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Force numeric values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          // force this column summary to treat non-numeric values as numeric values\n          forceNumeric: true,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example10.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example11.tsx.json
index df549d4fb..bd244a25a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example11.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example11.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Throw data type errors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const throwErrors = () => {\n    hotRef.current?.hotInstance?.updateSettings({\n      columnSummary: [\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n      ],\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={throwErrors}>\n            Throw data type errors\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        columnSummary={[\n          {\n            type: 'sum',\n            destinationRow: 0,\n            destinationColumn: 0,\n            reversedRowCoords: true,\n          },\n          {\n            type: 'sum',\n            destinationRow: 0,\n            destinationColumn: 1,\n            reversedRowCoords: true,\n          },\n        ]}\n        height=\"auto\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example11.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Throw data type errors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const throwErrors = () => {\n    hotRef.current?.hotInstance?.updateSettings({\n      columnSummary: [\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n        {\n          type: 'sum',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          suppressDataTypeErrors: false,\n        },\n      ],\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={throwErrors}>\n            Throw data type errors\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        columnSummary={[\n          {\n            type: 'sum',\n            destinationRow: 0,\n            destinationColumn: 0,\n            reversedRowCoords: true,\n          },\n          {\n            type: 'sum',\n            destinationRow: 0,\n            destinationColumn: 1,\n            reversedRowCoords: true,\n          },\n        ]}\n        height=\"auto\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example11.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example12.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example12.tsx.json
index 4cc2a0814..a0f049044 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example12.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example12.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Round a column summary result · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example12\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          type: 'average',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n        },\n        {\n          type: 'average',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          // round this column summary result to two digits after the decimal point\n          roundFloat: 2,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example12.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Round a column summary result · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example12\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          type: 'average',\n          destinationRow: 0,\n          destinationColumn: 0,\n          reversedRowCoords: true,\n        },\n        {\n          type: 'average',\n          destinationRow: 0,\n          destinationColumn: 1,\n          reversedRowCoords: true,\n          // round this column summary result to two digits after the decimal point\n          roundFloat: 2,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example12.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example2.tsx.json
index c18d287bc..30663c7f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [1, 2, 3, 4, 5],\n  [6, 7, 8, 9, 10],\n  [11, 12, 13, 14, 15],\n  // add an empty row\n  [null],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          sourceColumn: 0,\n          type: 'sum',\n          // for this column summary, count row coordinates backward\n          reversedRowCoords: true,\n          // now, to always display this column summary in the bottom row,\n          // set `destinationRow` to `0` (i.e. the last possible row)\n          destinationRow: 0,\n          destinationColumn: 0,\n        },\n        {\n          sourceColumn: 1,\n          type: 'min',\n          // for this column summary, count row coordinates backward\n          reversedRowCoords: true,\n          // now, to always display this column summary in the bottom row,\n          // set `destinationRow` to `0` (i.e. the last possible row)\n          destinationRow: 0,\n          destinationColumn: 1,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example2.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [1, 2, 3, 4, 5],\n  [6, 7, 8, 9, 10],\n  [11, 12, 13, 14, 15],\n  // add an empty row\n  [null],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        {\n          sourceColumn: 0,\n          type: 'sum',\n          // for this column summary, count row coordinates backward\n          reversedRowCoords: true,\n          // now, to always display this column summary in the bottom row,\n          // set `destinationRow` to `0` (i.e. the last possible row)\n          destinationRow: 0,\n          destinationColumn: 0,\n        },\n        {\n          sourceColumn: 1,\n          type: 'min',\n          // for this column summary, count row coordinates backward\n          reversedRowCoords: true,\n          // now, to always display this column summary in the bottom row,\n          // set `destinationRow` to `0` (i.e. the last possible row)\n          destinationRow: 0,\n          destinationColumn: 1,\n        },\n      ]}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example2.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example7.tsx.json
index 0b2e959cb..8a2a357ec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData(5, 5, true);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      columnSummary={function () {\n        const configArray = [];\n        const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n        for (let i = 0; i < this.hot.countCols(); i++) {\n          // iterate over visible columns\n          // for each visible column, add a column summary with a configuration\n          configArray.push({\n            sourceColumn: i,\n            type: summaryTypes[i],\n            // count row coordinates backward\n            reversedRowCoords: true,\n            // display the column summary in the bottom row (because of the reversed row coordinates)\n            destinationRow: 0,\n            destinationColumn: i,\n            forceNumeric: true,\n          });\n        }\n\n        return configArray as DetailedSettings[];\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example7.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData(5, 5, true);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      columnSummary={function () {\n        const configArray = [];\n        const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n        for (let i = 0; i < this.hot.countCols(); i++) {\n          // iterate over visible columns\n          // for each visible column, add a column summary with a configuration\n          configArray.push({\n            sourceColumn: i,\n            type: summaryTypes[i],\n            // count row coordinates backward\n            reversedRowCoords: true,\n            // display the column summary in the bottom row (because of the reversed row coordinates)\n            destinationRow: 0,\n            destinationColumn: i,\n            forceNumeric: true,\n          });\n        }\n\n        return configArray as DetailedSettings[];\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example7.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example8.tsx.json
index 9dd7eb29c..9b3ecdd82 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example8.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example8.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    value: null,\n    __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n  },\n  {\n    __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[{ data: 'value' }]}\n      nestedRows={true}\n      rowHeaders={true}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      columnSummary={function () {\n        const endpoints = [];\n        const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n        const resultColumn = 0;\n\n        if (!nestedRowsPlugin.isEnabled()) {\n          return [];\n        }\n\n        for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n          // Only summarize the top-level parents.\n          if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n            continue;\n          }\n\n          const parentRow = this.hot.toPhysicalRow(visualRow);\n          const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n          // A parent's descendants sit in one block right after it in the source data, so the\n          // whole subtree is a single range. Count them recursively - the direct child count\n          // would stop short whenever a child has children of its own.\n          endpoints.push({\n            destinationColumn: resultColumn,\n            destinationRow: parentRow,\n            type: 'sum',\n            forceNumeric: true,\n            ranges: [[parentRow + 1, parentRow + descendantCount]],\n          });\n        }\n\n        return endpoints;\n      }}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example8.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    value: null,\n    __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n  },\n  {\n    __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      columns={[{ data: 'value' }]}\n      nestedRows={true}\n      rowHeaders={true}\n      colHeaders={['sum', 'min', 'max', 'count', 'average']}\n      columnSummary={function () {\n        const endpoints = [];\n        const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n        const resultColumn = 0;\n\n        if (!nestedRowsPlugin.isEnabled()) {\n          return [];\n        }\n\n        for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n          // Only summarize the top-level parents.\n          if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n            continue;\n          }\n\n          const parentRow = this.hot.toPhysicalRow(visualRow);\n          const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n          // A parent's descendants sit in one block right after it in the source data, so the\n          // whole subtree is a single range. Count them recursively - the direct child count\n          // would stop short whenever a child has children of its own.\n          endpoints.push({\n            destinationColumn: resultColumn,\n            destinationRow: parentRow,\n            type: 'sum',\n            forceNumeric: true,\n            ranges: [[parentRow + 1, parentRow + descendantCount]],\n          });\n        }\n\n        return endpoints;\n      }}\n      height=\"auto\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example8.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example9.tsx.json
index a459847f6..ae3a3d9f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example9.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__react__example9.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column summary · Implement a custom summary function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData(5, 7);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        // configure a column summary\n        {\n          // set the `type` option to `'custom'`\n          type: 'custom',\n          destinationRow: 0,\n          destinationColumn: 5,\n          reversedRowCoords: true,\n          // add your custom summary function\n          customFunction(endpoint) {\n            // implement a function that counts the number of even values in the column\n            const hotInstance = this.hot;\n            let evenCount = 0;\n\n            // a helper function\n            const checkRange = (rowRange: number[]) => {\n              let i = rowRange[1] || rowRange[0];\n              let counter = 0;\n\n              do {\n                if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n                  counter++;\n                }\n\n                i--;\n              } while (i >= rowRange[0]);\n\n              return counter;\n            };\n\n            // go through all declared ranges\n            for (const r in endpoint.ranges) {\n              if (endpoint.ranges.hasOwnProperty(r)) {\n                evenCount += checkRange(endpoint.ranges[r]);\n              }\n            }\n\n            return evenCount;\n          },\n          forceNumeric: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example9.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column summary · Implement a custom summary function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData(5, 7);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      columnSummary={[\n        // configure a column summary\n        {\n          // set the `type` option to `'custom'`\n          type: 'custom',\n          destinationRow: 0,\n          destinationColumn: 5,\n          reversedRowCoords: true,\n          // add your custom summary function\n          customFunction(endpoint) {\n            // implement a function that counts the number of even values in the column\n            const hotInstance = this.hot;\n            let evenCount = 0;\n\n            // a helper function\n            const checkRange = (rowRange: number[]) => {\n              let i = rowRange[1] || rowRange[0];\n              let counter = 0;\n\n              do {\n                if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n                  counter++;\n                }\n\n                i--;\n              } while (i >= rowRange[0]);\n\n              return counter;\n            };\n\n            // go through all declared ranges\n            for (const r in endpoint.ranges) {\n              if (endpoint.ranges.hasOwnProperty(r)) {\n                evenCount += checkRange(endpoint.ranges[r]);\n              }\n            }\n\n            return evenCount;\n          },\n          forceNumeric: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example9.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example1.vue.json
index d79085644..859dd4386 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      destinationRow: 3,\n      destinationColumn: 4,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example1.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [null]],\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      destinationRow: 3,\n      destinationColumn: 0,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      destinationRow: 3,\n      destinationColumn: 1,\n    },\n    {\n      sourceColumn: 2,\n      type: 'max',\n      destinationRow: 3,\n      destinationColumn: 2,\n    },\n    {\n      sourceColumn: 3,\n      type: 'count',\n      destinationRow: 3,\n      destinationColumn: 3,\n    },\n    {\n      sourceColumn: 4,\n      type: 'average',\n      destinationRow: 3,\n      destinationColumn: 4,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example1.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example10.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example10.vue.json
index a45fd85ae..199b3c549 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example10.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example10.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Force numeric values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example10.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Force numeric values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // force this column summary to treat non-numeric values as numeric values\n      forceNumeric: true,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example10.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example10","exampleTitle":"Force numeric values","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example11.vue.json
index 9ed4dfafa..c51a2eeff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example11.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example11.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Throw data type errors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  height: 'auto',\n});\n\nfunction throwErrors() {\n  hotRef.value?.hotInstance?.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n}\n</script>\n\n<template>\n  <div id=\"example11\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"throwErrors\">\n          Throw data type errors\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example11.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Throw data type errors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'sum',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n    },\n  ],\n  height: 'auto',\n});\n\nfunction throwErrors() {\n  hotRef.value?.hotInstance?.updateSettings({\n    columnSummary: [\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 0,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n      {\n        type: 'sum',\n        destinationRow: 0,\n        destinationColumn: 1,\n        reversedRowCoords: true,\n        suppressDataTypeErrors: false,\n      },\n    ],\n  });\n}\n</script>\n\n<template>\n  <div id=\"example11\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"throwErrors\">\n          Throw data type errors\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example11.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example12.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example12.vue.json
index 659725abe..673841556 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example12.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example12.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Round a column summary result · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example12\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example12\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example12.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Round a column summary result · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example12\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example12\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 0,\n      reversedRowCoords: true,\n    },\n    {\n      type: 'average',\n      destinationRow: 0,\n      destinationColumn: 1,\n      reversedRowCoords: true,\n      // round this column summary result to two digits after the decimal point\n      roundFloat: 2,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example12\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example12.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example12","exampleTitle":"Round a column summary result","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example2.vue.json
index bd3e97747..3a570ae84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example2.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Step 5: Make room for the destination cell · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    [1, 2, 3, 4, 5],\n    [6, 7, 8, 9, 10],\n    [11, 12, 13, 14, 15],\n    // add an empty row\n    [null],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    {\n      sourceColumn: 0,\n      type: 'sum',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 0,\n    },\n    {\n      sourceColumn: 1,\n      type: 'min',\n      // for this column summary, count row coordinates backward\n      reversedRowCoords: true,\n      // now, to always display this column summary in the bottom row,\n      // set `destinationRow` to `0` (i.e. the last possible row)\n      destinationRow: 0,\n      destinationColumn: 1,\n    },\n  ],\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example2.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example2","exampleTitle":"Step 5: Make room for the destination cell","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example7.vue.json
index eee1002f3..61378c2d1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary: function () {\n    const configArray = [];\n    const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i],\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray as DetailedSettings[];\n  },\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example7.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Set up column summaries, using a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/columnSummary';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  // add an empty row at the bottom, to display column summaries\n  if (additionalRows) {\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateData(5, 5, true),\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary: function () {\n    const configArray = [];\n    const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];\n\n    for (let i = 0; i < this.hot.countCols(); i++) {\n      // iterate over visible columns\n      // for each visible column, add a column summary with a configuration\n      configArray.push({\n        sourceColumn: i,\n        type: summaryTypes[i],\n        // count row coordinates backward\n        reversedRowCoords: true,\n        // display the column summary in the bottom row (because of the reversed row coordinates)\n        destinationRow: 0,\n        destinationColumn: i,\n        forceNumeric: true,\n      });\n    }\n\n    return configArray as DetailedSettings[];\n  },\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example7.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example7","exampleTitle":"Set up column summaries, using a function","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example8.vue.json
index 4c95da28f..571269b6f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example8.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example8.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\ntype RowObject = {\n  value?: number | null;\n  __children?: RowObject[];\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ] as RowObject[],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary: function () {\n    const endpoints = [];\n    const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example8\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example8.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\ntype RowObject = {\n  value?: number | null;\n  __children?: RowObject[];\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    {\n      value: null,\n      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],\n    },\n    {\n      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],\n    },\n  ] as RowObject[],\n  columns: [{ data: 'value' }],\n  nestedRows: true,\n  rowHeaders: true,\n  colHeaders: ['sum', 'min', 'max', 'count', 'average'],\n  columnSummary: function () {\n    const endpoints = [];\n    const nestedRowsPlugin = this.hot.getPlugin('nestedRows');\n    const resultColumn = 0;\n\n    if (!nestedRowsPlugin.isEnabled()) {\n      return [];\n    }\n\n    for (let visualRow = 0; visualRow < this.hot.countRows(); visualRow++) {\n      // Only summarize the top-level parents.\n      if (nestedRowsPlugin.getRowLevel(visualRow) !== 0 || !nestedRowsPlugin.isParent(visualRow)) {\n        continue;\n      }\n\n      const parentRow = this.hot.toPhysicalRow(visualRow);\n      const descendantCount = nestedRowsPlugin.countChildren(visualRow, true);\n\n      // A parent's descendants sit in one block right after it in the source data, so the\n      // whole subtree is a single range. Count them recursively - the direct child count\n      // would stop short whenever a child has children of its own.\n      endpoints.push({\n        destinationColumn: resultColumn,\n        destinationRow: parentRow,\n        type: 'sum',\n        forceNumeric: true,\n        ranges: [[parentRow + 1, parentRow + descendantCount]],\n      });\n    }\n\n    return endpoints;\n  },\n  height: 'auto',\n});\n</script>\n\n<template>\n  <div id=\"example8\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example8.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example9.vue.json
index 75ce90054..84032574e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example9.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-summary__vue__example9.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column summary · Implement a custom summary function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n\n        // a helper function\n        const checkRange = (rowRange: number[]) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example9.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column summary · Implement a custom summary function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  generate an array of arrays with dummy numeric data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateData(5, 7),\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  columnSummary: [\n    // configure a column summary\n    {\n      // set the `type` option to `'custom'`\n      type: 'custom',\n      destinationRow: 0,\n      destinationColumn: 5,\n      reversedRowCoords: true,\n      // add your custom summary function\n      customFunction(endpoint) {\n        // implement a function that counts the number of even values in the column\n        const hotInstance = this.hot;\n        let evenCount = 0;\n\n        // a helper function\n        const checkRange = (rowRange: number[]) => {\n          let i = rowRange[1] || rowRange[0];\n          let counter = 0;\n\n          do {\n            if (parseInt(hotInstance.getDataAtCell(i, endpoint.sourceColumn), 10) % 2 === 0) {\n              counter++;\n            }\n\n            i--;\n          } while (i >= rowRange[0]);\n\n          return counter;\n        };\n\n        // go through all declared ranges\n        for (const r in endpoint.ranges) {\n          if (endpoint.ranges.hasOwnProperty(r)) {\n            evenCount += checkRange(endpoint.ranges[r]);\n          }\n        }\n\n        return evenCount;\n      },\n      forceNumeric: true,\n    },\n  ],\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-summary/vue/example9.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example9","exampleTitle":"Implement a custom summary function","docPermalink":"/column-summary","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__angular__example1.ts.json
index 2c0b2db75..7d97d7e72 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column virtualization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(1000) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(1000) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-virtualization/angular/example1.ts","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column virtualization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(1000) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(1000) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-virtualization/angular/example1.ts","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.js.json
index edd246258..9d5982099 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column virtualization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-virtualization/javascript/example1.js","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column virtualization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-virtualization/javascript/example1.js","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.ts.json
index 97349ab17..31162718f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column virtualization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-virtualization/javascript/example1.ts","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column virtualization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-virtualization/javascript/example1.ts","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__react__example1.tsx.json
index 600e571db..09a5a2147 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column virtualization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-virtualization/react/example1.tsx","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column virtualization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-virtualization/react/example1.tsx","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__vue__example1.vue.json
index c65009f37..3e706c5c3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-virtualization__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column virtualization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-virtualization/vue/example1.vue","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column virtualization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-virtualization/vue/example1.vue","breadcrumb":["Columns","Column virtualization"],"guide":"guides/columns/column-virtualization/column-virtualization.md","guideTitle":"Column virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-virtualization","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example1.ts.json
index f1cc7100e..90f6958b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n    rowHeaders: true,\n    colWidths: 100,\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example1.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n    rowHeaders: true,\n    colWidths: 100,\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example1.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example2.ts.json
index 73767f8a0..53cc59182 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Set the column width in an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: [\n      'Symbol',\n      'Atomic Number',\n      'Name',\n      'Category',\n      'Atomic Mass',\n      'Melting Point (°F)',\n      'Boiling Point (°F)',\n      'Density (g/cm³)',\n      'Electronegativity',\n      'Atomic Radius (pm)',\n    ],\n    columns: [\n      {},\n      { type: 'numeric' },\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n    ],\n    rowHeaders: true,\n    colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example2.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Set the column width in an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: [\n      'Symbol',\n      'Atomic Number',\n      'Name',\n      'Category',\n      'Atomic Mass',\n      'Melting Point (°F)',\n      'Boiling Point (°F)',\n      'Density (g/cm³)',\n      'Electronegativity',\n      'Atomic Radius (pm)',\n    ],\n    columns: [\n      {},\n      { type: 'numeric' },\n      {},\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric' },\n      { type: 'numeric' },\n      { type: 'numeric' },\n    ],\n    rowHeaders: true,\n    colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example2.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example3.ts.json
index 5510dada5..8ede09227 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Set the column width using a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n    columns: [\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric' },\n      {},\n    ],\n    rowHeaders: true,\n    colWidths(index: number) {\n      return (index + 1) * 60;\n    },\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example3.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Set the column width using a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n    columns: [\n      {},\n      { type: 'numeric' },\n      { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n      { type: 'numeric' },\n      {},\n    ],\n    rowHeaders: true,\n    colWidths(index: number) {\n      return (index + 1) * 60;\n    },\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example3.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example4.ts.json
index b89c52b31..6bdd322c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Adjust the column width manually · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n    rowHeaders: true,\n    colWidths: [200, 100, 100, 150, 100],\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example4.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Adjust the column width manually · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n    rowHeaders: true,\n    colWidths: [200, 100, 100, 150, 100],\n    manualColumnResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example4.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example5.ts.json
index e2feb55fc..0bf90f195 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Fit all columns equally · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Name', 'Category'],\n    rowHeaders: true,\n    stretchH: 'all',\n    contextMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example5.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Fit all columns equally · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Name', 'Category'],\n    rowHeaders: true,\n    stretchH: 'all',\n    contextMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example5.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example6.ts.json
index acefe6258..85af84bc7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Stretch only the last column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colWidths: 80,\n    colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n    rowHeaders: true,\n    stretchH: 'last',\n    contextMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example6.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Stretch only the last column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colWidths: 80,\n    colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n    rowHeaders: true,\n    stretchH: 'last',\n    contextMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example6.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example7.ts.json
index 891e567fb..b8f2d4142 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Category', 'No.'],\n    rowHeaders: true,\n    columns: [\n      { width: 90 },\n      {},\n      { width: 60 },\n    ],\n    modifyColWidth(width: number, column: number) {\n      if (column === 1 && width > 120) {\n        return 100;\n      }\n\n      return width;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: ['Symbol', 'Category', 'No.'],\n    rowHeaders: true,\n    columns: [\n      { width: 90 },\n      {},\n      { width: 60 },\n    ],\n    modifyColWidth(width: number, column: number) {\n      if (column === 1 && width > 120) {\n        return 100;\n      }\n\n      return width;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/columns/column-width/angular/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.js.json
index 5ce8f16ca..0791d9dad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example1.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example1.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.ts.json
index 63a410c44..2b8abf158 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example1.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example1.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.js.json
index 8aabe34da..dbb0f3331 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Set the column width in an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example2.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Set the column width in an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example2.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.ts.json
index 93067b386..7746467ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Set the column width in an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example2.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Set the column width in an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example2.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.js.json
index 2ecab3673..e040f7fdb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Set the column width using a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example3.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Set the column width using a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example3.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.ts.json
index bc08476ac..bf96f9177 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Set the column width using a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example3.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Set the column width using a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example3.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.js.json
index 43688292f..097e52683 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Adjust the column width manually · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-clearSizes\">Clear manual sizes</button>\n    </div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100], // initial width of each column\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Demonstrates ManualColumnResize#clearManualSizes(): drag a column header\n// to resize it, then click this button to fall back to `colWidths` again.\nconst clearSizesButton = document.querySelector('#example4-clearSizes');\nclearSizesButton.addEventListener('click', () => {\n  hot.getPlugin('manualColumnResize').clearManualSizes();\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example4.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Adjust the column width manually · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-clearSizes\">Clear manual sizes</button>\n    </div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100], // initial width of each column\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Demonstrates ManualColumnResize#clearManualSizes(): drag a column header\n// to resize it, then click this button to fall back to `colWidths` again.\nconst clearSizesButton = document.querySelector('#example4-clearSizes');\nclearSizesButton.addEventListener('click', () => {\n  hot.getPlugin('manualColumnResize').clearManualSizes();\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example4.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.ts.json
index 75093baa2..7443f711d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Adjust the column width manually · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-clearSizes\">Clear manual sizes</button>\n    </div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100], // initial width of each column\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Demonstrates ManualColumnResize#clearManualSizes(): drag a column header\n// to resize it, then click this button to fall back to `colWidths` again.\nconst clearSizesButton = document.querySelector('#example4-clearSizes')!;\nclearSizesButton.addEventListener('click', () => {\n  hot.getPlugin('manualColumnResize').clearManualSizes();\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example4.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Adjust the column width manually · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-clearSizes\">Clear manual sizes</button>\n    </div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100], // initial width of each column\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Demonstrates ManualColumnResize#clearManualSizes(): drag a column header\n// to resize it, then click this button to fall back to `colWidths` again.\nconst clearSizesButton = document.querySelector('#example4-clearSizes')!;\nclearSizesButton.addEventListener('click', () => {\n  hot.getPlugin('manualColumnResize').clearManualSizes();\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example4.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.js.json
index e51a71acc..5b6eb593e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Fit all columns equally · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all', // 'none' is default\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example5.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Fit all columns equally · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all', // 'none' is default\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example5.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.ts.json
index 543cf99f5..e321429b1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Fit all columns equally · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all', // 'none' is default\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example5.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Fit all columns equally · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all', // 'none' is default\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example5.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.js.json
index 800c45824..c9fede1bd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Stretch only the last column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example6.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Stretch only the last column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example6.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.ts.json
index 4a481eeb7..112940d2c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Stretch only the last column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example6.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Stretch only the last column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example6.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.js.json
index e0e49e6cb..1f3b9cf43 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [{ width: 90 }, {}, { width: 60 }],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example7.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [{ width: 90 }, {}, { width: 60 }],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example7.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.ts.json
index 1963e3a6f..892f8b2af 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [\n    { width: 90 },\n    {},\n    { width: 60 },\n  ],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [\n    { width: 90 },\n    {},\n    { width: 60 },\n  ],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example1.tsx.json
index 48b95c569..cd2c23514 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n  ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n  ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n  ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n  ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State']}\n      rowHeaders={true}\n      colWidths={100}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example1.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n  ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n  ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n  ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n  ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State']}\n      rowHeaders={true}\n      colWidths={100}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example1.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example2.tsx.json
index 05fb5d32c..9a9d4c9c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Set the column width in an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n  ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n  ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n  ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n  ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={[\n        'Symbol',\n        'Atomic Number',\n        'Name',\n        'Category',\n        'Atomic Mass',\n        'Melting Point (°F)',\n        'Boiling Point (°F)',\n        'Density (g/cm³)',\n        'Electronegativity',\n        'Atomic Radius (pm)',\n      ]}\n      columns={[\n        {},\n        { type: 'numeric' },\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n      ]}\n      rowHeaders={true}\n      colWidths={[70, 120, 90, 160, 110, 140, 140, 130, 140, 150]}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example2.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Set the column width in an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n  ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n  ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n  ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n  ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={[\n        'Symbol',\n        'Atomic Number',\n        'Name',\n        'Category',\n        'Atomic Mass',\n        'Melting Point (°F)',\n        'Boiling Point (°F)',\n        'Density (g/cm³)',\n        'Electronegativity',\n        'Atomic Radius (pm)',\n      ]}\n      columns={[\n        {},\n        { type: 'numeric' },\n        {},\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric' },\n        { type: 'numeric' },\n        { type: 'numeric' },\n      ]}\n      rowHeaders={true}\n      colWidths={[70, 120, 90, 160, 110, 140, 140, 130, 140, 150]}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example2.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example3.tsx.json
index f9ad54922..33ae241b8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Set the column width using a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n  ['He', 2, -458.0, 0.00018, 'Noble gas'],\n  ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n  ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n  ['B', 5, 3768.8, 2.34, 'Metalloid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category']}\n      columns={[\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric' },\n        {},\n      ]}\n      rowHeaders={true}\n      colWidths={(index) => {\n        return (index + 1) * 60;\n      }}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example3.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Set the column width using a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n  ['He', 2, -458.0, 0.00018, 'Noble gas'],\n  ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n  ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n  ['B', 5, 3768.8, 2.34, 'Metalloid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category']}\n      columns={[\n        {},\n        { type: 'numeric' },\n        { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n        { type: 'numeric' },\n        {},\n      ]}\n      rowHeaders={true}\n      colWidths={(index) => {\n        return (index + 1) * 60;\n      }}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example3.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example4.tsx.json
index 8f78b8d3a..60a8cdfe2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Adjust the column width manually · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n  ['Helium', 'He', 2, -458.0, 'Gas'],\n  ['Lithium', 'Li', 3, 356.9, 'Solid'],\n  ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n  ['Boron', 'B', 5, 3768.8, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State']}\n      rowHeaders={true}\n      colWidths={[200, 100, 100, 150, 100]}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example4.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Adjust the column width manually · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n  ['Helium', 'He', 2, -458.0, 'Gas'],\n  ['Lithium', 'Li', 3, 356.9, 'Solid'],\n  ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n  ['Boron', 'B', 5, 3768.8, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State']}\n      rowHeaders={true}\n      colWidths={[200, 100, 100, 150, 100]}\n      manualColumnResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example4.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example5.tsx.json
index 7d1b5b929..c4852745c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Fit all columns equally · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 'Nonmetal'],\n  ['He', 'Helium', 'Noble gas'],\n  ['Li', 'Lithium', 'Alkali metal'],\n  ['Be', 'Beryllium', 'Alkaline earth metal'],\n  ['B', 'Boron', 'Metalloid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Name', 'Category']}\n      rowHeaders={true}\n      stretchH=\"all\"\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example5.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Fit all columns equally · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 'Nonmetal'],\n  ['He', 'Helium', 'Noble gas'],\n  ['Li', 'Lithium', 'Alkali metal'],\n  ['Be', 'Beryllium', 'Alkaline earth metal'],\n  ['B', 'Boron', 'Metalloid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Name', 'Category']}\n      rowHeaders={true}\n      stretchH=\"all\"\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example5.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example6.tsx.json
index a19f8e331..473662ec5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Stretch only the last column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 1, 'Gas'],\n  ['He', 'Helium', 2, 'Gas'],\n  ['Li', 'Lithium', 3, 'Solid'],\n  ['Be', 'Beryllium', 4, 'Solid'],\n  ['B', 'Boron', 5, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colWidths={80}\n      colHeaders={['Symbol', 'Name', 'Atomic Number', 'State']}\n      rowHeaders={true}\n      stretchH=\"last\"\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example6.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Stretch only the last column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Hydrogen', 1, 'Gas'],\n  ['He', 'Helium', 2, 'Gas'],\n  ['Li', 'Lithium', 3, 'Solid'],\n  ['Be', 'Beryllium', 4, 'Solid'],\n  ['B', 'Boron', 5, 'Solid'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colWidths={80}\n      colHeaders={['Symbol', 'Name', 'Atomic Number', 'State']}\n      rowHeaders={true}\n      stretchH=\"last\"\n      contextMenu={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example6.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example7.tsx.json
index ddacff484..3a355b02a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Nonmetal', 1],\n  ['He', 'Noble gas', 2],\n  ['Li', 'Alkali metal', 3],\n  ['Be', 'Alkaline earth metal', 4],\n  ['B', 'Metalloid', 5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Category', 'No.']}\n      rowHeaders={true}\n      columns={[{ width: 90 }, {}, { width: 60 }]}\n      modifyColWidth={(width, column) => {\n        if (column === 1 && width > 120) {\n          return 100;\n        }\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example7.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['H', 'Nonmetal', 1],\n  ['He', 'Noble gas', 2],\n  ['Li', 'Alkali metal', 3],\n  ['Be', 'Alkaline earth metal', 4],\n  ['B', 'Metalloid', 5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={['Symbol', 'Category', 'No.']}\n      rowHeaders={true}\n      columns={[{ width: 90 }, {}, { width: 60 }]}\n      modifyColWidth={(width, column) => {\n        if (column === 1 && width > 120) {\n          return 100;\n        }\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example7.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example1.vue.json
index 76c9e7479..754886d92 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example1.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 1, 1.008, -434.4, 0.00009, 'Gas'],\n    ['He', 'Helium', 2, 4.003, -458.0, 0.00018, 'Gas'],\n    ['Li', 'Lithium', 3, 6.94, 356.9, 0.534, 'Solid'],\n    ['Be', 'Beryllium', 4, 9.012, 2348.6, 1.85, 'Solid'],\n    ['B', 'Boron', 5, 10.81, 3768.8, 2.34, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'Atomic Mass', 'Melting Point (°F)', 'Density (g/cm³)', 'State'],\n  rowHeaders: true,\n  colWidths: 100,\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example1.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example2.vue.json
index e9a1afd75..18144aa74 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Set the column width in an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example2.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Set the column width in an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 1, 'Hydrogen', 'Nonmetal', 1.008, -434.4, -423.2, 0.00009, 2.2, 25],\n    ['He', 2, 'Helium', 'Noble gas', 4.003, -458.0, -452.1, 0.00018, undefined, undefined],\n    ['Li', 3, 'Lithium', 'Alkali metal', 6.94, 356.9, 2447.6, 0.534, 0.98, 145],\n    ['Be', 4, 'Beryllium', 'Alkaline earth metal', 9.012, 2348.6, 4478.8, 1.85, 1.57, 105],\n    ['B', 5, 'Boron', 'Metalloid', 10.81, 3768.8, 7100.6, 2.34, 2.04, 85],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: [\n    'Symbol',\n    'Atomic Number',\n    'Name',\n    'Category',\n    'Atomic Mass',\n    'Melting Point (°F)',\n    'Boiling Point (°F)',\n    'Density (g/cm³)',\n    'Electronegativity',\n    'Atomic Radius (pm)',\n  ],\n  columns: [\n    {},\n    { type: 'numeric' },\n    {},\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    { type: 'numeric' },\n    { type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colWidths: [70, 120, 90, 160, 110, 140, 140, 130, 140, 150],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example2.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example2","exampleTitle":"Set the column width in an array","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example3.vue.json
index 60cf6e9bd..8fc46c4ae 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Set the column width using a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example3.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Set the column width using a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 1, -434.4, 0.00009, 'Nonmetal'],\n    ['He', 2, -458.0, 0.00018, 'Noble gas'],\n    ['Li', 3, 356.9, 0.534, 'Alkali metal'],\n    ['Be', 4, 2348.6, 1.85, 'Alkaline earth metal'],\n    ['B', 5, 3768.8, 2.34, 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Atomic Number', 'Melting Point (°F)', 'Density (g/cm³)', 'Category'],\n  columns: [\n    {},\n    { type: 'numeric' },\n    { type: 'numeric', numericFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false } },\n    { type: 'numeric' },\n    {},\n  ],\n  rowHeaders: true,\n  colWidths(index) {\n    return (index + 1) * 60;\n  },\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example3.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example3","exampleTitle":"Set the column width using a function","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example4.vue.json
index 7444274f5..350d6334a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Adjust the column width manually · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example4.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Adjust the column width manually · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, -434.4, 'Gas'],\n    ['Helium', 'He', 2, -458.0, 'Gas'],\n    ['Lithium', 'Li', 3, 356.9, 'Solid'],\n    ['Beryllium', 'Be', 4, 2348.6, 'Solid'],\n    ['Boron', 'B', 5, 3768.8, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Melting Point (°F)', 'State'],\n  rowHeaders: true,\n  colWidths: [200, 100, 100, 150, 100],\n  manualColumnResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example4.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example4","exampleTitle":"Adjust the column width manually","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example5.vue.json
index 26698b727..47a564b71 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Fit all columns equally · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example5.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Fit all columns equally · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 'Nonmetal'],\n    ['He', 'Helium', 'Noble gas'],\n    ['Li', 'Lithium', 'Alkali metal'],\n    ['Be', 'Beryllium', 'Alkaline earth metal'],\n    ['B', 'Boron', 'Metalloid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Name', 'Category'],\n  rowHeaders: true,\n  stretchH: 'all',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example5.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example5","exampleTitle":"Fit all columns equally","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example6.vue.json
index 569d49e88..a7f653222 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Stretch only the last column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example6.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Stretch only the last column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Hydrogen', 1, 'Gas'],\n    ['He', 'Helium', 2, 'Gas'],\n    ['Li', 'Lithium', 3, 'Solid'],\n    ['Be', 'Beryllium', 4, 'Solid'],\n    ['B', 'Boron', 5, 'Solid'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colWidths: 80,\n  colHeaders: ['Symbol', 'Name', 'Atomic Number', 'State'],\n  rowHeaders: true,\n  stretchH: 'last',\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example6.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example6","exampleTitle":"Stretch only the last column","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example7.vue.json
index 5f4e23cd0..8cebbb086 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-width__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [\n    { width: 90 },\n    {},\n    { width: 60 },\n  ],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example7.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['H', 'Nonmetal', 1],\n    ['He', 'Noble gas', 2],\n    ['Li', 'Alkali metal', 3],\n    ['Be', 'Alkaline earth metal', 4],\n    ['B', 'Metalloid', 5],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: ['Symbol', 'Category', 'No.'],\n  rowHeaders: true,\n  columns: [\n    { width: 90 },\n    {},\n    { width: 60 },\n  ],\n  modifyColWidth(width, column) {\n    if (column === 1 && width > 120) {\n      return 100;\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/columns/column-width/vue/example7.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example1.tsx.json
index 6adf4c8ed..2872c1970 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column component · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotData = [\n  ['A1', 'B1'],\n  ['A2', 'B2'],\n  ['A3', 'B3'],\n  ['A4', 'B4'],\n  ['A5', 'B5'],\n  ['A6', 'B6'],\n  ['A7', 'B7'],\n  ['A8', 'B8'],\n  ['A9', 'B9'],\n  ['A10', 'B10'],\n];\n\nconst secondColumnSettings = {\n  title: 'Second column header',\n  readOnly: true,\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={hotData}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"First column header\" />\n      <HotColumn settings={secondColumnSettings} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/react-hot-column/react/example1.tsx","breadcrumb":["Columns","Column component"],"guide":"guides/columns/react-hot-column/react-hot-column.md","guideTitle":"Column component","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/hot-column","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column component · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotData = [\n  ['A1', 'B1'],\n  ['A2', 'B2'],\n  ['A3', 'B3'],\n  ['A4', 'B4'],\n  ['A5', 'B5'],\n  ['A6', 'B6'],\n  ['A7', 'B7'],\n  ['A8', 'B8'],\n  ['A9', 'B9'],\n  ['A10', 'B10'],\n];\n\nconst secondColumnSettings = {\n  title: 'Second column header',\n  readOnly: true,\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={hotData}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"First column header\" />\n      <HotColumn settings={secondColumnSettings} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/react-hot-column/react/example1.tsx","breadcrumb":["Columns","Column component"],"guide":"guides/columns/react-hot-column/react-hot-column.md","guideTitle":"Column component","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/hot-column","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example3.tsx.json
index c88941bb7..506e22a08 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__react-hot-column__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column component · Object data source · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// a renderer component\nconst ScoreRenderer = (props: { value?: any }) => {\n  const { value } = props;\n  const color = value > 60 ? '#2ECC40' : '#FF4136';\n\n  return <span style={{ color }}>{value}</span>;\n};\n\n// a renderer component\nconst PromotionRenderer = (props: { value?: any }) => {\n  const { value } = props;\n\n  if (value) {\n    return <span>&#10004;</span>;\n  }\n\n  return <span>&#10007;</span>;\n};\n\n// you can set `data` to an array of objects\nconst data = [\n  {\n    id: 1,\n    name: 'Alex',\n    score: 10,\n    isPromoted: false,\n  },\n  {\n    id: 2,\n    name: 'Adam',\n    score: 55,\n    isPromoted: false,\n  },\n  {\n    id: 3,\n    name: 'Kate',\n    score: 61,\n    isPromoted: true,\n  },\n  {\n    id: 4,\n    name: 'Max',\n    score: 98,\n    isPromoted: true,\n  },\n  {\n    id: 5,\n    name: 'Lucy',\n    score: 59,\n    isPromoted: false,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      autoRowSize={false}\n      autoColumnSize={false}\n      height=\"auto\"\n    >\n      {/* use the `data` prop to reference the column data */}\n      <HotColumn data=\"id\" />\n      <HotColumn data=\"name\" />\n      <HotColumn data=\"score\" renderer={ScoreRenderer} />\n      <HotColumn data=\"isPromoted\" renderer={PromotionRenderer} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/react-hot-column/react/example3.tsx","breadcrumb":["Columns","Column component"],"guide":"guides/columns/react-hot-column/react-hot-column.md","guideTitle":"Column component","exampleId":"example3","exampleTitle":"Object data source","docPermalink":"/hot-column","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column component · Object data source · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// a renderer component\nconst ScoreRenderer = (props: { value?: any }) => {\n  const { value } = props;\n  const color = value > 60 ? '#2ECC40' : '#FF4136';\n\n  return <span style={{ color }}>{value}</span>;\n};\n\n// a renderer component\nconst PromotionRenderer = (props: { value?: any }) => {\n  const { value } = props;\n\n  if (value) {\n    return <span>&#10004;</span>;\n  }\n\n  return <span>&#10007;</span>;\n};\n\n// you can set `data` to an array of objects\nconst data = [\n  {\n    id: 1,\n    name: 'Alex',\n    score: 10,\n    isPromoted: false,\n  },\n  {\n    id: 2,\n    name: 'Adam',\n    score: 55,\n    isPromoted: false,\n  },\n  {\n    id: 3,\n    name: 'Kate',\n    score: 61,\n    isPromoted: true,\n  },\n  {\n    id: 4,\n    name: 'Max',\n    score: 98,\n    isPromoted: true,\n  },\n  {\n    id: 5,\n    name: 'Lucy',\n    score: 59,\n    isPromoted: false,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      autoRowSize={false}\n      autoColumnSize={false}\n      height=\"auto\"\n    >\n      {/* use the `data` prop to reference the column data */}\n      <HotColumn data=\"id\" />\n      <HotColumn data=\"name\" />\n      <HotColumn data=\"score\" renderer={ScoreRenderer} />\n      <HotColumn data=\"isPromoted\" renderer={PromotionRenderer} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/react-hot-column/react/example3.tsx","breadcrumb":["Columns","Column component"],"guide":"guides/columns/react-hot-column/react-hot-column.md","guideTitle":"Column component","exampleId":"example3","exampleTitle":"Object data source","docPermalink":"/hot-column","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example1.ts.json
index 8f4ac6f6c..c24a6c80f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Configuration ▸ Setting options · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-configuration-options></example1-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: true,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example1.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"Angular"}
+{"framework":"angular","displayName":"Configuration ▸ Setting options · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-configuration-options></example1-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: true,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example1.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example2.ts.json
index 8b916c007..6d177fe7f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Configuration ▸ Setting options · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-configuration-options></example2-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example2-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    columns: (index: number) => ({\n      readOnly: index === 2 || index === 8,\n    })\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example2.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Angular"}
+{"framework":"angular","displayName":"Configuration ▸ Setting options · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-configuration-options></example2-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example2-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    columns: (index: number) => ({\n      readOnly: index === 2 || index === 8,\n    })\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example2.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example3.ts.json
index 4e7353ef6..430de8969 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Configuration ▸ Setting options · Example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-configuration-options></example3-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example3-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    cells: (row: number, col: number) => {\n      if (row === 1 || row === 4) {\n        return { readOnly: true };\n      }\n\n      return {};\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example3.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"Angular"}
+{"framework":"angular","displayName":"Configuration ▸ Setting options · Example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-configuration-options></example3-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example3-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    cells: (row: number, col: number) => {\n      if (row === 1 || row === 4) {\n        return { readOnly: true };\n      }\n\n      return {};\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example3.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example4.ts.json
index d6e74f675..4139e5965 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Configuration ▸ Setting options · Example (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-configuration-options></example4-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example4-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    cell: [\n      {\n        // bottom-level cell options overwrite the top-level grid options\n        // apply only to a cell with coordinates (0, 0)\n        row: 0,\n        col: 0,\n        readOnly: true,\n      },\n      {\n        // bottom-level cell options overwrite the top-level grid options\n        // apply only to a cell with coordinates (1, 1)\n        row: 1,\n        col: 1,\n        readOnly: true,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example4.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"Angular"}
+{"framework":"angular","displayName":"Configuration ▸ Setting options · Example (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-configuration-options></example4-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example4-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: false,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    cell: [\n      {\n        // bottom-level cell options overwrite the top-level grid options\n        // apply only to a cell with coordinates (0, 0)\n        row: 0,\n        col: 0,\n        readOnly: true,\n      },\n      {\n        // bottom-level cell options overwrite the top-level grid options\n        // apply only to a cell with coordinates (1, 1)\n        row: 1,\n        col: 1,\n        readOnly: true,\n      },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example4.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example6.ts.json
index 1fc38189b..3e93f87e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Configuration ▸ Setting options · Configuration example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-configuration-options></example6-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example6-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: true,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    columns: [\n      // each cell in the first (by physical index) column is editable\n      { readOnly: false, className: '' },\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n    ],\n    cell: [\n      // cell (0, 0) is read-only\n      { row: 0, col: 0, readOnly: true },\n    ],\n    cells: (row: number, col: number) => {\n      // cell (2, 2) is editable\n      if (row === 2 && col === 2) {\n        return { readOnly: false, className: '' };\n      }\n\n      return {};\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example6.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"Angular"}
+{"framework":"angular","displayName":"Configuration ▸ Setting options · Configuration example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-configuration-options></example6-configuration-options>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example6-configuration-options',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    readOnly: true,\n    width: 'auto',\n    height: 'auto',\n    rowHeaders: true,\n    colHeaders: true,\n    columns: [\n      // each cell in the first (by physical index) column is editable\n      { readOnly: false, className: '' },\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n      {},\n    ],\n    cell: [\n      // cell (0, 0) is read-only\n      { row: 0, col: 0, readOnly: true },\n    ],\n    cells: (row: number, col: number) => {\n      // cell (2, 2) is editable\n      if (row === 2 && col === 2) {\n        return { readOnly: false, className: '' };\n      }\n\n      return {};\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/configuration/configuration-options/angular/example6.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.js.json
index a01125a92..fb7b874fe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example1.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example1.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.ts.json
index 88a8f0869..3eff8c768 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example1.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example1.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.js.json
index 3662899d2..32f930966 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns: (index) => {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example2.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns: (index) => {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example2.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.ts.json
index 268e359c2..208c204fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example2')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns: (index: number) => {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example2.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example2')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns: (index: number) => {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example2.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.js.json
index 4a39b7f8f..09432dba4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row, col) => {\n    return row === 1 || row === 4 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 1).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example3.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row, col) => {\n    return row === 1 || row === 4 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 1).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example3.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.ts.json
index b0ca04b22..8786320ea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example3')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row: number, col: number) => {\n    return row === 1 || row === 4 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 1).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example3.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example3')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row: number, col: number) => {\n    return row === 1 || row === 4 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 1).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example3.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.js.json
index e99e60b37..094704275 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  cell: [\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (0, 0)\n      row: 0,\n      col: 0,\n      readOnly: true,\n    },\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (1, 1)\n      row: 1,\n      col: 1,\n      readOnly: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;\n// returns `false`\nhot.getCellMeta(0, 1).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example4.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  cell: [\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (0, 0)\n      row: 0,\n      col: 0,\n      readOnly: true,\n    },\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (1, 1)\n      row: 1,\n      col: 1,\n      readOnly: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;\n// returns `false`\nhot.getCellMeta(0, 1).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example4.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.ts.json
index a57f8fdb2..7876b0fdb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example4')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  cell: [\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (0, 0)\n      row: 0,\n      col: 0,\n      readOnly: true,\n    },\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (1, 1)\n      row: 1,\n      col: 1,\n      readOnly: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `false`\nhot.getCellMeta(0, 1).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example4.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example4')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  cell: [\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (0, 0)\n      row: 0,\n      col: 0,\n      readOnly: true,\n    },\n    {\n      // bottom-level cell options overwrite the top-level grid options\n      // apply only to a cell with coordinates (1, 1)\n      row: 1,\n      col: 1,\n      readOnly: true,\n    },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `true`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `false`\nhot.getCellMeta(0, 1).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example4.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.js.json
index 295ae253b..be90447df 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (4) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row, col) => {\n    return (row === 1 || row === 3) && col === 1 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example5.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example5","exampleTitle":"Example (4)","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Example (4) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row, col) => {\n    return (row === 1 || row === 3) && col === 1 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example5.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example5","exampleTitle":"Example (4)","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.ts.json
index 239030cab..d35071d29 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (4) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example5')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row: number, col: number) => {\n    return (row === 1 || row === 3) && col === 1 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example5.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example5","exampleTitle":"Example (4)","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Example (4) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example5')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells: (row: number, col: number) => {\n    return (row === 1 || row === 3) && col === 1 ? { readOnly: true } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example5.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example5","exampleTitle":"Example (4)","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.js.json
index 430fd419c..0125fbf84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Configuration ▸ Setting options · Configuration example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    // each cell in the first (by physical index) column is editable\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    // cell (0, 0) is read-only\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells: (row, col) => {\n    // cell (2, 2) is editable\n    return row === 2 && col === 2 ? { readOnly: false, className: '' } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example6.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Configuration ▸ Setting options · Configuration example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\nconst data = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    // each cell in the first (by physical index) column is editable\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    // cell (0, 0) is read-only\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells: (row, col) => {\n    // cell (2, 2) is editable\n    return row === 2 && col === 2 ? { readOnly: false, className: '' } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/configuration/configuration-options/javascript/example6.js","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.ts.json
index 155c519f0..92d0b2189 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Configuration ▸ Setting options · Configuration example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example6')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    // each cell in the first (by physical index) column is editable\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    // cell (0, 0) is read-only\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells: (row: number, col: number) => {\n    // cell (2, 2) is editable\n    return row === 2 && col === 2 ? { readOnly: false, className: '' } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example6.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Configuration ▸ Setting options · Configuration example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example6')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n  ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n  ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n  ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n  ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    // each cell in the first (by physical index) column is editable\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    // cell (0, 0) is read-only\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells: (row: number, col: number) => {\n    // cell (2, 2) is editable\n    return row === 2 && col === 2 ? { readOnly: false, className: '' } : {};\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/configuration/configuration-options/javascript/example6.ts","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example1.tsx.json
index b5cb99980..bd0017999 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Configuration ▸ Setting options · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      readOnly={true}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example1.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"React (TS)"}
+{"framework":"react","displayName":"Configuration ▸ Setting options · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      readOnly={true}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example1.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example2.tsx.json
index cd70f2384..3e68e28fd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Configuration ▸ Setting options · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      readOnly={false}\n      columns={(index: number) => ({\n        readOnly: index === 2 || index === 8,\n      })}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example2.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"React (TS)"}
+{"framework":"react","displayName":"Configuration ▸ Setting options · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      readOnly={false}\n      columns={(index: number) => ({\n        readOnly: index === 2 || index === 8,\n      })}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example2.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example3.tsx.json
index 6e974c3a8..d3be53be1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Configuration ▸ Setting options · Example (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      cells={(row: number, col: number) => {\n        if (row === 1 || row === 4) {\n          return { readOnly: true };\n        }\n\n        return {};\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example3.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"React (TS)"}
+{"framework":"react","displayName":"Configuration ▸ Setting options · Example (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      cells={(row: number, col: number) => {\n        if (row === 1 || row === 4) {\n          return { readOnly: true };\n        }\n\n        return {};\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example3.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example4.tsx.json
index ee69d4e44..86d78c4b1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Configuration ▸ Setting options · Example (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      readOnly={false}\n      cell={[\n        {\n          // bottom-level cell options overwrite the top-level grid options\n          // apply only to a cell with coordinates (0, 0)\n          row: 0,\n          col: 0,\n          readOnly: true,\n        },\n        {\n          // bottom-level cell options overwrite the top-level grid options\n          // apply only to a cell with coordinates (1, 1)\n          row: 1,\n          col: 1,\n          readOnly: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example4.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"React (TS)"}
+{"framework":"react","displayName":"Configuration ▸ Setting options · Example (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      readOnly={false}\n      cell={[\n        {\n          // bottom-level cell options overwrite the top-level grid options\n          // apply only to a cell with coordinates (0, 0)\n          row: 0,\n          col: 0,\n          readOnly: true,\n        },\n        {\n          // bottom-level cell options overwrite the top-level grid options\n          // apply only to a cell with coordinates (1, 1)\n          row: 1,\n          col: 1,\n          readOnly: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example4.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example6.tsx.json
index 165026c5f..990e19e58 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Configuration ▸ Setting options · Configuration example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      readOnly={true}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      columns={[\n        // each cell in the first (by physical index) column is editable\n        { readOnly: false, className: '' },\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n      ]}\n      cell={[\n        // cell (0, 0) is read-only\n        { row: 0, col: 0, readOnly: true },\n      ]}\n      cells={(row: number, col: number) => {\n        // cell (2, 2) is editable\n        if (row === 2 && col === 2) {\n          return { readOnly: false, className: '' };\n        }\n\n        return {};\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example6.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"React (TS)"}
+{"framework":"react","displayName":"Configuration ▸ Setting options · Configuration example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n  const data: Handsontable.CellValue[][] = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      readOnly={true}\n      width=\"auto\"\n      height=\"auto\"\n      rowHeaders={true}\n      colHeaders={true}\n      columns={[\n        // each cell in the first (by physical index) column is editable\n        { readOnly: false, className: '' },\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n        {},\n      ]}\n      cell={[\n        // cell (0, 0) is read-only\n        { row: 0, col: 0, readOnly: true },\n      ]}\n      cells={(row: number, col: number) => {\n        // cell (2, 2) is editable\n        if (row === 2 && col === 2) {\n          return { readOnly: false, className: '' };\n        }\n\n        return {};\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/configuration/configuration-options/react/example6.tsx","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example1.vue.json
index e24b305f2..1284720e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Configuration ▸ Setting options · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example1.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"Vue 3"}
+{"framework":"vue","displayName":"Configuration ▸ Setting options · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example1.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/configuration-options","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example2.vue.json
index 7c15c488a..2238ef17b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Configuration ▸ Setting options · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns(index) {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example2.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Vue 3"}
+{"framework":"vue","displayName":"Configuration ▸ Setting options · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  readOnly: false,\n  columns(index) {\n    return {\n      readOnly: index === 2 || index === 8,\n    };\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example2.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example3.vue.json
index 38432825b..de477b367 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Configuration ▸ Setting options · Example (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells(row) {\n    if (row === 1 || row === 4) {\n      return { readOnly: true };\n    }\n    return {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example3.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"Vue 3"}
+{"framework":"vue","displayName":"Configuration ▸ Setting options · Example (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cells(row) {\n    if (row === 1 || row === 4) {\n      return { readOnly: true };\n    }\n    return {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example3.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example3","exampleTitle":"Example (2)","docPermalink":"/configuration-options","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example4.vue.json
index 80437766b..f5870fd74 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Configuration ▸ Setting options · Example (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: false,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cell: [\n    { row: 0, col: 0, readOnly: true },\n    { row: 1, col: 1, readOnly: true },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example4.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"Vue 3"}
+{"framework":"vue","displayName":"Configuration ▸ Setting options · Example (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: false,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  cell: [\n    { row: 0, col: 0, readOnly: true },\n    { row: 1, col: 1, readOnly: true },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example4.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example4","exampleTitle":"Example (3)","docPermalink":"/configuration-options","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example6.vue.json
index a8405336e..b5d2293f4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__configuration__configuration-options__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Configuration ▸ Setting options · Configuration example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells(row, col) {\n    if (row === 2 && col === 2) {\n      return { readOnly: false, className: '' };\n    }\n    return {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example6.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"Vue 3"}
+{"framework":"vue","displayName":"Configuration ▸ Setting options · Configuration example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  readOnly: true,\n  width: 'auto',\n  height: 'auto',\n  rowHeaders: true,\n  colHeaders: true,\n  columns: [\n    { readOnly: false, className: '' },\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n    {},\n  ],\n  cell: [\n    { row: 0, col: 0, readOnly: true },\n  ],\n  cells(row, col) {\n    if (row === 2 && col === 2) {\n      return { readOnly: false, className: '' };\n    }\n    return {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/configuration/configuration-options/vue/example6.vue","breadcrumb":["Configuration","Setting options"],"guide":"guides/configuration/configuration-options/configuration-options.md","guideTitle":"Setting options","exampleId":"example6","exampleTitle":"Configuration example","docPermalink":"/configuration-options","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__angular__example1.ts.json
index 9a8788c48..be6fe5d04 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example1-collaboration></example1-collaboration>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\n@Component({\n  selector: 'example1-collaboration',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <p class=\"controls\">{{ statusText }}</p>\n    </div>\n    <div>\n      <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  statusText = 'A remote update to the first row arrives in 3 seconds.';\n\n  private timeoutId?: ReturnType<typeof setTimeout>;\n\n  readonly hotData = [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    beforeChange: (changes: (Handsontable.CellChange | null)[], source: Handsontable.ChangeSource | string) => {\n      if (source === REMOTE_SOURCE || !changes) {\n        return;\n      }\n\n      changes.forEach((change) => {\n        if (!change) {\n          return;\n        }\n\n        const [row, column, , newValue] = change;\n\n        // send the local edit to your collaboration backend here\n        console.log('Broadcasting local edit:', row, column, newValue);\n      });\n    },\n  };\n\n  ngOnInit(): void {\n    // simulate an update coming from another collaborator - start editing the Status\n    // cell in the first row before the timeout fires to see the update wait for you\n    this.timeoutId = setTimeout(() => this.applyRemoteChange(0, 2, 'Done'), 3000);\n  }\n\n  ngOnDestroy(): void {\n    clearTimeout(this.timeoutId);\n  }\n\n  applyRemoteChange(row: number, column: number, value: string): void {\n    const hot = this.hotTable?.hotInstance;\n    const editor = hot?.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n    if (editingSameCell) {\n      // don't overwrite a cell the local user is editing right now -\n      // check again shortly, and apply the change once the local edit finishes\n      this.timeoutId = setTimeout(() => this.applyRemoteChange(row, column, value), 300);\n\n      return;\n    }\n\n    hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    this.statusText = 'A collaborator marked \"Update onboarding flow\" as Done.';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/data-management/collaboration/angular/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Angular"}
+{"framework":"angular","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <example1-collaboration></example1-collaboration>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\n@Component({\n  selector: 'example1-collaboration',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <p class=\"controls\">{{ statusText }}</p>\n    </div>\n    <div>\n      <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  statusText = 'A remote update to the first row arrives in 3 seconds.';\n\n  private timeoutId?: ReturnType<typeof setTimeout>;\n\n  readonly hotData = [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    beforeChange: (changes: (Handsontable.CellChange | null)[], source: Handsontable.ChangeSource | string) => {\n      if (source === REMOTE_SOURCE || !changes) {\n        return;\n      }\n\n      changes.forEach((change) => {\n        if (!change) {\n          return;\n        }\n\n        const [row, column, , newValue] = change;\n\n        // send the local edit to your collaboration backend here\n        console.log('Broadcasting local edit:', row, column, newValue);\n      });\n    },\n  };\n\n  ngOnInit(): void {\n    // simulate an update coming from another collaborator - start editing the Status\n    // cell in the first row before the timeout fires to see the update wait for you\n    this.timeoutId = setTimeout(() => this.applyRemoteChange(0, 2, 'Done'), 3000);\n  }\n\n  ngOnDestroy(): void {\n    clearTimeout(this.timeoutId);\n  }\n\n  applyRemoteChange(row: number, column: number, value: string): void {\n    const hot = this.hotTable?.hotInstance;\n    const editor = hot?.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n    if (editingSameCell) {\n      // don't overwrite a cell the local user is editing right now -\n      // check again shortly, and apply the change once the local edit finishes\n      this.timeoutId = setTimeout(() => this.applyRemoteChange(row, column, value), 300);\n\n      return;\n    }\n\n    hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    this.statusText = 'A collaborator marked \"Update onboarding flow\" as Done.';\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/data-management/collaboration/angular/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.js.json
index 377373f1c..bdecb2d7a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p id=\"remote-update-status\" class=\"controls\"></p>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst statusText = document.querySelector('#remote-update-status');\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\nconst hot = new Handsontable(container, {\n    data: [\n        ['Update onboarding flow', 'Ana García', 'In progress'],\n        ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n        ['Write Q3 release notes', 'Li Wei', 'In progress'],\n        ['Migrate auth service', 'Sofia Rossi', 'Done'],\n        ['Design empty states', 'Diego Fernández', 'In progress'],\n    ],\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    beforeChange(changes, source) {\n        if (source === REMOTE_SOURCE || !changes) {\n            return;\n        }\n        changes.forEach(([row, column, , newValue]) => {\n            // send the local edit to your collaboration backend here\n            console.log('Broadcasting local edit:', row, column, newValue);\n        });\n    },\n});\nfunction applyRemoteChange(row, column, value) {\n    const editor = hot.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n    if (editingSameCell) {\n        // don't overwrite a cell the local user is editing right now -\n        // check again shortly, and apply the change once the local edit finishes\n        setTimeout(() => applyRemoteChange(row, column, value), 300);\n        return;\n    }\n    hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.js","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p id=\"remote-update-status\" class=\"controls\"></p>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst statusText = document.querySelector('#remote-update-status');\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\nconst hot = new Handsontable(container, {\n    data: [\n        ['Update onboarding flow', 'Ana García', 'In progress'],\n        ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n        ['Write Q3 release notes', 'Li Wei', 'In progress'],\n        ['Migrate auth service', 'Sofia Rossi', 'Done'],\n        ['Design empty states', 'Diego Fernández', 'In progress'],\n    ],\n    colHeaders: ['Task', 'Assignee', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    beforeChange(changes, source) {\n        if (source === REMOTE_SOURCE || !changes) {\n            return;\n        }\n        changes.forEach(([row, column, , newValue]) => {\n            // send the local edit to your collaboration backend here\n            console.log('Broadcasting local edit:', row, column, newValue);\n        });\n    },\n});\nfunction applyRemoteChange(row, column, value) {\n    const editor = hot.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n    if (editingSameCell) {\n        // don't overwrite a cell the local user is editing right now -\n        // check again shortly, and apply the change once the local edit finishes\n        setTimeout(() => applyRemoteChange(row, column, value), 300);\n        return;\n    }\n    hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.js","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.ts.json
index 246a9598b..af2949c11 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p id=\"remote-update-status\" class=\"controls\"></p>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst statusText = document.querySelector('#remote-update-status')!;\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange(changes, source) {\n    if (source === REMOTE_SOURCE || !changes) {\n      return;\n    }\n\n    changes.forEach(([row, column, , newValue]) => {\n      // send the local edit to your collaboration backend here\n      console.log('Broadcasting local edit:', row, column, newValue);\n    });\n  },\n});\n\nfunction applyRemoteChange(row: number, column: number, value: string) {\n  const editor = hot.getActiveEditor();\n  const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n  if (editingSameCell) {\n    // don't overwrite a cell the local user is editing right now -\n    // check again shortly, and apply the change once the local edit finishes\n    setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n    return;\n  }\n\n  hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n  statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <p id=\"remote-update-status\" class=\"controls\"></p>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst statusText = document.querySelector('#remote-update-status')!;\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange(changes, source) {\n    if (source === REMOTE_SOURCE || !changes) {\n      return;\n    }\n\n    changes.forEach(([row, column, , newValue]) => {\n      // send the local edit to your collaboration backend here\n      console.log('Broadcasting local edit:', row, column, newValue);\n    });\n  },\n});\n\nfunction applyRemoteChange(row: number, column: number, value: string) {\n  const editor = hot.getActiveEditor();\n  const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n  if (editingSameCell) {\n    // don't overwrite a cell the local user is editing right now -\n    // check again shortly, and apply the change once the local edit finishes\n    setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n    return;\n  }\n\n  hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n  statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__react__example1.tsx.json
index 1f0d90581..f4aa726ba 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst data = [\n  ['Update onboarding flow', 'Ana García', 'In progress'],\n  ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n  ['Write Q3 release notes', 'Li Wei', 'In progress'],\n  ['Migrate auth service', 'Sofia Rossi', 'Done'],\n  ['Design empty states', 'Diego Fernández', 'In progress'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [statusText, setStatusText] = useState('A remote update to the first row arrives in 3 seconds.');\n\n  const applyRemoteChange = (row: number, column: number, value: string) => {\n    const hot = hotRef.current?.hotInstance;\n    const editor = hot?.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n    if (editingSameCell) {\n      // don't overwrite a cell the local user is editing right now -\n      // check again shortly, and apply the change once the local edit finishes\n      setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n      return;\n    }\n\n    hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    setStatusText('A collaborator marked \"Update onboarding flow\" as Done.');\n  };\n\n  useEffect(() => {\n    // simulate an update coming from another collaborator - start editing the Status\n    // cell in the first row before the timeout fires to see the update wait for you\n    const timeoutId = setTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <p className=\"controls\">{statusText}</p>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Task', 'Assignee', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n        beforeChange={(changes, source) => {\n          if (source === REMOTE_SOURCE || !changes) {\n            return;\n          }\n\n          changes.forEach(([row, column, , newValue]) => {\n            // send the local edit to your collaboration backend here\n            console.log('Broadcasting local edit:', row, column, newValue);\n          });\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/data-management/collaboration/react/example1.tsx","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"React (TS)"}
+{"framework":"react","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst data = [\n  ['Update onboarding flow', 'Ana García', 'In progress'],\n  ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n  ['Write Q3 release notes', 'Li Wei', 'In progress'],\n  ['Migrate auth service', 'Sofia Rossi', 'Done'],\n  ['Design empty states', 'Diego Fernández', 'In progress'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [statusText, setStatusText] = useState('A remote update to the first row arrives in 3 seconds.');\n\n  const applyRemoteChange = (row: number, column: number, value: string) => {\n    const hot = hotRef.current?.hotInstance;\n    const editor = hot?.getActiveEditor();\n    const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n    if (editingSameCell) {\n      // don't overwrite a cell the local user is editing right now -\n      // check again shortly, and apply the change once the local edit finishes\n      setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n      return;\n    }\n\n    hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n    setStatusText('A collaborator marked \"Update onboarding flow\" as Done.');\n  };\n\n  useEffect(() => {\n    // simulate an update coming from another collaborator - start editing the Status\n    // cell in the first row before the timeout fires to see the update wait for you\n    const timeoutId = setTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <p className=\"controls\">{statusText}</p>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Task', 'Assignee', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n        beforeChange={(changes, source) => {\n          if (source === REMOTE_SOURCE || !changes) {\n            return;\n          }\n\n          changes.forEach(([row, column, , newValue]) => {\n            // send the local edit to your collaboration backend here\n            console.log('Broadcasting local edit:', row, column, newValue);\n          });\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/data-management/collaboration/react/example1.tsx","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__vue__example1.vue.json
index 3d1caa7b5..a40558e1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__data-management__collaboration__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst statusText = ref('A remote update to the first row arrives in 3 seconds.');\nlet timeoutId: ReturnType<typeof setTimeout>;\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange(changes, source) {\n    if (source === REMOTE_SOURCE || !changes) {\n      return;\n    }\n\n    changes.forEach(([row, column, , newValue]) => {\n      // send the local edit to your collaboration backend here\n      console.log('Broadcasting local edit:', row, column, newValue);\n    });\n  },\n});\n\nfunction applyRemoteChange(row: number, column: number, value: string) {\n  const hot = hotRef.value?.hotInstance;\n  const editor = hot?.getActiveEditor();\n  const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n  if (editingSameCell) {\n    // don't overwrite a cell the local user is editing right now -\n    // check again shortly, and apply the change once the local edit finishes\n    timeoutId = setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n    return;\n  }\n\n  hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n  statusText.value = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n\nonMounted(() => {\n  // simulate an update coming from another collaborator - start editing the Status\n  // cell in the first row before the timeout fires to see the update wait for you\n  timeoutId = setTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);\n});\n\nonBeforeUnmount(() => clearTimeout(timeoutId));\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <p class=\"controls\">{{ statusText }}</p>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/data-management/collaboration/vue/example1.vue","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Vue 3"}
+{"framework":"vue","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst statusText = ref('A remote update to the first row arrives in 3 seconds.');\nlet timeoutId: ReturnType<typeof setTimeout>;\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Update onboarding flow', 'Ana García', 'In progress'],\n    ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n    ['Write Q3 release notes', 'Li Wei', 'In progress'],\n    ['Migrate auth service', 'Sofia Rossi', 'Done'],\n    ['Design empty states', 'Diego Fernández', 'In progress'],\n  ],\n  colHeaders: ['Task', 'Assignee', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange(changes, source) {\n    if (source === REMOTE_SOURCE || !changes) {\n      return;\n    }\n\n    changes.forEach(([row, column, , newValue]) => {\n      // send the local edit to your collaboration backend here\n      console.log('Broadcasting local edit:', row, column, newValue);\n    });\n  },\n});\n\nfunction applyRemoteChange(row: number, column: number, value: string) {\n  const hot = hotRef.value?.hotInstance;\n  const editor = hot?.getActiveEditor();\n  const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n  if (editingSameCell) {\n    // don't overwrite a cell the local user is editing right now -\n    // check again shortly, and apply the change once the local edit finishes\n    timeoutId = setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n    return;\n  }\n\n  hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n  statusText.value = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n\nonMounted(() => {\n  // simulate an update coming from another collaborator - start editing the Status\n  // cell in the first row before the timeout fires to see the update wait for you\n  timeoutId = setTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);\n});\n\nonBeforeUnmount(() => clearTimeout(timeoutId));\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <p class=\"controls\">{{ statusText }}</p>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/data-management/collaboration/vue/example1.vue","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example1.ts.json
index 3c8b021c5..062cd1eea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show({\n        content: 'This is a basic dialog with default configuration.',\n        closable: true,\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example1.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show({\n        content: 'This is a basic dialog with default configuration.',\n        closable: true,\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example1.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example2.ts.json
index f4709ad16..421bc50e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Plain text content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This is a simple text message displayed in the dialog.',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example2.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Plain text content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This is a simple text message displayed in the dialog.',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example2.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example3.ts.json
index 3b9138e34..c73cf9554 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · HTML content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" \n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n      closable: true,\n    },\n    // Required for the dialog's HTML content to be rendered safely\n    sanitizer: sanitizeDialogContent,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n\n      document.getElementById('example3-button')?.addEventListener('click', () => {\n        dialogPlugin.hide();\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example3.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · HTML content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" \n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n      closable: true,\n    },\n    // Required for the dialog's HTML content to be rendered safely\n    sanitizer: sanitizeDialogContent,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n\n      document.getElementById('example3-button')?.addEventListener('click', () => {\n        dialogPlugin.hide();\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example3.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example4.ts.json
index c28775834..ea66fc5c4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Template types · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example4',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"showAlert()\">Show Alert</button>\n        <button type=\"button\" (click)=\"showConfirm()\">Show Confirm</button>\n        <button type=\"button\" (click)=\"showCustomConfirm()\">Show custom Confirm (with solid background)</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: true,\n  };\n\n  showAlert() {\n    const dialogPlugin = this.hotTable.hotInstance!.getPlugin('dialog');\n\n    dialogPlugin.showAlert({\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    }, () => {\n      dialogPlugin.hide();\n    });\n  }\n\n  showConfirm() {\n    const dialogPlugin = this.hotTable.hotInstance!.getPlugin('dialog');\n\n    dialogPlugin.showConfirm('Do you want to undo the last action?', () => {\n      this.hotTable.hotInstance!.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    }, () => {\n      dialogPlugin.hide();\n    });\n  }\n\n  showCustomConfirm() {\n    const hotInstance = this.hotTable.hotInstance!;\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.show({\n      template: {\n        type: 'confirm',\n        title: 'Increase the price of the first row by:',\n        buttons: [\n          {\n            text: 'Cancel',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n            },\n          },\n          {\n            text: '$100',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 100);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$200',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 200);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$500',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 500);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n        ],\n      },\n      background: 'solid',\n      contentBackground: false,\n      closable: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example4.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Template types · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example4',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"showAlert()\">Show Alert</button>\n        <button type=\"button\" (click)=\"showConfirm()\">Show Confirm</button>\n        <button type=\"button\" (click)=\"showCustomConfirm()\">Show custom Confirm (with solid background)</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: true,\n  };\n\n  showAlert() {\n    const dialogPlugin = this.hotTable.hotInstance!.getPlugin('dialog');\n\n    dialogPlugin.showAlert({\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    }, () => {\n      dialogPlugin.hide();\n    });\n  }\n\n  showConfirm() {\n    const dialogPlugin = this.hotTable.hotInstance!.getPlugin('dialog');\n\n    dialogPlugin.showConfirm('Do you want to undo the last action?', () => {\n      this.hotTable.hotInstance!.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    }, () => {\n      dialogPlugin.hide();\n    });\n  }\n\n  showCustomConfirm() {\n    const hotInstance = this.hotTable.hotInstance!;\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.show({\n      template: {\n        type: 'confirm',\n        title: 'Increase the price of the first row by:',\n        buttons: [\n          {\n            text: 'Cancel',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n            },\n          },\n          {\n            text: '$100',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 100);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$200',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 200);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$500',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 500);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n        ],\n      },\n      background: 'solid',\n      contentBackground: false,\n      closable: true,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example4.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example5.ts.json
index 41c09b945..1a77353a9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Background variants · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ElementRef, OnDestroy, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example5',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdown>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of backgroundOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"selected === opt.value\"\n                  (click)=\"selectBackground(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n  @ViewChild('dropdown') dropdownRef!: ElementRef;\n\n  isOpen = false;\n  selected = 'solid';\n  backgroundOptions = [\n    { value: 'solid', label: 'Solid' },\n    { value: 'semi-transparent', label: 'Semi-transparent' },\n  ];\n\n  private clickListener = (e: MouseEvent) => {\n    if (this.dropdownRef && !this.dropdownRef.nativeElement.contains(e.target)) {\n      this.isOpen = false;\n    }\n  };\n\n  private keydownListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') this.isOpen = false;\n  };\n\n  get selectedLabel(): string {\n    return this.backgroundOptions.find((o) => o.value === this.selected)?.label || '';\n  }\n\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectBackground(value: string) {\n    this.selected = value;\n    this.isOpen = false;\n\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const content = value === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n      hotInstance.getPlugin('dialog').update({ content, background: value as 'solid' | 'semi-transparent' });\n    }\n  }\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog uses a solid background (default).',\n      background: 'solid',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show();\n    }\n\n    document.addEventListener('click', this.clickListener);\n    document.addEventListener('keydown', this.keydownListener);\n  }\n\n  ngOnDestroy() {\n    document.removeEventListener('click', this.clickListener);\n    document.removeEventListener('keydown', this.keydownListener);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example5.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Background variants · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ElementRef, OnDestroy, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example5',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" #dropdown>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            (click)=\"toggleDropdown()\"\n          >\n            <span>{{ selectedLabel }}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (isOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (opt of backgroundOptions; track opt.value) {\n                <li\n                  role=\"option\"\n                  [attr.aria-selected]=\"selected === opt.value\"\n                  (click)=\"selectBackground(opt.value)\"\n                >{{ opt.label }}</li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n  @ViewChild('dropdown') dropdownRef!: ElementRef;\n\n  isOpen = false;\n  selected = 'solid';\n  backgroundOptions = [\n    { value: 'solid', label: 'Solid' },\n    { value: 'semi-transparent', label: 'Semi-transparent' },\n  ];\n\n  private clickListener = (e: MouseEvent) => {\n    if (this.dropdownRef && !this.dropdownRef.nativeElement.contains(e.target)) {\n      this.isOpen = false;\n    }\n  };\n\n  private keydownListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') this.isOpen = false;\n  };\n\n  get selectedLabel(): string {\n    return this.backgroundOptions.find((o) => o.value === this.selected)?.label || '';\n  }\n\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectBackground(value: string) {\n    this.selected = value;\n    this.isOpen = false;\n\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const content = value === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n      hotInstance.getPlugin('dialog').update({ content, background: value as 'solid' | 'semi-transparent' });\n    }\n  }\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog uses a solid background (default).',\n      background: 'solid',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show();\n    }\n\n    document.addEventListener('click', this.clickListener);\n    document.addEventListener('keydown', this.keydownListener);\n  }\n\n  ngOnDestroy() {\n    document.removeEventListener('click', this.clickListener);\n    document.removeEventListener('keydown', this.keydownListener);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example5.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example6.ts.json
index 9e4e545c7..6fce66bf0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Content background · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog uses a semi-transparent and content background.',\n      contentBackground: true,\n      background: 'semi-transparent',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example6.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Content background · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog uses a semi-transparent and content background.',\n      contentBackground: true,\n      background: 'semi-transparent',\n      closable: true,\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example6.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example7.ts.json
index 343275a6d..c599be79a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Dialog accessibility · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content:\n      '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n      a11y: {\n        role: 'alertdialog',\n        ariaLabel: 'Title',\n        ariaLabelledby: 'example6-title',\n        ariaDescribedby: 'example6-description',\n      },\n      closable: true,\n    },\n    // Required for the dialog's HTML content to be rendered safely\n    sanitizer: sanitizeDialogContent,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example7.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Dialog accessibility · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content:\n      '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n      a11y: {\n        role: 'alertdialog',\n        ariaLabel: 'Title',\n        ariaLabelledby: 'example6-title',\n        ariaDescribedby: 'example6-description',\n      },\n      closable: true,\n    },\n    // Required for the dialog's HTML content to be rendered safely\n    sanitizer: sanitizeDialogContent,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show dialog after initialization\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n      dialogPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example7.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example8.ts.json
index fbb01b9fd..f99f03128 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog · Show and hide dialog · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example8',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"showDialog()\">Show Dialog</button>\n        <button type=\"button\" (click)=\"hideDialog()\">Hide Dialog</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog can be controlled programmatically.',\n      closable: true,\n    },\n  };\n\n  showDialog() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show();\n    }\n  }\n\n  hideDialog() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').hide();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example8.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog · Show and hide dialog · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example8',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"showDialog()\">Show Dialog</button>\n        <button type=\"button\" (click)=\"hideDialog()\">Hide Dialog</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    dialog: {\n      content: 'This dialog can be controlled programmatically.',\n      closable: true,\n    },\n  };\n\n  showDialog() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show();\n    }\n  }\n\n  hideDialog() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').hide();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/dialog/angular/example8.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.js.json
index 66cb0cd46..4f53cd586 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show({\n  content: 'This is a basic dialog with default configuration.',\n  closable: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example1.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show({\n  content: 'This is a basic dialog with default configuration.',\n  closable: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example1.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.ts.json
index 289d3be7b..4a0a8f98c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show({\n  content: 'This is a basic dialog with default configuration.',\n  closable: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example1.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show({\n  content: 'This is a basic dialog with default configuration.',\n  closable: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example1.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.js.json
index 8a5188302..219e1df66 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Plain text content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example2.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Plain text content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example2.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.ts.json
index 742a58ed0..0baa42e2d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Plain text content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example2.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Plain text content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example2.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.js.json
index 4ccea4d34..5d8a9addf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · HTML content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example3');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\ndocument.getElementById('example3-button').addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example3.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · HTML content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example3');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\ndocument.getElementById('example3-button').addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example3.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.ts.json
index ff7ec600c..6beecddad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · HTML content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n(document.getElementById('example3-button') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example3.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · HTML content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n(document.getElementById('example3-button') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example3.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.js.json
index 31bf48ff5..e0d4f63ea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Template types · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showAlert\">Show Alert</button>\n      <button type=\"button\" id=\"showConfirm\">Show Confirm</button>\n      <button type=\"button\" id=\"showCustomConfirm\">Show custom Confirm (with solid background)</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example4');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showAlert').addEventListener('click', () => {\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showConfirm').addEventListener('click', () => {\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hot.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showCustomConfirm').addEventListener('click', () => {\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);\n            hot.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example4.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Template types · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showAlert\">Show Alert</button>\n      <button type=\"button\" id=\"showConfirm\">Show Confirm</button>\n      <button type=\"button\" id=\"showCustomConfirm\">Show custom Confirm (with solid background)</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example4');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showAlert').addEventListener('click', () => {\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showConfirm').addEventListener('click', () => {\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hot.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showCustomConfirm').addEventListener('click', () => {\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);\n            hot.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example4.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.ts.json
index e151b7ec8..1da9de74a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Template types · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showAlert\">Show Alert</button>\n      <button type=\"button\" id=\"showConfirm\">Show Confirm</button>\n      <button type=\"button\" id=\"showCustomConfirm\">Show custom Confirm (with solid background)</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example4')!;\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showAlert')!.addEventListener('click', () => {\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showConfirm')!.addEventListener('click', () => {\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hot.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showCustomConfirm')!.addEventListener('click', () => {\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);\n            hot.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example4.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Template types · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showAlert\">Show Alert</button>\n      <button type=\"button\" id=\"showConfirm\">Show Confirm</button>\n      <button type=\"button\" id=\"showCustomConfirm\">Show custom Confirm (with solid background)</button>\n    </div>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example4')!;\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showAlert')!.addEventListener('click', () => {\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showConfirm')!.addEventListener('click', () => {\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hot.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n});\ndocument.getElementById('showCustomConfirm')!.addEventListener('click', () => {\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);\n            hot.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);\n            hot.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example4.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.js.json
index 9e1239940..2e61a220c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Background variants · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"backgroundDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"backgroundTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"backgroundLabel\">Solid</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"backgroundMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"solid\" aria-selected=\"true\">Solid</li>\n          <li role=\"option\" data-value=\"semi-transparent\">Semi-transparent</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example5');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n// Custom dropdown logic\nconst dropdown = document.getElementById('backgroundDropdown');\nconst trigger = document.getElementById('backgroundTrigger');\nconst menu = document.getElementById('backgroundMenu');\nconst label = document.getElementById('backgroundLabel');\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n\n    const background = item.dataset.value;\n    const content =\n      background === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    dialogPlugin.update({ content, background });\n  }\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example5.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Background variants · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"backgroundDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"backgroundTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"backgroundLabel\">Solid</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"backgroundMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"solid\" aria-selected=\"true\">Solid</li>\n          <li role=\"option\" data-value=\"semi-transparent\">Semi-transparent</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example5');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n// Custom dropdown logic\nconst dropdown = document.getElementById('backgroundDropdown');\nconst trigger = document.getElementById('backgroundTrigger');\nconst menu = document.getElementById('backgroundMenu');\nconst label = document.getElementById('backgroundLabel');\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    label.textContent = item.textContent.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n\n    const background = item.dataset.value;\n    const content =\n      background === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    dialogPlugin.update({ content, background });\n  }\n});\n\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example5.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.ts.json
index 78c72f2d5..d4fe2431b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Background variants · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"backgroundDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"backgroundTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"backgroundLabel\">Solid</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"backgroundMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"solid\" aria-selected=\"true\">Solid</li>\n          <li role=\"option\" data-value=\"semi-transparent\">Semi-transparent</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example5')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n// Custom dropdown logic\nconst dropdown = document.getElementById('backgroundDropdown')!;\nconst trigger = document.getElementById('backgroundTrigger')!;\nconst menu = document.getElementById('backgroundMenu')!;\nconst label = document.getElementById('backgroundLabel')!;\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e: MouseEvent) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n\n    const background = item.dataset.value!;\n    const content =\n      background === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    dialogPlugin.update({ content, background });\n  }\n});\n\ndocument.addEventListener('click', (e: MouseEvent) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e: KeyboardEvent) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example5.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Background variants · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"backgroundDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"backgroundTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span id=\"backgroundLabel\">Solid</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"backgroundMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"solid\" aria-selected=\"true\">Solid</li>\n          <li role=\"option\" data-value=\"semi-transparent\">Semi-transparent</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example5')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\n// Custom dropdown logic\nconst dropdown = document.getElementById('backgroundDropdown')!;\nconst trigger = document.getElementById('backgroundTrigger')!;\nconst menu = document.getElementById('backgroundMenu')!;\nconst label = document.getElementById('backgroundLabel')!;\n\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e: MouseEvent) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (item) {\n    label.textContent = item.textContent!.trim();\n    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n    item.setAttribute('aria-selected', 'true');\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n\n    const background = item.dataset.value!;\n    const content =\n      background === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    dialogPlugin.update({ content, background });\n  }\n});\n\ndocument.addEventListener('click', (e: MouseEvent) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\ndocument.addEventListener('keydown', (e: KeyboardEvent) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example5.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.js.json
index 18da8a77f..52864b98e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Content background · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example6');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a semi-transparent background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example6.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Content background · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example6');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a semi-transparent background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example6.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.ts.json
index bf5772d63..95580f412 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Content background · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example6')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a semi-transparent background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example6.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Content background · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example6')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog uses a semi-transparent background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example6.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.js.json
index f67ee2881..ea9c81488 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Dialog accessibility · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example7');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example7.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Dialog accessibility · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example7');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example7.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.ts.json
index e850a0c85..77b514b72 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Dialog accessibility · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example7')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example7.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Dialog accessibility · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example7')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show dialog after initialization\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example7.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.js.json
index bcd75e296..a03d2aa4c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog · Show and hide dialog · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showDialog\">Show Dialog</button>\n      <button type=\"button\" id=\"hideDialog\">Hide Dialog</button>\n    </div>\n  </div>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example8');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showDialog').addEventListener('click', () => {\n  dialogPlugin.show({\n    content: 'Dialog shown programmatically!',\n    closable: true,\n  });\n});\ndocument.getElementById('hideDialog').addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example8.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog · Show and hide dialog · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showDialog\">Show Dialog</button>\n      <button type=\"button\" id=\"hideDialog\">Hide Dialog</button>\n    </div>\n  </div>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example8');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\ndocument.getElementById('showDialog').addEventListener('click', () => {\n  dialogPlugin.show({\n    content: 'Dialog shown programmatically!',\n    closable: true,\n  });\n});\ndocument.getElementById('hideDialog').addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/dialog/javascript/example8.js","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.ts.json
index 29399432f..34efe0910 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__javascript__example8.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog · Show and hide dialog · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showDialog\">Show Dialog</button>\n      <button type=\"button\" id=\"hideDialog\">Hide Dialog</button>\n    </div>\n  </div>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example8')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\n(document.getElementById('showDialog') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.show({\n    content: 'Dialog shown programmatically!',\n    closable: true,\n  });\n});\n\n(document.getElementById('hideDialog') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example8.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog · Show and hide dialog · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"showDialog\">Show Dialog</button>\n      <button type=\"button\" id=\"hideDialog\">Hide Dialog</button>\n    </div>\n  </div>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example8')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\n// Add event listeners for buttons\n(document.getElementById('showDialog') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.show({\n    content: 'Dialog shown programmatically!',\n    closable: true,\n  });\n});\n\n(document.getElementById('hideDialog') as HTMLElement).addEventListener('click', () => {\n  dialogPlugin.hide();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/dialog/javascript/example8.ts","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example1.tsx.json
index d9fb2f84d..ace3ff5bd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show({\n      content: 'This is a basic dialog with default configuration.',\n      closable: true,\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example1.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show({\n      content: 'This is a basic dialog with default configuration.',\n      closable: true,\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example1.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example2.tsx.json
index 715ec090e..9a0fe2ccc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Plain text content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example2.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Plain text content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example2.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example3.tsx.json
index 25035a35b..cbb320a6d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · HTML content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n\n    document.getElementById('example3-button')?.addEventListener('click', () => {\n      hotInstance.getPlugin('dialog').hide();\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content:\n          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n        closable: true,\n      }}\n      // Required for the dialog's HTML content to be rendered safely\n      sanitizer={sanitizeDialogContent}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example3.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · HTML content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n\n    document.getElementById('example3-button')?.addEventListener('click', () => {\n      hotInstance.getPlugin('dialog').hide();\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content:\n          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n        closable: true,\n      }}\n      // Required for the dialog's HTML content to be rendered safely\n      sanitizer={sanitizeDialogContent}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example3.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example4.tsx.json
index cf232f5d7..aa595689c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Template types · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n  const showAlert = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.showAlert(\n      {\n        title: 'Alert',\n        description: 'This is an example of the alert dialog.',\n      },\n      () => {\n        dialogPlugin.hide();\n      }\n    );\n  };\n\n  const showConfirm = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n    const undoRedoPlugin = hotInstance.getPlugin('undoRedo');\n\n    dialogPlugin.showConfirm(\n      'Do you want to undo the last action?',\n      () => {\n        undoRedoPlugin.undo();\n        dialogPlugin.hide();\n      },\n      () => {\n        dialogPlugin.hide();\n      }\n    );\n  };\n\n  const showCustomConfirm = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.show({\n      template: {\n        type: 'confirm',\n        title: 'Increase the price of the first row by:',\n        buttons: [\n          {\n            text: 'Cancel',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n            },\n          },\n          {\n            text: '$100',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$200',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$500',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n        ],\n      },\n      background: 'solid',\n      contentBackground: false,\n      closable: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={showAlert}>Show Alert</button>\n          <button type=\"button\" onClick={showConfirm}>Show Confirm</button>\n          <button type=\"button\" onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example4.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Template types · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n  const showAlert = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.showAlert(\n      {\n        title: 'Alert',\n        description: 'This is an example of the alert dialog.',\n      },\n      () => {\n        dialogPlugin.hide();\n      }\n    );\n  };\n\n  const showConfirm = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n    const undoRedoPlugin = hotInstance.getPlugin('undoRedo');\n\n    dialogPlugin.showConfirm(\n      'Do you want to undo the last action?',\n      () => {\n        undoRedoPlugin.undo();\n        dialogPlugin.hide();\n      },\n      () => {\n        dialogPlugin.hide();\n      }\n    );\n  };\n\n  const showCustomConfirm = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const dialogPlugin = hotInstance.getPlugin('dialog');\n\n    dialogPlugin.show({\n      template: {\n        type: 'confirm',\n        title: 'Increase the price of the first row by:',\n        buttons: [\n          {\n            text: 'Cancel',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n            },\n          },\n          {\n            text: '$100',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$200',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n          {\n            text: '$500',\n            type: 'secondary',\n            callback: () => {\n              dialogPlugin.hide();\n              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);\n              hotInstance.selectCell(0, 1);\n            },\n          },\n        ],\n      },\n      background: 'solid',\n      contentBackground: false,\n      closable: true,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={showAlert}>Show Alert</button>\n          <button type=\"button\" onClick={showConfirm}>Show Confirm</button>\n          <button type=\"button\" onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example4.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example5.tsx.json
index 1eaf4811d..228a30df9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Background variants · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect, useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst backgroundOptions = [\n  { value: 'solid', label: 'Solid' },\n  { value: 'semi-transparent', label: 'Semi-transparent' },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState('solid');\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') setIsOpen(false);\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setSelected(value);\n    setIsOpen(false);\n\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const content =\n      value === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    hotInstance.getPlugin('dialog').update({ content, background: value });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{backgroundOptions.find((o) => o.value === selected)?.label}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {backgroundOptions.map((opt) => (\n                  <li key={opt.value} role=\"option\" aria-selected={selected === opt.value} onClick={() => handleSelect(opt.value)}>\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={{\n          content: 'This dialog uses a solid background (default).',\n          background: 'solid',\n          closable: true,\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example5.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Background variants · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect, useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst backgroundOptions = [\n  { value: 'solid', label: 'Solid' },\n  { value: 'semi-transparent', label: 'Semi-transparent' },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState('solid');\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') setIsOpen(false);\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, []);\n\n  const handleSelect = (value: string) => {\n    setSelected(value);\n    setIsOpen(false);\n\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const content =\n      value === 'solid'\n        ? 'This dialog uses a solid background (default).'\n        : 'This dialog uses a semi-transparent background.';\n\n    hotInstance.getPlugin('dialog').update({ content, background: value });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" ref={dropdownRef}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={isOpen}\n              onClick={() => setIsOpen(!isOpen)}\n            >\n              <span>{backgroundOptions.find((o) => o.value === selected)?.label}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n            </button>\n            {isOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {backgroundOptions.map((opt) => (\n                  <li key={opt.value} role=\"option\" aria-selected={selected === opt.value} onClick={() => handleSelect(opt.value)}>\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={{\n          content: 'This dialog uses a solid background (default).',\n          background: 'solid',\n          closable: true,\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example5.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example6.tsx.json
index fed2e8778..9cee4e0b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Content background · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: 'This dialog uses a semi-transparent and content background.',\n        contentBackground: true,\n        background: 'semi-transparent',\n        closable: true,\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example6.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Content background · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: 'This dialog uses a semi-transparent and content background.',\n        contentBackground: true,\n        background: 'semi-transparent',\n        closable: true,\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example6.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example7.tsx.json
index a7643fbd6..3323607eb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Dialog accessibility · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n        a11y: {\n          role: 'alertdialog',\n          ariaLabel: 'Title',\n          ariaLabelledby: 'example6-title',\n          ariaDescribedby: 'example6-description',\n        },\n        closable: true,\n      }}\n      // Required for the dialog's HTML content to be rendered safely\n      sanitizer={sanitizeDialogContent}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example7.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Dialog accessibility · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      dialog={{\n        content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n        a11y: {\n          role: 'alertdialog',\n          ariaLabel: 'Title',\n          ariaLabelledby: 'example6-title',\n          ariaDescribedby: 'example6-description',\n        },\n        closable: true,\n      }}\n      // Required for the dialog's HTML content to be rendered safely\n      sanitizer={sanitizeDialogContent}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example7.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example8.tsx.json
index ce4a3d3d9..aa16895a4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example8.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__react__example8.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog · Show and hide dialog · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  const showDialog = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  };\n\n  const hideDialog = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').hide();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={showDialog}>Show Dialog</button>\n          <button type=\"button\" onClick={hideDialog}>Hide Dialog</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={{\n          content: 'This dialog can be controlled programmatically.',\n          closable: true,\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example8.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog · Show and hide dialog · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  const showDialog = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').show();\n  };\n\n  const hideDialog = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('dialog').hide();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={showDialog}>Show Dialog</button>\n          <button type=\"button\" onClick={hideDialog}>Hide Dialog</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        dialog={{\n          content: 'This dialog can be controlled programmatically.',\n          closable: true,\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={131}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/dialog/react/example8.tsx","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example1.vue.json
index a07da9476..ec00c09bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show({\n    content: 'This is a basic dialog with default configuration.',\n    closable: true,\n  });\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example1.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show({\n    content: 'This is a basic dialog with default configuration.',\n    closable: true,\n  });\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example1.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example2.vue.json
index 8c414ebea..49c023cd2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Plain text content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example2.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Plain text content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example2.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example2","exampleTitle":"Plain text content","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example3.vue.json
index 56d74ab74..a67dd1856 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · HTML content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  hotInstance.getPlugin('dialog').show();\n\n  document.getElementById('example3-button')?.addEventListener('click', () => {\n    hotInstance.getPlugin('dialog').hide();\n  });\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example3.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · HTML content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content:\n      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type=\"button\" class=\"hot-doc-dialog-html-button\" id=\"example3-button\">Hide dialog</button>',\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  hotInstance.getPlugin('dialog').show();\n\n  document.getElementById('example3-button')?.addEventListener('click', () => {\n    hotInstance.getPlugin('dialog').hide();\n  });\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example3.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example3","exampleTitle":"HTML content","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example4.vue.json
index 871accfee..2310e1055 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Template types · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction showAlert(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n}\n\nfunction showConfirm(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hotInstance.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n}\n\nfunction showCustomConfirm(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 100);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 200);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 500);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"showAlert\">Show Alert</button>\n        <button type=\"button\" @click=\"showConfirm\">Show Confirm</button>\n        <button type=\"button\" @click=\"showCustomConfirm\">\n          Show custom Confirm (with solid background)\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example4.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Template types · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction showAlert(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.showAlert(\n    {\n      title: 'Alert',\n      description: 'This is an example of the alert dialog.',\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n}\n\nfunction showConfirm(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.showConfirm(\n    'Do you want to undo the last action?',\n    () => {\n      hotInstance.getPlugin('undoRedo').undo();\n      dialogPlugin.hide();\n    },\n    () => {\n      dialogPlugin.hide();\n    }\n  );\n}\n\nfunction showCustomConfirm(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const dialogPlugin = hotInstance.getPlugin('dialog');\n\n  dialogPlugin.show({\n    template: {\n      type: 'confirm',\n      title: 'Increase the price of the first row by:',\n      buttons: [\n        {\n          text: 'Cancel',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n          },\n        },\n        {\n          text: '$100',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 100);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$200',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 200);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n        {\n          text: '$500',\n          type: 'secondary',\n          callback: () => {\n            dialogPlugin.hide();\n            hotInstance.setDataAtCell(0, 1, (hotInstance.getDataAtCell(0, 1) as number) + 500);\n            hotInstance.selectCell(0, 1);\n          },\n        },\n      ],\n    },\n    background: 'solid',\n    contentBackground: false,\n    closable: true,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"showAlert\">Show Alert</button>\n        <button type=\"button\" @click=\"showConfirm\">Show Confirm</button>\n        <button type=\"button\" @click=\"showCustomConfirm\">\n          Show custom Confirm (with solid background)\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example4.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example4","exampleTitle":"Template types","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example5.vue.json
index 7779736ed..6544e118c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Background variants · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst selected = ref<'solid' | 'semi-transparent'>('solid');\n\nconst backgroundOptions = [\n  { value: 'solid' as const, label: 'Solid' },\n  { value: 'semi-transparent' as const, label: 'Semi-transparent' },\n];\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction handleClickOutside(e: MouseEvent): void {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n}\n\nfunction handleEscape(e: KeyboardEvent): void {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n}\n\nfunction handleSelect(value: 'solid' | 'semi-transparent'): void {\n  selected.value = value;\n  isOpen.value = false;\n\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const content =\n    value === 'solid'\n      ? 'This dialog uses a solid background (default).'\n      : 'This dialog uses a semi-transparent background.';\n\n  hotInstance.getPlugin('dialog').update({ content, background: value });\n}\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n  document.addEventListener('click', handleClickOutside);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n  document.removeEventListener('keydown', handleEscape);\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div ref=\"dropdownRef\" class=\"theme-dropdown\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ backgroundOptions.find((o) => o.value === selected)?.label }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in backgroundOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"selected === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example5.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Background variants · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst dropdownRef = useTemplateRef<HTMLDivElement>('dropdownRef');\nconst isOpen = ref(false);\nconst selected = ref<'solid' | 'semi-transparent'>('solid');\n\nconst backgroundOptions = [\n  { value: 'solid' as const, label: 'Solid' },\n  { value: 'semi-transparent' as const, label: 'Semi-transparent' },\n];\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog uses a solid background (default).',\n    background: 'solid',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction handleClickOutside(e: MouseEvent): void {\n  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {\n    isOpen.value = false;\n  }\n}\n\nfunction handleEscape(e: KeyboardEvent): void {\n  if (e.key === 'Escape') {\n    isOpen.value = false;\n  }\n}\n\nfunction handleSelect(value: 'solid' | 'semi-transparent'): void {\n  selected.value = value;\n  isOpen.value = false;\n\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const content =\n    value === 'solid'\n      ? 'This dialog uses a solid background (default).'\n      : 'This dialog uses a semi-transparent background.';\n\n  hotInstance.getPlugin('dialog').update({ content, background: value });\n}\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n  document.addEventListener('click', handleClickOutside);\n  document.addEventListener('keydown', handleEscape);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n  document.removeEventListener('keydown', handleEscape);\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div ref=\"dropdownRef\" class=\"theme-dropdown\">\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\"\n          >\n            <span>{{ backgroundOptions.find((o) => o.value === selected)?.label }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"isOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in backgroundOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"selected === opt.value\"\n              @click=\"handleSelect(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example5.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example5","exampleTitle":"Background variants","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example6.vue.json
index 96f2c9031..17653c53c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Content background · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog uses a semi-transparent and content background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example6.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Content background · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog uses a semi-transparent and content background.',\n    contentBackground: true,\n    background: 'semi-transparent',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example6.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example6","exampleTitle":"Content background","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example7.vue.json
index 2210be548..2fffd572e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Dialog accessibility · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example7.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Dialog accessibility · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeDialogContent = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: '<h2 id=\"example6-title\">Title</h2><p id=\"example6-description\">Description</p>',\n    a11y: {\n      role: 'alertdialog',\n      ariaLabel: 'Title',\n      ariaLabelledby: 'example6-title',\n      ariaDescribedby: 'example6-description',\n    },\n    closable: true,\n  },\n  // Required for the dialog's HTML content to be rendered safely\n  sanitizer: sanitizeDialogContent,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example7.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example7","exampleTitle":"Dialog accessibility","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example8.vue.json
index 849fef3fe..f14d08207 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example8.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__dialog__vue__example8.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog · Show and hide dialog · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction showDialog(): void {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n}\n\nfunction hideDialog(): void {\n  hotRef.value?.hotInstance?.getPlugin('dialog').hide();\n}\n</script>\n\n<template>\n  <div id=\"example8\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"showDialog\">Show Dialog</button>\n        <button type=\"button\" @click=\"hideDialog\">Hide Dialog</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example8.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog · Show and hide dialog · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example8\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  dialog: {\n    content: 'This dialog can be controlled programmatically.',\n    closable: true,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction showDialog(): void {\n  hotRef.value?.hotInstance?.getPlugin('dialog').show();\n}\n\nfunction hideDialog(): void {\n  hotRef.value?.hotInstance?.getPlugin('dialog').hide();\n}\n</script>\n\n<template>\n  <div id=\"example8\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"showDialog\">Show Dialog</button>\n        <button type=\"button\" @click=\"hideDialog\">Hide Dialog</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/dialog/vue/example8.vue","breadcrumb":["Dialog"],"guide":"guides/dialog/dialog/dialog.md","guideTitle":"Dialog","exampleId":"example8","exampleTitle":"Show and hide dialog","docPermalink":"/dialog","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example1.ts.json
index 4722c4684..eff8b82f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Loading · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show loadi after initialization\n      const loadingPlugin = hotInstance.getPlugin('loading');\n\n      loadingPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example1.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Loading · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show loadi after initialization\n      const loadingPlugin = hotInstance.getPlugin('loading');\n\n      loadingPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example1.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example2.ts.json
index ee6eeda35..2e391a826 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Loading · Custom configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: {\n      icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n      title: 'Processing Data...',\n      description: 'Please wait while we load your inventory data...',\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show loading after initialization\n      const loadingPlugin = hotInstance.getPlugin('loading');\n\n      loadingPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example2.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Loading · Custom configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: {\n      icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n      title: 'Processing Data...',\n      description: 'Please wait while we load your inventory data...',\n    },\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      // Show loading after initialization\n      const loadingPlugin = hotInstance.getPlugin('loading');\n\n      loadingPlugin.show();\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example2.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example3.ts.json
index 88b31b5a9..7b9ef869c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Loading · Real-world usage · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          type=\"button\"\n          [disabled]=\"isLoading\"\n          (click)=\"loadData()\"\n          [innerHTML]=\"buttonText\">\n        </button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  hotData: any[] = [];\n  isLoading = false;  \n  buttonText = 'Load Data';\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    // Component is ready, but we'll load data on button click\n  }\n\n  async loadData(): Promise<void> {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // Get loading plugin instance\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    this.isLoading = true;\n\n    try {\n      // Simulate API call delay\n      await new Promise(resolve => setTimeout(resolve, 3000));\n\n      // Simulated data\n      const data = [\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      ];\n\n      // Load data into the table\n      hotInstance.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      this.isLoading = false;\n      this.buttonText = 'Reload Data';\n\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        this.isLoading = false;\n      }, 2000);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example3.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Loading · Real-world usage · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          type=\"button\"\n          [disabled]=\"isLoading\"\n          (click)=\"loadData()\"\n          [innerHTML]=\"buttonText\">\n        </button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  hotData: any[] = [];\n  isLoading = false;  \n  buttonText = 'Load Data';\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    // Component is ready, but we'll load data on button click\n  }\n\n  async loadData(): Promise<void> {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // Get loading plugin instance\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    this.isLoading = true;\n\n    try {\n      // Simulate API call delay\n      await new Promise(resolve => setTimeout(resolve, 3000));\n\n      // Simulated data\n      const data = [\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      ];\n\n      // Load data into the table\n      hotInstance.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      this.isLoading = false;\n      this.buttonText = 'Reload Data';\n\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        this.isLoading = false;\n      }, 2000);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example3.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example4.ts.json
index bc2b322c3..33366d1b2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example4',\n  styles: `\n  #example4-pagination {\n    position: relative;\n  }\n\n  #example4-pagination.overlay .ht-pagination::before {\n    content: \"\";\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ht-dialog-semi-transparent-background-color);\n    position: absolute;\n    inset: 0;\n    z-index: 1000;\n  }\n  `,\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n    <div class=\"example-controls-container example-controls-below-grid\">\n      <div class=\"controls\">\n        <button\n          type=\"button\"\n          [disabled]=\"isLoading\"\n          (click)=\"loadData()\"\n          [innerHTML]=\"buttonText\">\n        </button>\n      </div>\n    </div>\n    <div style=\"margin-top: 16px;\">\n      <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n    </div>  \n    <div style=\"margin-top: 16px;\">\n      <div id=\"example4-pagination\"></div>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  hotData: any[] = [];\n  isLoading = false;  \n  buttonText = 'Load Data';\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    const hot = this.hotTable.hotInstance;\n    const paginationContainer = document.getElementById('example4-pagination');\n\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    // Add hooks to show and hide the pagination container overlay\n    hot.addHook(\"afterLoadingShow\", () => {\n      paginationContainer.classList.add(\"overlay\");\n    });\n\n    hot.addHook(\"afterLoadingHide\", () => {\n      paginationContainer.classList.remove(\"overlay\");\n    });\n  }\n\n  async loadData(): Promise<void> {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // Get loading plugin instance\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    this.isLoading = true;\n\n    try {\n      // Simulate API call delay\n      await new Promise(resolve => setTimeout(resolve, 3000));\n\n      // Simulated data\n      const data = [\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n      ];\n\n      // Load data into the table\n      hotInstance.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      this.isLoading = false;\n      this.buttonText = 'Reload Data';\n\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        this.isLoading = false;\n      }, 2000);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example4.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example4',\n  styles: `\n  #example4-pagination {\n    position: relative;\n  }\n\n  #example4-pagination.overlay .ht-pagination::before {\n    content: \"\";\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ht-dialog-semi-transparent-background-color);\n    position: absolute;\n    inset: 0;\n    z-index: 1000;\n  }\n  `,\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\"\n      [data]=\"hotData\"\n    >\n    </hot-table>\n    <div class=\"example-controls-container example-controls-below-grid\">\n      <div class=\"controls\">\n        <button\n          type=\"button\"\n          [disabled]=\"isLoading\"\n          (click)=\"loadData()\"\n          [innerHTML]=\"buttonText\">\n        </button>\n      </div>\n    </div>\n    <div style=\"margin-top: 16px;\">\n      <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n    </div>  \n    <div style=\"margin-top: 16px;\">\n      <div id=\"example4-pagination\"></div>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  hotData: any[] = [];\n  isLoading = false;  \n  buttonText = 'Load Data';\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    loading: true,\n  };\n\n  ngAfterViewInit() {\n    const hot = this.hotTable.hotInstance;\n    const paginationContainer = document.getElementById('example4-pagination');\n\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    // Add hooks to show and hide the pagination container overlay\n    hot.addHook(\"afterLoadingShow\", () => {\n      paginationContainer.classList.add(\"overlay\");\n    });\n\n    hot.addHook(\"afterLoadingHide\", () => {\n      paginationContainer.classList.remove(\"overlay\");\n    });\n  }\n\n  async loadData(): Promise<void> {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    // Get loading plugin instance\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    this.isLoading = true;\n\n    try {\n      // Simulate API call delay\n      await new Promise(resolve => setTimeout(resolve, 3000));\n\n      // Simulated data\n      const data = [\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n      ];\n\n      // Load data into the table\n      hotInstance.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      this.isLoading = false;\n      this.buttonText = 'Reload Data';\n\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        this.isLoading = false;\n      }, 2000);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/loading/angular/example4.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.js.json
index 54561619e..9b1c8af1e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Loading · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example1.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Loading · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example1.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.ts.json
index 215ed49ef..3fb073738 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Loading · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example1.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Loading · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example1.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.js.json
index 371acc590..e6420ec66 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Loading · Custom configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example2.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Loading · Custom configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example2.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.ts.json
index 6cb18a454..73d05d02f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Loading · Custom configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example2.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Loading · Custom configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Show loading dialog after initialization\nconst loadingPlugin = hot.getPlugin('loading');\n\nloadingPlugin.show();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example2.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.js.json
index 283614e50..da03ed545 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Loading · Real-world usage · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example3-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example3');\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example3-loadData');\n\n// Simulate data loading\nasync function loadData() {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example3.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Loading · Real-world usage · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example3-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example3');\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example3-loadData');\n\n// Simulate data loading\nasync function loadData() {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/loading/javascript/example3.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.ts.json
index 60e90ad03..88f385b14 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Loading · Real-world usage · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example3-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\n\nconst loadDataButton = document.getElementById('example3-loadData') as HTMLButtonElement;\n\n// Simulate data loading\nasync function loadData(): Promise<void> {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example3.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Loading · Real-world usage · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example3-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example3')!;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\n\nconst loadDataButton = document.getElementById('example3-loadData') as HTMLButtonElement;\n\n// Simulate data loading\nasync function loadData(): Promise<void> {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/loading/javascript/example3.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.js.json
index 5dcace2a4..a44fdd13a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <div id=\"example4-pagination\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example4');\nconst paginationContainer = document.getElementById('example4-pagination');\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  pagination: {\n    uiContainer: paginationContainer,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add hooks to show and hide the pagination container overlay\nhot.addHook('afterLoadingShow', () => {\n  paginationContainer.classList.add('overlay');\n});\nhot.addHook('afterLoadingHide', () => {\n  paginationContainer.classList.remove('overlay');\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example4-loadData');\n\n// Simulate data loading\nasync function loadData() {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example4-pagination {\n  position: relative;\n}\n\n#example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/javascript/example4.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <div id=\"example4-pagination\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example4');\nconst paginationContainer = document.getElementById('example4-pagination');\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  pagination: {\n    uiContainer: paginationContainer,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add hooks to show and hide the pagination container overlay\nhot.addHook('afterLoadingShow', () => {\n  paginationContainer.classList.add('overlay');\n});\nhot.addHook('afterLoadingHide', () => {\n  paginationContainer.classList.remove('overlay');\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example4-loadData');\n\n// Simulate data loading\nasync function loadData() {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example4-pagination {\n  position: relative;\n}\n\n#example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/javascript/example4.js","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.ts.json
index 1467df2e9..dd116903d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <div id=\"example4-pagination\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example4')!;\nconst paginationContainer = document.getElementById('example4-pagination')!;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  pagination: {\n    uiContainer: paginationContainer,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add hooks to show and hide the pagination container overlay\nhot.addHook('afterLoadingShow', () => {\n  paginationContainer.classList.add('overlay');\n});\n\nhot.addHook('afterLoadingHide', () => {\n  paginationContainer.classList.remove('overlay');\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example4-loadData') as HTMLButtonElement;\n\n// Simulate data loading\nasync function loadData(): Promise<void> {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example4-pagination {\n  position: relative;\n}\n\n#example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/javascript/example4.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  \n  <div class=\"example-controls-container example-controls-below-grid\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example4-loadData\">Load Data</button>\n    </div>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <p style=\"padding: 0; font-size: var(--sl-text-xs, 0.75rem); color: var(--sl-color-gray-3, #777777);\">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>\n  </div>\n  <div style=\"margin-top: 16px;\">\n    <div id=\"example4-pagination\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.getElementById('example4')!;\nconst paginationContainer = document.getElementById('example4-pagination')!;\n\nconst hot = new Handsontable(container, {\n  data: [],\n  colHeaders: true,\n  rowHeaders: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  loading: true,\n  pagination: {\n    uiContainer: paginationContainer,\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add hooks to show and hide the pagination container overlay\nhot.addHook('afterLoadingShow', () => {\n  paginationContainer.classList.add('overlay');\n});\n\nhot.addHook('afterLoadingHide', () => {\n  paginationContainer.classList.remove('overlay');\n});\n\n// Get loading plugin instance\nconst loadingPlugin = hot.getPlugin('loading');\nconst loadDataButton = document.getElementById('example4-loadData') as HTMLButtonElement;\n\n// Simulate data loading\nasync function loadData(): Promise<void> {\n  // Show loading dialog\n  loadingPlugin.show();\n  loadDataButton.disabled = true;\n\n  try {\n    // Simulate API call delay\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    // Simulated data\n    const data = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    // Load data into the table\n    hot.loadData(data);\n\n    // Hide loading dialog\n    loadingPlugin.hide();\n    loadDataButton.disabled = false;\n    loadDataButton.innerHTML = 'Reload Data';\n  } catch (error) {\n    // Handle error\n    setTimeout(() => {\n      loadingPlugin.hide();\n      loadDataButton.disabled = false;\n      loadDataButton.innerHTML = 'Load Data';\n    }, 2000);\n  }\n}\n\nloadDataButton.addEventListener('click', loadData);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example4-pagination {\n  position: relative;\n}\n\n#example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/javascript/example4.ts","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example1.tsx.json
index a2fc0730c..9c39a7e80 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Loading · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('loading').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      loading={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example1.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Loading · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('loading').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      loading={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example1.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example2.tsx.json
index 149873ef8..8b9bffc82 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Loading · Custom configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('loading').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      loading={{\n        icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n        title: 'Processing Data...',\n        description: 'Please wait while we load your inventory data...',\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example2.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Loading · Custom configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    hotInstance.getPlugin('loading').show();\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      loading={{\n        icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n        title: 'Processing Data...',\n        description: 'Please wait while we load your inventory data...',\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example2.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example3.tsx.json
index 6977b8923..30f6078bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Loading · Real-world usage · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst Table = ({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {\n  return (\n    <>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        loading={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const [data, setData] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Simulate data loading\n  const loadData = async () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    setIsLoading(true);\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    try {\n      // Simulate API call delay\n      await new Promise((resolve) => setTimeout(resolve, 3000));\n\n      // Simulated data\n      setData([\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      ]);\n\n      // Load data into the table\n      hotTableRef.current?.hotInstance?.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      setIsLoading(false);\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        setIsLoading(false);\n      }, 2000);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" id=\"loadData\" onClick={loadData} disabled={isLoading}>\n            {data.length > 0 ? 'Reload Data' : 'Load Data'}\n          </button>\n        </div>\n      </div>\n      <Table hotTableRef={hotTableRef} data={data} />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example3.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Loading · Real-world usage · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst Table = ({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {\n  return (\n    <>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        loading={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const [data, setData] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Simulate data loading\n  const loadData = async () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    setIsLoading(true);\n\n    // Show loading dialog\n    loadingPlugin.show();\n\n    try {\n      // Simulate API call delay\n      await new Promise((resolve) => setTimeout(resolve, 3000));\n\n      // Simulated data\n      setData([\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      ]);\n\n      // Load data into the table\n      hotTableRef.current?.hotInstance?.loadData(data);\n\n      // Hide loading dialog\n      loadingPlugin.hide();\n\n      setIsLoading(false);\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        setIsLoading(false);\n      }, 2000);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" id=\"loadData\" onClick={loadData} disabled={isLoading}>\n            {data.length > 0 ? 'Reload Data' : 'Load Data'}\n          </button>\n        </div>\n      </div>\n      <Table hotTableRef={hotTableRef} data={data} />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/loading/react/example3.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example4.tsx.json
index 798dafd99..adc8e514b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst Table = React.memo(({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {\n  return (\n    <>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        loading={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n});\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const paginationContainerRef = useRef<HTMLDivElement>(null);\n  const [data, setData] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() => {\n    const paginationContainer = paginationContainerRef?.current;\n    const hot = hotTableRef.current?.hotInstance;\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    // Add hooks to show and hide the pagination container overlay\n    hot.addHook('afterLoadingShow', () => {\n      paginationContainer.classList.add('overlay');\n    });\n\n    hot.addHook('afterLoadingHide', () => {\n      paginationContainer.classList.remove('overlay');\n    });\n  }, []);\n\n  // Simulate data loading\n  const loadData = async () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    setIsLoading(true);\n    // Show loading dialog\n    loadingPlugin.show();\n\n    try {\n      // Simulate API call delay\n      await new Promise((resolve) => setTimeout(resolve, 3000));\n      // Simulated data\n      setData([\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n      ]);\n      // Load data into the table\n      hotTableRef.current?.hotInstance?.loadData(data);\n      // Hide loading dialog\n      loadingPlugin.hide();\n      setIsLoading(false);\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        setIsLoading(false);\n      }, 2000);\n    }\n  };\n\n  return (\n    <>\n      <Table hotTableRef={hotTableRef} data={data} />\n      <div className=\"example-controls-container example-controls-below-grid\">\n        <div className=\"controls\">\n          <button type=\"button\" id=\"loadData\" onClick={loadData} disabled={isLoading}>\n            {data.length > 0 ? 'Reload Data' : 'Load Data'}\n          </button>\n        </div>\n      </div>\n      <div style={{ marginTop: '16px' }}>\n        <p style={{ padding: 0, fontSize: 'var(--sl-text-xs, 0.75rem)', color: 'var(--sl-color-gray-3, #777777)' }}>\n          This is a demonstration of how to use the Loading plugin with pagination in external container. You need to\n          create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and{' '}\n          <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.\n        </p>\n      </div>\n      <div style={{ marginTop: '16px' }}>\n        <div className=\"example4-pagination\" ref={paginationContainerRef}></div>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example4-pagination {\n  position: relative;\n}\n\n.example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/react/example4.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst Table = React.memo(({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {\n  return (\n    <>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        autoRowSize={true}\n        loading={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n});\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const paginationContainerRef = useRef<HTMLDivElement>(null);\n  const [data, setData] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() => {\n    const paginationContainer = paginationContainerRef?.current;\n    const hot = hotTableRef.current?.hotInstance;\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    // Add hooks to show and hide the pagination container overlay\n    hot.addHook('afterLoadingShow', () => {\n      paginationContainer.classList.add('overlay');\n    });\n\n    hot.addHook('afterLoadingHide', () => {\n      paginationContainer.classList.remove('overlay');\n    });\n  }, []);\n\n  // Simulate data loading\n  const loadData = async () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const loadingPlugin = hotInstance.getPlugin('loading');\n\n    setIsLoading(true);\n    // Show loading dialog\n    loadingPlugin.show();\n\n    try {\n      // Simulate API call delay\n      await new Promise((resolve) => setTimeout(resolve, 3000));\n      // Simulated data\n      setData([\n        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n      ]);\n      // Load data into the table\n      hotTableRef.current?.hotInstance?.loadData(data);\n      // Hide loading dialog\n      loadingPlugin.hide();\n      setIsLoading(false);\n    } catch (error) {\n      // Handle error\n      setTimeout(() => {\n        loadingPlugin.hide();\n        setIsLoading(false);\n      }, 2000);\n    }\n  };\n\n  return (\n    <>\n      <Table hotTableRef={hotTableRef} data={data} />\n      <div className=\"example-controls-container example-controls-below-grid\">\n        <div className=\"controls\">\n          <button type=\"button\" id=\"loadData\" onClick={loadData} disabled={isLoading}>\n            {data.length > 0 ? 'Reload Data' : 'Load Data'}\n          </button>\n        </div>\n      </div>\n      <div style={{ marginTop: '16px' }}>\n        <p style={{ padding: 0, fontSize: 'var(--sl-text-xs, 0.75rem)', color: 'var(--sl-color-gray-3, #777777)' }}>\n          This is a demonstration of how to use the Loading plugin with pagination in external container. You need to\n          create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and{' '}\n          <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.\n        </p>\n      </div>\n      <div style={{ marginTop: '16px' }}>\n        <div className=\"example4-pagination\" ref={paginationContainerRef}></div>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example4-pagination {\n  position: relative;\n}\n\n.example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/react/example4.tsx","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example1.vue.json
index 55fe7e8ac..1bf3755c0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Loading · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('loading').show();\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example1.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Loading · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('loading').show();\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example1.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/loading","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example2.vue.json
index 09184c699..2568fd37f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Loading · Custom configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('loading').show();\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example2.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Loading · Custom configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: {\n    icon: '<svg class=\"ht-loading__icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M15 8a7 7 0 1 1-3.5-6.062\"></path></svg>',\n    title: 'Processing Data...',\n    description: 'Please wait while we load your inventory data...',\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.getPlugin('loading').show();\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example2.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/loading","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example3.vue.json
index 031e34689..3820e233e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Loading · Real-world usage · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype InventoryRow = {\n  model: string;\n  price: number;\n  sellDate: string;\n  sellTime: string;\n  inStock: boolean;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst tableData = ref<InventoryRow[]>([]);\nconst isLoading = ref(false);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData.value,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function loadData(): Promise<void> {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const loadingPlugin = hotInstance.getPlugin('loading');\n\n  isLoading.value = true;\n  loadingPlugin.show();\n\n  try {\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    const loadedData: InventoryRow[] = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    tableData.value = loadedData;\n    hotInstance.loadData(loadedData);\n    loadingPlugin.hide();\n    isLoading.value = false;\n  } catch {\n    setTimeout(() => {\n      loadingPlugin.hide();\n      isLoading.value = false;\n    }, 2000);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" id=\"loadData\" :disabled=\"isLoading\" @click=\"loadData\">\n          {{ tableData.length > 0 ? 'Reload Data' : 'Load Data' }}\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example3.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Loading · Real-world usage · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype InventoryRow = {\n  model: string;\n  price: number;\n  sellDate: string;\n  sellTime: string;\n  inStock: boolean;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst tableData = ref<InventoryRow[]>([]);\nconst isLoading = ref(false);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData.value,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nasync function loadData(): Promise<void> {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const loadingPlugin = hotInstance.getPlugin('loading');\n\n  isLoading.value = true;\n  loadingPlugin.show();\n\n  try {\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    const loadedData: InventoryRow[] = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    ];\n\n    tableData.value = loadedData;\n    hotInstance.loadData(loadedData);\n    loadingPlugin.hide();\n    isLoading.value = false;\n  } catch {\n    setTimeout(() => {\n      loadingPlugin.hide();\n      isLoading.value = false;\n    }, 2000);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" id=\"loadData\" :disabled=\"isLoading\" @click=\"loadData\">\n          {{ tableData.length > 0 ? 'Reload Data' : 'Load Data' }}\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/dialog/loading/vue/example3.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example3","exampleTitle":"Real-world usage","docPermalink":"/loading","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example4.vue.json
index f6adbf4f6..a07a559b4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__loading__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, nextTick, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype InventoryRow = {\n  model: string;\n  price: number;\n  sellDate: string;\n  sellTime: string;\n  inStock: boolean;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst paginationContainerRef = useTemplateRef<HTMLDivElement>('paginationContainerRef');\nconst tableData = ref<InventoryRow[]>([]);\nconst isLoading = ref(false);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData.value,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  nextTick(() => {\n    const paginationContainer = paginationContainerRef.value;\n    const hot = hotRef.value?.hotInstance;\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    hot.addHook('afterLoadingShow', () => {\n      paginationContainer.classList.add('overlay');\n    });\n\n    hot.addHook('afterLoadingHide', () => {\n      paginationContainer.classList.remove('overlay');\n    });\n  });\n});\n\nasync function loadData(): Promise<void> {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const loadingPlugin = hotInstance.getPlugin('loading');\n\n  isLoading.value = true;\n  loadingPlugin.show();\n\n  try {\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    const loadedData: InventoryRow[] = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    tableData.value = loadedData;\n    hotInstance.loadData(loadedData);\n    loadingPlugin.hide();\n    isLoading.value = false;\n  } catch {\n    setTimeout(() => {\n      loadingPlugin.hide();\n      isLoading.value = false;\n    }, 2000);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n    <div class=\"example-controls-container example-controls-below-grid\">\n      <div class=\"controls\">\n        <button type=\"button\" id=\"loadData\" :disabled=\"isLoading\" @click=\"loadData\">\n          {{ tableData.length > 0 ? 'Reload Data' : 'Load Data' }}\n        </button>\n      </div>\n    </div>\n    <div style=\"margin-top: 16px\">\n      <p style=\"padding: 0; font-size: var(--sl-text-xs); color: var(--sl-color-gray-3)\">\n        This is a demonstration of how to use the Loading plugin with pagination in external container. You need to\n        create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and\n        <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.\n      </p>\n    </div>\n    <div style=\"margin-top: 16px\">\n      <div ref=\"paginationContainerRef\" class=\"example4-pagination\" />\n    </div>\n  </div>\n</template>","/src/styles.css":".example4-pagination {\n  position: relative;\n}\n\n.example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/vue/example4.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Loading · Loading with Pagination plugin · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, nextTick, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype InventoryRow = {\n  model: string;\n  price: number;\n  sellDate: string;\n  sellTime: string;\n  inStock: boolean;\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst paginationContainerRef = useTemplateRef<HTMLDivElement>('paginationContainerRef');\nconst tableData = ref<InventoryRow[]>([]);\nconst isLoading = ref(false);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData.value,\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  loading: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  nextTick(() => {\n    const paginationContainer = paginationContainerRef.value;\n    const hot = hotRef.value?.hotInstance;\n\n    if (!hot || !paginationContainer) {\n      return;\n    }\n\n    hot.updateSettings({\n      pagination: {\n        uiContainer: paginationContainer,\n      },\n    });\n\n    hot.addHook('afterLoadingShow', () => {\n      paginationContainer.classList.add('overlay');\n    });\n\n    hot.addHook('afterLoadingHide', () => {\n      paginationContainer.classList.remove('overlay');\n    });\n  });\n});\n\nasync function loadData(): Promise<void> {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (!hotInstance) {\n    return;\n  }\n\n  const loadingPlugin = hotInstance.getPlugin('loading');\n\n  isLoading.value = true;\n  loadingPlugin.show();\n\n  try {\n    await new Promise((resolve) => setTimeout(resolve, 3000));\n\n    const loadedData: InventoryRow[] = [\n      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    ];\n\n    tableData.value = loadedData;\n    hotInstance.loadData(loadedData);\n    loadingPlugin.hide();\n    isLoading.value = false;\n  } catch {\n    setTimeout(() => {\n      loadingPlugin.hide();\n      isLoading.value = false;\n    }, 2000);\n  }\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"130\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"90\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n    <div class=\"example-controls-container example-controls-below-grid\">\n      <div class=\"controls\">\n        <button type=\"button\" id=\"loadData\" :disabled=\"isLoading\" @click=\"loadData\">\n          {{ tableData.length > 0 ? 'Reload Data' : 'Load Data' }}\n        </button>\n      </div>\n    </div>\n    <div style=\"margin-top: 16px\">\n      <p style=\"padding: 0; font-size: var(--sl-text-xs); color: var(--sl-color-gray-3)\">\n        This is a demonstration of how to use the Loading plugin with pagination in external container. You need to\n        create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and\n        <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.\n      </p>\n    </div>\n    <div style=\"margin-top: 16px\">\n      <div ref=\"paginationContainerRef\" class=\"example4-pagination\" />\n    </div>\n  </div>\n</template>","/src/styles.css":".example4-pagination {\n  position: relative;\n}\n\n.example4-pagination.overlay .ht-pagination::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--ht-dialog-semi-transparent-background-color);\n  position: absolute;\n  inset: 0;\n  z-index: 1000;\n}"},"docsPath":"guides/dialog/loading/vue/example4.vue","breadcrumb":["Dialog","Loading"],"guide":"guides/dialog/loading/loading.md","guideTitle":"Loading","exampleId":"example4","exampleTitle":"Loading with Pagination plugin","docPermalink":"/loading","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example1.ts.json
index 90a90ca61..3915db23c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Notification · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <notification-example></notification-example>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'notification-example',\n  template: `<hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n    ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n    ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n    ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n    ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n    ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n    ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n    ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n    ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n    ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n    ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n    ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n    ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n    ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n    ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n    columns: [\n      { data: 0, type: 'text', width: 200 },\n      { data: 1, type: 'text', width: 105 },\n      { data: 2, type: 'text', width: 72 },\n      { data: 3, type: 'text', width: 120 },\n      { data: 4, type: 'text', width: 80 },\n      { data: 5, type: 'text', width: 100 },\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 420,\n    notification: true,\n    afterInit(this: Handsontable) {\n      const notification = this.getPlugin('notification');\n\n      notification.showMessage({\n        title: 'Top start',\n        message: 'Info toast in the top-start corner.',\n        variant: 'info',\n        position: 'top-start',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Top end',\n        message: 'Success toast in the top-end corner.',\n        variant: 'success',\n        position: 'top-end',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Bottom start',\n        message: 'Warning toast in the bottom-start corner.',\n        variant: 'warning',\n        position: 'bottom-start',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Bottom end',\n        message: 'Error toast in the bottom-end corner.',\n        variant: 'error',\n        position: 'bottom-end',\n        duration: 0,\n      });\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/notification/angular/example1.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Notification · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <notification-example></notification-example>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'notification-example',\n  template: `<hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n    ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n    ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n    ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n    ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n    ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n    ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n    ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n    ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n    ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n    ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n    ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n    ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n    ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n    ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n    columns: [\n      { data: 0, type: 'text', width: 200 },\n      { data: 1, type: 'text', width: 105 },\n      { data: 2, type: 'text', width: 72 },\n      { data: 3, type: 'text', width: 120 },\n      { data: 4, type: 'text', width: 80 },\n      { data: 5, type: 'text', width: 100 },\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 420,\n    notification: true,\n    afterInit(this: Handsontable) {\n      const notification = this.getPlugin('notification');\n\n      notification.showMessage({\n        title: 'Top start',\n        message: 'Info toast in the top-start corner.',\n        variant: 'info',\n        position: 'top-start',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Top end',\n        message: 'Success toast in the top-end corner.',\n        variant: 'success',\n        position: 'top-end',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Bottom start',\n        message: 'Warning toast in the bottom-start corner.',\n        variant: 'warning',\n        position: 'bottom-start',\n        duration: 0,\n      });\n      notification.showMessage({\n        title: 'Bottom end',\n        message: 'Error toast in the bottom-end corner.',\n        variant: 'error',\n        position: 'bottom-end',\n        duration: 0,\n      });\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/notification/angular/example1.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example2.ts.json
index e434ab0c0..0d03a8100 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <notification-example-2></notification-example-2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule, HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'notification-example-2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onSave()\">Save</button>\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onSyncError()\">Sync error</button>\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onLowStock()\">Low stock</button>\n      </div>\n    </div>\n    <hot-table #hotTable [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable', { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n    ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n    ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n    ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n    ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n    ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n    ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n    ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n    columns: [\n      { data: 0, type: 'text', width: 90 },\n      { data: 1, type: 'text', width: 200 },\n      { data: 2, type: 'numeric', width: 100 },\n      { data: 3, type: 'numeric', width: 95 },\n      { data: 4, type: 'text', width: 70 },\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 280,\n    notification: true,\n  };\n\n  onSave(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getPlugin('notification').showMessage({\n      title: 'Saved',\n      message: 'Inventory updates were written.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 2500,\n    });\n  }\n\n  onSyncError(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const plugin = hot.getPlugin('notification');\n\n    plugin.showMessage({\n      title: 'Sync failed',\n      message: 'The service is unavailable. Retry when your connection is stable.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n      actions: [\n        {\n          label: 'Retry',\n          type: 'primary',\n          callback: () => {\n            plugin.hideAll();\n            plugin.showMessage({\n              message: 'Sync completed.',\n              variant: 'success',\n              position: 'bottom-end',\n            });\n          },\n        },\n        { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n      ],\n    });\n  }\n\n  onLowStock(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getPlugin('notification').showMessage({\n      title: 'Review quantities',\n      message:\n        'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n      variant: 'warning',\n      position: 'top-start',\n      duration: 6000,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/notification/angular/example2.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"Angular"}
+{"framework":"angular","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <notification-example-2></notification-example-2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule, HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'notification-example-2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onSave()\">Save</button>\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onSyncError()\">Sync error</button>\n        <button type=\"button\" class=\"button button--primary\" (click)=\"onLowStock()\">Low stock</button>\n      </div>\n    </div>\n    <hot-table #hotTable [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable', { static: false }) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n    ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n    ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n    ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n    ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n    ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n    ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n    ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n    columns: [\n      { data: 0, type: 'text', width: 90 },\n      { data: 1, type: 'text', width: 200 },\n      { data: 2, type: 'numeric', width: 100 },\n      { data: 3, type: 'numeric', width: 95 },\n      { data: 4, type: 'text', width: 70 },\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 280,\n    notification: true,\n  };\n\n  onSave(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getPlugin('notification').showMessage({\n      title: 'Saved',\n      message: 'Inventory updates were written.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 2500,\n    });\n  }\n\n  onSyncError(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const plugin = hot.getPlugin('notification');\n\n    plugin.showMessage({\n      title: 'Sync failed',\n      message: 'The service is unavailable. Retry when your connection is stable.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n      actions: [\n        {\n          label: 'Retry',\n          type: 'primary',\n          callback: () => {\n            plugin.hideAll();\n            plugin.showMessage({\n              message: 'Sync completed.',\n              variant: 'success',\n              position: 'bottom-end',\n            });\n          },\n        },\n        { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n      ],\n    });\n  }\n\n  onLowStock(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getPlugin('notification').showMessage({\n      title: 'Review quantities',\n      message:\n        'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n      variant: 'warning',\n      position: 'top-start',\n      duration: 6000,\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/dialog/notification/angular/example2.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.js.json
index 19305ab4e..155c8623f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Notification · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  [\n    'Review pricing sheet',\n    'Draft',\n    'Apr 12',\n    'Morgan Lee',\n    'Medium',\n    'Finance',\n  ],\n  [\n    'Ship partner samples',\n    'In progress',\n    'Apr 14',\n    'Jordan Kim',\n    'High',\n    'Sales',\n  ],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  [\n    'New client onboarding',\n    'Blocked',\n    'Apr 18',\n    'Riley Patel',\n    'High',\n    'Success',\n  ],\n  [\n    'Update documentation',\n    'Draft',\n    'Apr 20',\n    'Casey Ruiz',\n    'Low',\n    'Engineering',\n  ],\n  [\n    'Audit vendor contracts',\n    'In progress',\n    'Apr 22',\n    'Morgan Lee',\n    'Medium',\n    'Legal',\n  ],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  [\n    'Fix login timeout bug',\n    'In progress',\n    'Apr 16',\n    'Devon Walsh',\n    'High',\n    'Engineering',\n  ],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  [\n    'Migrate legacy CRM rows',\n    'Blocked',\n    'Apr 28',\n    'Alex Rivera',\n    'High',\n    'Engineering',\n  ],\n  [\n    'Schedule user interviews',\n    'Draft',\n    'Apr 19',\n    'Riley Patel',\n    'Medium',\n    'Product',\n  ],\n  [\n    'Approve expense policy',\n    'In progress',\n    'Apr 21',\n    'Morgan Lee',\n    'Low',\n    'Finance',\n  ],\n  [\n    'Localize help center',\n    'Draft',\n    'May 2',\n    'Sam Okafor',\n    'Medium',\n    'Marketing',\n  ],\n  [\n    'Load test checkout API',\n    'In progress',\n    'Apr 17',\n    'Devon Walsh',\n    'High',\n    'Engineering',\n  ],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst notification = hot.getPlugin('notification');\n\nnotification.showMessage({\n  title: 'Top start',\n  message: 'Info toast in the top-start corner.',\n  variant: 'info',\n  position: 'top-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Top end',\n  message: 'Success toast in the top-end corner.',\n  variant: 'success',\n  position: 'top-end',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom start',\n  message: 'Warning toast in the bottom-start corner.',\n  variant: 'warning',\n  position: 'bottom-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom end',\n  message: 'Error toast in the bottom-end corner.',\n  variant: 'error',\n  position: 'bottom-end',\n  duration: 0,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/notification/javascript/example1.js","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Notification · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  [\n    'Review pricing sheet',\n    'Draft',\n    'Apr 12',\n    'Morgan Lee',\n    'Medium',\n    'Finance',\n  ],\n  [\n    'Ship partner samples',\n    'In progress',\n    'Apr 14',\n    'Jordan Kim',\n    'High',\n    'Sales',\n  ],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  [\n    'New client onboarding',\n    'Blocked',\n    'Apr 18',\n    'Riley Patel',\n    'High',\n    'Success',\n  ],\n  [\n    'Update documentation',\n    'Draft',\n    'Apr 20',\n    'Casey Ruiz',\n    'Low',\n    'Engineering',\n  ],\n  [\n    'Audit vendor contracts',\n    'In progress',\n    'Apr 22',\n    'Morgan Lee',\n    'Medium',\n    'Legal',\n  ],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  [\n    'Fix login timeout bug',\n    'In progress',\n    'Apr 16',\n    'Devon Walsh',\n    'High',\n    'Engineering',\n  ],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  [\n    'Migrate legacy CRM rows',\n    'Blocked',\n    'Apr 28',\n    'Alex Rivera',\n    'High',\n    'Engineering',\n  ],\n  [\n    'Schedule user interviews',\n    'Draft',\n    'Apr 19',\n    'Riley Patel',\n    'Medium',\n    'Product',\n  ],\n  [\n    'Approve expense policy',\n    'In progress',\n    'Apr 21',\n    'Morgan Lee',\n    'Low',\n    'Finance',\n  ],\n  [\n    'Localize help center',\n    'Draft',\n    'May 2',\n    'Sam Okafor',\n    'Medium',\n    'Marketing',\n  ],\n  [\n    'Load test checkout API',\n    'In progress',\n    'Apr 17',\n    'Devon Walsh',\n    'High',\n    'Engineering',\n  ],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst container = document.getElementById('example1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst notification = hot.getPlugin('notification');\n\nnotification.showMessage({\n  title: 'Top start',\n  message: 'Info toast in the top-start corner.',\n  variant: 'info',\n  position: 'top-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Top end',\n  message: 'Success toast in the top-end corner.',\n  variant: 'success',\n  position: 'top-end',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom start',\n  message: 'Warning toast in the bottom-start corner.',\n  variant: 'warning',\n  position: 'bottom-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom end',\n  message: 'Error toast in the bottom-end corner.',\n  variant: 'error',\n  position: 'bottom-end',\n  duration: 0,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/notification/javascript/example1.js","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.ts.json
index 636e26d8d..0b41a95d6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Notification · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst notification = hot.getPlugin('notification');\n\nnotification.showMessage({\n  title: 'Top start',\n  message: 'Info toast in the top-start corner.',\n  variant: 'info',\n  position: 'top-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Top end',\n  message: 'Success toast in the top-end corner.',\n  variant: 'success',\n  position: 'top-end',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom start',\n  message: 'Warning toast in the bottom-start corner.',\n  variant: 'warning',\n  position: 'bottom-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom end',\n  message: 'Error toast in the bottom-end corner.',\n  variant: 'error',\n  position: 'bottom-end',\n  duration: 0,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/notification/javascript/example1.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Notification · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst container = document.getElementById('example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst notification = hot.getPlugin('notification');\n\nnotification.showMessage({\n  title: 'Top start',\n  message: 'Info toast in the top-start corner.',\n  variant: 'info',\n  position: 'top-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Top end',\n  message: 'Success toast in the top-end corner.',\n  variant: 'success',\n  position: 'top-end',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom start',\n  message: 'Warning toast in the bottom-start corner.',\n  variant: 'warning',\n  position: 'bottom-start',\n  duration: 0,\n});\nnotification.showMessage({\n  title: 'Bottom end',\n  message: 'Error toast in the bottom-end corner.',\n  variant: 'error',\n  position: 'bottom-end',\n  duration: 0,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/notification/javascript/example1.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.js.json
index ef64d0291..64457b69b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example2-save\" class=\"button button--primary\">Save</button>\n      <button type=\"button\" id=\"example2-sync-error\" class=\"button button--primary\">Sync error</button>\n      <button type=\"button\" id=\"example2-low-stock\" class=\"button button--primary\">Low stock</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst container = document.getElementById('example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('notification');\n\ndocument.getElementById('example2-save').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n});\n\ndocument.getElementById('example2-sync-error').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Sync failed',\n    message:\n      'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n});\n\ndocument.getElementById('example2-low-stock').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/notification/javascript/example2.js","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example2-save\" class=\"button button--primary\">Save</button>\n      <button type=\"button\" id=\"example2-sync-error\" class=\"button button--primary\">Sync error</button>\n      <button type=\"button\" id=\"example2-low-stock\" class=\"button button--primary\">Low stock</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst container = document.getElementById('example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('notification');\n\ndocument.getElementById('example2-save').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n});\n\ndocument.getElementById('example2-sync-error').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Sync failed',\n    message:\n      'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n});\n\ndocument.getElementById('example2-low-stock').addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/dialog/notification/javascript/example2.js","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.ts.json
index 225011c7d..478054a40 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example2-save\" class=\"button button--primary\">Save</button>\n      <button type=\"button\" id=\"example2-sync-error\" class=\"button button--primary\">Sync error</button>\n      <button type=\"button\" id=\"example2-low-stock\" class=\"button button--primary\">Low stock</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('notification');\n\ndocument.getElementById('example2-save')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n});\n\ndocument.getElementById('example2-sync-error')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Sync failed',\n    message: 'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n});\n\ndocument.getElementById('example2-low-stock')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/notification/javascript/example2.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example2-save\" class=\"button button--primary\">Save</button>\n      <button type=\"button\" id=\"example2-sync-error\" class=\"button button--primary\">Sync error</button>\n      <button type=\"button\" id=\"example2-low-stock\" class=\"button button--primary\">Low stock</button>\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst container = document.getElementById('example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('notification');\n\ndocument.getElementById('example2-save')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n});\n\ndocument.getElementById('example2-sync-error')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Sync failed',\n    message: 'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n});\n\ndocument.getElementById('example2-low-stock')!.addEventListener('click', () => {\n  plugin.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/dialog/notification/javascript/example2.ts","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example1.tsx.json
index c486b8aed..a30312ff8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Notification · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst columns: Handsontable.ColumnSettings[] = [\n  { data: 0, type: 'text', width: 200 },\n  { data: 1, type: 'text', width: 105 },\n  { data: 2, type: 'text', width: 72 },\n  { data: 3, type: 'text', width: 120 },\n  { data: 4, type: 'text', width: 80 },\n  { data: 5, type: 'text', width: 100 },\n];\n\nconst ExampleComponent: React.FC = () => {\n  const hotTableRef = useRef<HotTable>(null);\n\n  useEffect(() => {\n    const hot = hotTableRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const notification = hot.getPlugin('notification');\n\n    notification.showMessage({\n      title: 'Top start',\n      message: 'Info toast in the top-start corner.',\n      variant: 'info',\n      position: 'top-start',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Top end',\n      message: 'Success toast in the top-end corner.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Bottom start',\n      message: 'Warning toast in the bottom-start corner.',\n      variant: 'warning',\n      position: 'bottom-start',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Bottom end',\n      message: 'Error toast in the bottom-end corner.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      columns={columns}\n      colHeaders={['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team']}\n      rowHeaders\n      width=\"100%\"\n      height={420}\n      licenseKey=\"non-commercial-and-evaluation\"\n      notification\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/notification/react/example1.tsx","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Notification · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst columns: Handsontable.ColumnSettings[] = [\n  { data: 0, type: 'text', width: 200 },\n  { data: 1, type: 'text', width: 105 },\n  { data: 2, type: 'text', width: 72 },\n  { data: 3, type: 'text', width: 120 },\n  { data: 4, type: 'text', width: 80 },\n  { data: 5, type: 'text', width: 100 },\n];\n\nconst ExampleComponent: React.FC = () => {\n  const hotTableRef = useRef<HotTable>(null);\n\n  useEffect(() => {\n    const hot = hotTableRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const notification = hot.getPlugin('notification');\n\n    notification.showMessage({\n      title: 'Top start',\n      message: 'Info toast in the top-start corner.',\n      variant: 'info',\n      position: 'top-start',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Top end',\n      message: 'Success toast in the top-end corner.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Bottom start',\n      message: 'Warning toast in the bottom-start corner.',\n      variant: 'warning',\n      position: 'bottom-start',\n      duration: 0,\n    });\n    notification.showMessage({\n      title: 'Bottom end',\n      message: 'Error toast in the bottom-end corner.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n    });\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotTableRef}\n      data={data}\n      columns={columns}\n      colHeaders={['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team']}\n      rowHeaders\n      width=\"100%\"\n      height={420}\n      licenseKey=\"non-commercial-and-evaluation\"\n      notification\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/notification/react/example1.tsx","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example2.tsx.json
index 0927f77b2..2b3605986 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst columns: Handsontable.ColumnSettings[] = [\n  { data: 0, type: 'text', width: 90 },\n  { data: 1, type: 'text', width: 200 },\n  { data: 2, type: 'numeric', width: 100 },\n  { data: 3, type: 'numeric', width: 95 },\n  { data: 4, type: 'text', width: 70 },\n];\n\nconst ExampleComponent: React.FC = () => {\n  const hotTableRef = useRef<HotTable>(null);\n\n  const getPlugin = () => hotTableRef.current?.hotInstance?.getPlugin('notification');\n\n  const onSave = () => {\n    getPlugin()?.showMessage({\n      title: 'Saved',\n      message: 'Inventory updates were written.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 2500,\n    });\n  };\n\n  const onSyncError = () => {\n    const plugin = getPlugin();\n\n    plugin?.showMessage({\n      title: 'Sync failed',\n      message: 'The service is unavailable. Retry when your connection is stable.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n      actions: [\n        {\n          label: 'Retry',\n          type: 'primary',\n          callback: () => {\n            plugin.hideAll();\n            plugin.showMessage({\n              message: 'Sync completed.',\n              variant: 'success',\n              position: 'bottom-end',\n            });\n          },\n        },\n        { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n      ],\n    });\n  };\n\n  const onLowStock = () => {\n    getPlugin()?.showMessage({\n      title: 'Review quantities',\n      message:\n        'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n      variant: 'warning',\n      position: 'top-start',\n      duration: 6000,\n    });\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" className=\"button button--primary\" onClick={onSave}>Save</button>\n          <button type=\"button\" className=\"button button--primary\" onClick={onSyncError}>Sync error</button>\n          <button type=\"button\" className=\"button button--primary\" onClick={onLowStock}>Low stock</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        columns={columns}\n        colHeaders={['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin']}\n        rowHeaders\n        width=\"100%\"\n        height={280}\n        licenseKey=\"non-commercial-and-evaluation\"\n        notification\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/notification/react/example2.tsx","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"React (TS)"}
+{"framework":"react","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst columns: Handsontable.ColumnSettings[] = [\n  { data: 0, type: 'text', width: 90 },\n  { data: 1, type: 'text', width: 200 },\n  { data: 2, type: 'numeric', width: 100 },\n  { data: 3, type: 'numeric', width: 95 },\n  { data: 4, type: 'text', width: 70 },\n];\n\nconst ExampleComponent: React.FC = () => {\n  const hotTableRef = useRef<HotTable>(null);\n\n  const getPlugin = () => hotTableRef.current?.hotInstance?.getPlugin('notification');\n\n  const onSave = () => {\n    getPlugin()?.showMessage({\n      title: 'Saved',\n      message: 'Inventory updates were written.',\n      variant: 'success',\n      position: 'top-end',\n      duration: 2500,\n    });\n  };\n\n  const onSyncError = () => {\n    const plugin = getPlugin();\n\n    plugin?.showMessage({\n      title: 'Sync failed',\n      message: 'The service is unavailable. Retry when your connection is stable.',\n      variant: 'error',\n      position: 'bottom-end',\n      duration: 0,\n      actions: [\n        {\n          label: 'Retry',\n          type: 'primary',\n          callback: () => {\n            plugin.hideAll();\n            plugin.showMessage({\n              message: 'Sync completed.',\n              variant: 'success',\n              position: 'bottom-end',\n            });\n          },\n        },\n        { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n      ],\n    });\n  };\n\n  const onLowStock = () => {\n    getPlugin()?.showMessage({\n      title: 'Review quantities',\n      message:\n        'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n      variant: 'warning',\n      position: 'top-start',\n      duration: 6000,\n    });\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" className=\"button button--primary\" onClick={onSave}>Save</button>\n          <button type=\"button\" className=\"button button--primary\" onClick={onSyncError}>Sync error</button>\n          <button type=\"button\" className=\"button button--primary\" onClick={onLowStock}>Low stock</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        data={data}\n        columns={columns}\n        colHeaders={['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin']}\n        rowHeaders\n        width=\"100%\"\n        height={280}\n        licenseKey=\"non-commercial-and-evaluation\"\n        notification\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/dialog/notification/react/example2.tsx","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example1.vue.json
index 4f9dd8b0d..8298c06a0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Notification · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const notification = hot.getPlugin('notification');\n\n  notification.showMessage({\n    title: 'Top start',\n    message: 'Info toast in the top-start corner.',\n    variant: 'info',\n    position: 'top-start',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Top end',\n    message: 'Success toast in the top-end corner.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Bottom start',\n    message: 'Warning toast in the bottom-start corner.',\n    variant: 'warning',\n    position: 'bottom-start',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Bottom end',\n    message: 'Error toast in the bottom-end corner.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n  });\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/dialog/notification/vue/example1.vue","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Notification · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Review pricing sheet', 'Draft', 'Apr 12', 'Morgan Lee', 'Medium', 'Finance'],\n  ['Ship partner samples', 'In progress', 'Apr 14', 'Jordan Kim', 'High', 'Sales'],\n  ['Q2 revenue forecast', 'Done', 'Apr 8', 'Avery Chen', 'Low', 'Finance'],\n  ['New client onboarding', 'Blocked', 'Apr 18', 'Riley Patel', 'High', 'Success'],\n  ['Update documentation', 'Draft', 'Apr 20', 'Casey Ruiz', 'Low', 'Engineering'],\n  ['Audit vendor contracts', 'In progress', 'Apr 22', 'Morgan Lee', 'Medium', 'Legal'],\n  ['Refresh brand assets', 'Draft', 'Apr 25', 'Sam Okafor', 'Low', 'Marketing'],\n  ['Fix login timeout bug', 'In progress', 'Apr 16', 'Devon Walsh', 'High', 'Engineering'],\n  ['Prep board deck', 'Done', 'Apr 10', 'Jordan Kim', 'Medium', 'Exec'],\n  ['Migrate legacy CRM rows', 'Blocked', 'Apr 28', 'Alex Rivera', 'High', 'Engineering'],\n  ['Schedule user interviews', 'Draft', 'Apr 19', 'Riley Patel', 'Medium', 'Product'],\n  ['Approve expense policy', 'In progress', 'Apr 21', 'Morgan Lee', 'Low', 'Finance'],\n  ['Localize help center', 'Draft', 'May 2', 'Sam Okafor', 'Medium', 'Marketing'],\n  ['Load test checkout API', 'In progress', 'Apr 17', 'Devon Walsh', 'High', 'Engineering'],\n  ['Quarterly OKR check-in', 'Done', 'Apr 9', 'Avery Chen', 'Low', 'Exec'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { data: 0, type: 'text', width: 200 },\n    { data: 1, type: 'text', width: 105 },\n    { data: 2, type: 'text', width: 72 },\n    { data: 3, type: 'text', width: 120 },\n    { data: 4, type: 'text', width: 80 },\n    { data: 5, type: 'text', width: 100 },\n  ],\n  colHeaders: ['Task', 'Status', 'Due', 'Owner', 'Priority', 'Team'],\n  rowHeaders: true,\n  width: '100%',\n  height: 420,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const notification = hot.getPlugin('notification');\n\n  notification.showMessage({\n    title: 'Top start',\n    message: 'Info toast in the top-start corner.',\n    variant: 'info',\n    position: 'top-start',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Top end',\n    message: 'Success toast in the top-end corner.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Bottom start',\n    message: 'Warning toast in the bottom-start corner.',\n    variant: 'warning',\n    position: 'bottom-start',\n    duration: 0,\n  });\n  notification.showMessage({\n    title: 'Bottom end',\n    message: 'Error toast in the bottom-end corner.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n  });\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/dialog/notification/vue/example1.vue","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/notification","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example2.vue.json
index 08b9a6a5a..1a5521f95 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__dialog__notification__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction getPlugin() {\n  return hotRef.value?.hotInstance?.getPlugin('notification');\n}\n\nfunction onSave(): void {\n  getPlugin()?.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n}\n\nfunction onSyncError(): void {\n  const plugin = getPlugin();\n\n  if (!plugin) {\n    return;\n  }\n\n  plugin.showMessage({\n    title: 'Sync failed',\n    message: 'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n}\n\nfunction onLowStock(): void {\n  getPlugin()?.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\" @click=\"onSave\">Save</button>\n        <button type=\"button\" class=\"button button--primary\" @click=\"onSyncError\">Sync error</button>\n        <button type=\"button\" class=\"button button--primary\" @click=\"onLowStock\">Low stock</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/dialog/notification/vue/example2.vue","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"Vue 3"}
+{"framework":"vue","displayName":"Dialog ▸ Notification · Toolbar actions (inventory-style) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['SKU-001', 'Alkaline AA 4pk', 240, 40, 'A-12'],\n  ['SKU-002', 'USB-C cable 1m', 18, 24, 'B-03'],\n  ['SKU-003', 'Notebook A5 ruled', 0, 30, 'C-01'],\n  ['SKU-004', 'Wireless mouse', 6, 15, 'B-07'],\n  ['SKU-005', 'HDMI cable 2m', 2, 10, 'A-04'],\n  ['SKU-006', 'Desk lamp LED', 45, 12, 'D-02'],\n  ['SKU-007', 'Laptop stand aluminum', 0, 8, 'C-14'],\n  ['SKU-008', 'Mechanical keycap set', 112, 20, 'B-01'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { data: 0, type: 'text', width: 90 },\n    { data: 1, type: 'text', width: 200 },\n    { data: 2, type: 'numeric', width: 100 },\n    { data: 3, type: 'numeric', width: 95 },\n    { data: 4, type: 'text', width: 70 },\n  ],\n  colHeaders: ['SKU', 'Product', 'Qty on hand', 'Reorder at', 'Bin'],\n  rowHeaders: true,\n  width: '100%',\n  height: 280,\n  notification: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction getPlugin() {\n  return hotRef.value?.hotInstance?.getPlugin('notification');\n}\n\nfunction onSave(): void {\n  getPlugin()?.showMessage({\n    title: 'Saved',\n    message: 'Inventory updates were written.',\n    variant: 'success',\n    position: 'top-end',\n    duration: 2500,\n  });\n}\n\nfunction onSyncError(): void {\n  const plugin = getPlugin();\n\n  if (!plugin) {\n    return;\n  }\n\n  plugin.showMessage({\n    title: 'Sync failed',\n    message: 'The service is unavailable. Retry when your connection is stable.',\n    variant: 'error',\n    position: 'bottom-end',\n    duration: 0,\n    actions: [\n      {\n        label: 'Retry',\n        type: 'primary',\n        callback: () => {\n          plugin.hideAll();\n          plugin.showMessage({\n            message: 'Sync completed.',\n            variant: 'success',\n            position: 'bottom-end',\n          });\n        },\n      },\n      { label: 'Dismiss', type: 'secondary', callback: () => plugin.hideAll() },\n    ],\n  });\n}\n\nfunction onLowStock(): void {\n  getPlugin()?.showMessage({\n    title: 'Review quantities',\n    message:\n      'SKUs below reorder: USB-C cable 1m, Wireless mouse, HDMI cable 2m. Out of stock: Notebook A5 ruled, Laptop stand.',\n    variant: 'warning',\n    position: 'top-start',\n    duration: 6000,\n  });\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\" @click=\"onSave\">Save</button>\n        <button type=\"button\" class=\"button button--primary\" @click=\"onSyncError\">Sync error</button>\n        <button type=\"button\" class=\"button button--primary\" @click=\"onLowStock\">Low stock</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/dialog/notification/vue/example2.vue","breadcrumb":["Dialog","Notification"],"guide":"guides/dialog/notification/notification.md","guideTitle":"Notification","exampleId":"example2","exampleTitle":"Toolbar actions (inventory-style)","docPermalink":"/notification","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example-custom-functions.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example-custom-functions.ts.json
index af991f68c..a52e11de1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example-custom-functions.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example-custom-functions.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example-custom-functions></app-example-custom-functions>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example-custom-functions',\n  template: `\n    <hot-table [settings]=\"gridSettings\" [data]=\"data\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: (string | number)[][] = [\n    ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n    ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n    ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n    ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n    ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n    ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: { engine: HyperFormula },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example-custom-functions.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"Angular"}
+{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example-custom-functions></app-example-custom-functions>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example-custom-functions',\n  template: `\n    <hot-table [settings]=\"gridSettings\" [data]=\"data\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: (string | number)[][] = [\n    ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n    ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n    ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n    ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n    ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n    ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: { engine: HyperFormula },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example-custom-functions.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example1.ts.json
index 12b7396d9..9064da413 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <h3 class=\"demo-preview\">Sheet 1</h3>\n    <hot-table\n      [settings]=\"hotSettings1!\" [data]=\"hotData1\">\n    </hot-table>\n\n    <h3 class=\"demo-preview\">Sheet 2</h3>\n    <hot-table\n      [settings]=\"hotSettings2!\" [data]=\"hotData2\">\n    </hot-table>\n  `,\n  styles: `\n    h3.demo-preview {\n      margin-bottom: 0.3rem !important;\n      padding-top: 0 !important;\n      margin-top: 0.5rem !important;\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // create an external HyperFormula instance\n  readonly hyperformulaInstance = HyperFormula.buildEmpty({\n    // to use an external HyperFormula instance,\n    // initialize it with the `'internal-use-in-handsontable'` license key\n    licenseKey: 'internal-use-in-handsontable',\n  });\n\n  readonly hotData1 = [\n    ['10.26', null, 'Sum', '=SUM(A:A)'],\n    ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n    ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n    ['40.29', null, 'MAX', '=MAX(A:A)'],\n    ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n  ];\n\n  readonly hotSettings1: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: this.hyperformulaInstance,\n      sheetName: 'Sheet1',\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n  readonly hotData2 = [\n    ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n    ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n    ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n    ['Generate a random number', '=RAND()'],\n    ['Number of sheets in this workbook', '=SHEETS()'],\n  ];\n\n  readonly hotSettings2: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: this.hyperformulaInstance,\n      sheetName: 'Sheet2',\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"}
+{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <h3 class=\"demo-preview\">Sheet 1</h3>\n    <hot-table\n      [settings]=\"hotSettings1!\" [data]=\"hotData1\">\n    </hot-table>\n\n    <h3 class=\"demo-preview\">Sheet 2</h3>\n    <hot-table\n      [settings]=\"hotSettings2!\" [data]=\"hotData2\">\n    </hot-table>\n  `,\n  styles: `\n    h3.demo-preview {\n      margin-bottom: 0.3rem !important;\n      padding-top: 0 !important;\n      margin-top: 0.5rem !important;\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // create an external HyperFormula instance\n  readonly hyperformulaInstance = HyperFormula.buildEmpty({\n    // to use an external HyperFormula instance,\n    // initialize it with the `'internal-use-in-handsontable'` license key\n    licenseKey: 'internal-use-in-handsontable',\n  });\n\n  readonly hotData1 = [\n    ['10.26', null, 'Sum', '=SUM(A:A)'],\n    ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n    ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n    ['40.29', null, 'MAX', '=MAX(A:A)'],\n    ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n  ];\n\n  readonly hotSettings1: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: this.hyperformulaInstance,\n      sheetName: 'Sheet1',\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n  readonly hotData2 = [\n    ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n    ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n    ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n    ['Generate a random number', '=RAND()'],\n    ['Number of sheets in this workbook', '=SHEETS()'],\n  ];\n\n  readonly hotSettings2: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: this.hyperformulaInstance,\n      sheetName: 'Sheet2',\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example2.ts.json
index 18cf825d4..48fb08209 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Data grid example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n    ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n    ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n    ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n    ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n    ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n    ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n    ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n    ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n    ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n    ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n    ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n    ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n    ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n    ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n    ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n    ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n    ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n    ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n    ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n    ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n    ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n    ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n    ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n    ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n    ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n    ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n    ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n    ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n    ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n    ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n    ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n    ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n    ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n    ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n    ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n    ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n    ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n    ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n    ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n    ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n    ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n    ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n    ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n    ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n    ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n    ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n    ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n    ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n    ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n    ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n    ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n    ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n    ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n    ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n    ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n    ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n    ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n    ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n    ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n    ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n    ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n    ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n    ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n    ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n    ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n    ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n    ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n    ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n    ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n    ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n    ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n    ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n    ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n    ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n    ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n    ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n    ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n    ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n    ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n    ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n    ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n    ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n    ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n    ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n    ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n    ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n    ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n    ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n    ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n    ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n    ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n    ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n    ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n    ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n    ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n    ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n    ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n    ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n    ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n    ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n    [\n      '=SUM(A1:A100)',\n      '=AVERAGE(B1:B100)',\n      '=AVERAGE(C1:C100)',\n      '=SUM(D1:D100)',\n      '=SUM(E1:E100)',\n    ],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    formulas: {\n      engine: HyperFormula,\n    },\n    colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n    fixedRowsBottom: 2,\n    stretchH: 'all',\n    height: 500,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example2","exampleTitle":"Data grid example (2)","docPermalink":"/formula-calculation","lang":"Angular"}
+{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Data grid example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n    ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n    ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n    ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n    ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n    ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n    ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n    ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n    ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n    ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n    ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n    ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n    ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n    ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n    ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n    ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n    ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n    ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n    ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n    ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n    ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n    ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n    ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n    ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n    ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n    ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n    ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n    ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n    ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n    ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n    ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n    ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n    ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n    ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n    ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n    ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n    ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n    ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n    ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n    ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n    ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n    ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n    ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n    ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n    ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n    ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n    ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n    ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n    ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n    ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n    ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n    ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n    ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n    ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n    ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n    ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n    ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n    ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n    ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n    ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n    ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n    ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n    ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n    ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n    ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n    ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n    ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n    ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n    ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n    ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n    ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n    ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n    ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n    ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n    ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n    ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n    ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n    ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n    ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n    ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n    ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n    ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n    ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n    ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n    ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n    ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n    ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n    ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n    ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n    ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n    ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n    ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n    ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n    ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n    ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n    ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n    ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n    ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n    ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n    ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n    ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n    [\n      '=SUM(A1:A100)',\n      '=AVERAGE(B1:B100)',\n      '=AVERAGE(C1:C100)',\n      '=SUM(D1:D100)',\n      '=SUM(E1:E100)',\n    ],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    formulas: {\n      engine: HyperFormula,\n    },\n    colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n    fixedRowsBottom: 2,\n    stretchH: 'all',\n    height: 500,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example2","exampleTitle":"Data grid example (2)","docPermalink":"/formula-calculation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example3.ts.json
index 3e3db13c7..a2e1011f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule, ReactiveFormsModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input [formControl]=\"namedExpressionsControl\" type=\"text\" />&nbsp;\n        <button (click)=\"applyNamedExpression()\">Calculate the price</button>\n      </div>\n      <output [class.is-error]=\"errorMessage\">{{ errorMessage }}</output>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  namedExpressionsControl = new FormControl('=10 * Sheet1!$A$2');\n\n  errorMessage = '';\n\n  readonly hotData = [\n    ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n    ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n    ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n    ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: HyperFormula,\n      namedExpressions: [\n        {\n          name: 'ADDITIONAL_COST',\n          expression: 100,\n        },\n      ],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  applyNamedExpression() {\n    const formulasPlugin = this.hotTable.hotInstance!.getPlugin('formulas');\n\n    try {\n      (formulasPlugin.engine as any)?.changeNamedExpression('ADDITIONAL_COST', this.namedExpressionsControl.value);\n    } catch (error) {\n      // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n      this.errorMessage = error instanceof Error ? error.message : String(error);\n\n      return;\n    }\n\n    this.errorMessage = '';\n    this.hotTable.hotInstance!.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example3.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example3","exampleTitle":"Demo: plain-value named expression (2)","docPermalink":"/formula-calculation","lang":"Angular"}
+{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule, ReactiveFormsModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input [formControl]=\"namedExpressionsControl\" type=\"text\" />&nbsp;\n        <button (click)=\"applyNamedExpression()\">Calculate the price</button>\n      </div>\n      <output [class.is-error]=\"errorMessage\">{{ errorMessage }}</output>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  namedExpressionsControl = new FormControl('=10 * Sheet1!$A$2');\n\n  errorMessage = '';\n\n  readonly hotData = [\n    ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n    ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n    ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n    ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n      engine: HyperFormula,\n      namedExpressions: [\n        {\n          name: 'ADDITIONAL_COST',\n          expression: 100,\n        },\n      ],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  applyNamedExpression() {\n    const formulasPlugin = this.hotTable.hotInstance!.getPlugin('formulas');\n\n    try {\n      (formulasPlugin.engine as any)?.changeNamedExpression('ADDITIONAL_COST', this.namedExpressionsControl.value);\n    } catch (error) {\n      // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n      this.errorMessage = error instanceof Error ? error.message : String(error);\n\n      return;\n    }\n\n    this.errorMessage = '';\n    this.hotTable.hotInstance!.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example3.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example3","exampleTitle":"Demo: plain-value named expression (2)","docPermalink":"/formula-calculation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example4.ts.json
index 6e9eee884..6dbe419ef 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine in the constructor so the sheet is created first.\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Widget A', 200, 250],\n    ['Widget B', 150, 300],\n    ['Widget C', 400, 350],\n    ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n  ];\n\n  readonly hotSettings: GridSettings;\n\n  constructor() {\n    const hfInstance = HyperFormula.buildEmpty({\n      licenseKey: 'internal-use-in-handsontable',\n    });\n\n    hfInstance.addSheet('Sheet1');\n    hfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\n    hfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\n    this.hotSettings = {\n      colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n      rowHeaders: true,\n      height: 'auto',\n      formulas: {\n        engine: hfInstance,\n        sheetName: 'Sheet1',\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example4.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example4","exampleTitle":"Demo: formula-based named expressions (2)","docPermalink":"/formula-calculation","lang":"Angular"}
+{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine in the constructor so the sheet is created first.\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Widget A', 200, 250],\n    ['Widget B', 150, 300],\n    ['Widget C', 400, 350],\n    ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n  ];\n\n  readonly hotSettings: GridSettings;\n\n  constructor() {\n    const hfInstance = HyperFormula.buildEmpty({\n      licenseKey: 'internal-use-in-handsontable',\n    });\n\n    hfInstance.addSheet('Sheet1');\n    hfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\n    hfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\n    this.hotSettings = {\n      colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n      rowHeaders: true,\n      height: 'auto',\n      formulas: {\n        engine: hfInstance,\n        sheetName: 'Sheet1',\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example4.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example4","exampleTitle":"Demo: formula-based named expressions (2)","docPermalink":"/formula-calculation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json
index 21f313e68..44b2afe78 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n// Register all Handsontable's modules.\nregisterAllModules();\nclass CommissionPlugin extends FunctionPlugin {\n    commission(ast, state) {\n        return this.runFunction(ast.args, state, this.metadata('COMMISSION'), (revenue, rate) => revenue * (rate / 100));\n    }\n}\nCommissionPlugin.implementedFunctions = {\n    COMMISSION: {\n        method: 'commission',\n        parameters: [\n            { argumentType: FunctionArgumentType.NUMBER },\n            { argumentType: FunctionArgumentType.NUMBER },\n        ],\n    },\n};\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n    enGB: { COMMISSION: 'COMMISSION' },\n});\nconst data = [\n    ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n    ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n    ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n    ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n    ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n    ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\nconst container = document.querySelector('#example-custom-functions');\nnew Handsontable(container, {\n    data,\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n        engine: HyperFormula,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n// Register all Handsontable's modules.\nregisterAllModules();\nclass CommissionPlugin extends FunctionPlugin {\n    commission(ast, state) {\n        return this.runFunction(ast.args, state, this.metadata('COMMISSION'), (revenue, rate) => revenue * (rate / 100));\n    }\n}\nCommissionPlugin.implementedFunctions = {\n    COMMISSION: {\n        method: 'commission',\n        parameters: [\n            { argumentType: FunctionArgumentType.NUMBER },\n            { argumentType: FunctionArgumentType.NUMBER },\n        ],\n    },\n};\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n    enGB: { COMMISSION: 'COMMISSION' },\n});\nconst data = [\n    ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n    ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n    ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n    ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n    ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n    ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\nconst container = document.querySelector('#example-custom-functions');\nnew Handsontable(container, {\n    data,\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    formulas: {\n        engine: HyperFormula,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json
index a07bc3952..a440b0795 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst container = document.querySelector('#example-custom-functions')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst container = document.querySelector('#example-custom-functions')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.js.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.js.json
index 4f2576396..c905bbcd8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Data grid example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid');\n\nnew Handsontable(container, {\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Data grid example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid');\n\nnew Handsontable(container, {\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json
index 82039a6e3..884fa373b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Data grid example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid')!;\n\nnew Handsontable(container, {\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Data grid example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid')!;\n\nnew Handsontable(container, {\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json
index b14c1db7d..c28cc8574 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"named-expressions-input\" type=\"text\" value=\"=10 * Sheet1!$A$2\" />\n      <button id=\"named-expressions-button\">Calculate the price</button>\n    </div>\n    <output id=\"named-expressions-status\"></output>\n  </div>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input');\nconst formulasPlugin = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button');\nconst statusOutput = document.getElementById('named-expressions-status');\n\nbutton.addEventListener('click', () => {\n  try {\n    formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', input.value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    statusOutput.textContent = error instanceof Error ? error.message : String(error);\n    statusOutput.classList.add('is-error');\n\n    return;\n  }\n\n  statusOutput.textContent = '';\n  statusOutput.classList.remove('is-error');\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"named-expressions-input\" type=\"text\" value=\"=10 * Sheet1!$A$2\" />\n      <button id=\"named-expressions-button\">Calculate the price</button>\n    </div>\n    <output id=\"named-expressions-status\"></output>\n  </div>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1');\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input');\nconst formulasPlugin = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button');\nconst statusOutput = document.getElementById('named-expressions-status');\n\nbutton.addEventListener('click', () => {\n  try {\n    formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', input.value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    statusOutput.textContent = error instanceof Error ? error.message : String(error);\n    statusOutput.classList.add('is-error');\n\n    return;\n  }\n\n  statusOutput.textContent = '';\n  statusOutput.classList.remove('is-error');\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json
index f6315abcf..aeb4febf3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"named-expressions-input\" type=\"text\" value=\"=10 * Sheet1!$A$2\" />\n      <button id=\"named-expressions-button\">Calculate the price</button>\n    </div>\n    <output id=\"named-expressions-status\"></output>\n  </div>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport { Formulas } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input')!;\nconst formulasPlugin: Formulas = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button')!;\nconst statusOutput = document.getElementById('named-expressions-status')!;\n\nbutton!.addEventListener('click', () => {\n  try {\n    formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', (input as HTMLInputElement).value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    statusOutput.textContent = error instanceof Error ? error.message : String(error);\n    statusOutput.classList.add('is-error');\n\n    return;\n  }\n\n  statusOutput.textContent = '';\n  statusOutput.classList.remove('is-error');\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"named-expressions-input\" type=\"text\" value=\"=10 * Sheet1!$A$2\" />\n      <button id=\"named-expressions-button\">Calculate the price</button>\n    </div>\n    <output id=\"named-expressions-status\"></output>\n  </div>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport { Formulas } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input')!;\nconst formulasPlugin: Formulas = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button')!;\nconst statusOutput = document.getElementById('named-expressions-status')!;\n\nbutton!.addEventListener('click', () => {\n  try {\n    formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', (input as HTMLInputElement).value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    statusOutput.textContent = error instanceof Error ? error.message : String(error);\n    statusOutput.classList.add('is-error');\n\n    return;\n  }\n\n  statusOutput.textContent = '';\n  statusOutput.classList.remove('is-error');\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json
index 23ff69696..587f4bca4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2');\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2');\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json
index d63a4528d..5ad08f9e5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data: (string | number)[][] = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data: (string | number)[][] = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.js.json
index dee6689e5..7abbb9430 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Sheet 1</h3>\n  <div id=\"example-basic-multi-sheet-1\"></div>\n  <h3 class=\"demo-preview\">Sheet 2</h3>\n  <div id=\"example-basic-multi-sheet-2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1 = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n  // to use an external HyperFormula instance,\n  // initialize it with the `'internal-use-in-handsontable'` license key\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1');\n\nnew Handsontable(container1, {\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2');\n\nnew Handsontable(container2, {\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Sheet 1</h3>\n  <div id=\"example-basic-multi-sheet-1\"></div>\n  <h3 class=\"demo-preview\">Sheet 2</h3>\n  <div id=\"example-basic-multi-sheet-2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1 = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n  // to use an external HyperFormula instance,\n  // initialize it with the `'internal-use-in-handsontable'` license key\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1');\n\nnew Handsontable(container1, {\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2');\n\nnew Handsontable(container2, {\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.ts.json
index ed5a3ae7a..e26baa69a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Sheet 1</h3>\n  <div id=\"example-basic-multi-sheet-1\"></div>\n  <h3 class=\"demo-preview\">Sheet 2</h3>\n  <div id=\"example-basic-multi-sheet-2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1: [string, null, string, string][] = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2: [string, string][] = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n  // to use an external HyperFormula instance,\n  // initialize it with the `'internal-use-in-handsontable'` license key\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1')!;\n\nnew Handsontable(container1, {\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2')!;\n\nnew Handsontable(container2, {\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Sheet 1</h3>\n  <div id=\"example-basic-multi-sheet-1\"></div>\n  <h3 class=\"demo-preview\">Sheet 2</h3>\n  <div id=\"example-basic-multi-sheet-2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1: [string, null, string, string][] = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2: [string, string][] = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n  // to use an external HyperFormula instance,\n  // initialize it with the `'internal-use-in-handsontable'` license key\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1')!;\n\nnew Handsontable(container1, {\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2')!;\n\nnew Handsontable(container2, {\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json
index 43d10c494..45a60afc5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-custom-functions\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      formulas={{ engine: HyperFormula } as DetailedSettings}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-custom-functions.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"React (TS)"}
+{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-custom-functions\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      formulas={{ engine: HyperFormula } as DetailedSettings}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-custom-functions.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-data-grid.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-data-grid.tsx.json
index c3aeaa214..74fb5f39c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-data-grid.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-data-grid.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Formulas ▸ Formula calculation · Data grid example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-data-grid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n    ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n    ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n    ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n    ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n    ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n    ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n    ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n    ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n    ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n    ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n    ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n    ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n    ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n    ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n    ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n    ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n    ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n    ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n    ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n    ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n    ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n    ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n    ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n    ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n    ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n    ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n    ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n    ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n    ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n    ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n    ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n    ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n    ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n    ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n    ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n    ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n    ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n    ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n    ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n    ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n    ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n    ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n    ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n    ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n    ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n    ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n    ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n    ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n    ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n    ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n    ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n    ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n    ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n    ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n    ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n    ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n    ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n    ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n    ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n    ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n    ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n    ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n    ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n    ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n    ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n    ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n    ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n    ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n    ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n    ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n    ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n    ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n    ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n    ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n    ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n    ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n    ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n    ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n    ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n    ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n    ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n    ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n    ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n    ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n    ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n    ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n    ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n    ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n    ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n    ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n    ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n    ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n    ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n    ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n    ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n    ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n    ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n    ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n    ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n    ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n    ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      formulas={{\n        engine: HyperFormula,\n      }}\n      colHeaders={['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)']}\n      fixedRowsBottom={2}\n      stretchH=\"all\"\n      height={500}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-data-grid.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"React (TS)"}
+{"framework":"react","displayName":"Formulas ▸ Formula calculation · Data grid example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-data-grid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data = [\n    ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n    ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n    ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n    ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n    ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n    ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n    ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n    ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n    ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n    ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n    ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n    ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n    ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n    ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n    ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n    ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n    ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n    ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n    ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n    ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n    ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n    ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n    ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n    ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n    ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n    ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n    ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n    ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n    ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n    ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n    ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n    ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n    ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n    ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n    ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n    ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n    ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n    ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n    ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n    ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n    ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n    ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n    ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n    ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n    ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n    ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n    ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n    ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n    ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n    ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n    ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n    ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n    ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n    ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n    ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n    ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n    ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n    ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n    ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n    ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n    ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n    ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n    ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n    ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n    ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n    ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n    ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n    ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n    ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n    ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n    ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n    ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n    ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n    ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n    ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n    ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n    ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n    ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n    ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n    ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n    ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n    ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n    ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n    ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n    ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n    ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n    ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n    ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n    ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n    ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n    ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n    ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n    ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n    ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n    ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n    ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n    ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n    ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n    ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n    ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n    ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n    ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      formulas={{\n        engine: HyperFormula,\n      }}\n      colHeaders={['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)']}\n      fixedRowsBottom={2}\n      stretchH=\"all\"\n      height={500}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-data-grid.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json
index b741a3383..ede404387 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { ChangeEvent, useRef, useState } from 'react';\nimport { HyperFormula } from 'hyperformula';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotNamedExpressionsRef = useRef<HotTableRef>(null);\n  const [namedExpressionValue, setNamedExpressionValue] = useState('=10 * Sheet1!$A$2');\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const data = [\n    ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n    ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n    ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n    ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n  ];\n\n  const inputChangeCallback = (event: ChangeEvent<HTMLInputElement>) => {\n    setNamedExpressionValue(event.target.value);\n  };\n\n  const buttonClickCallback = () => {\n    const hotNamedExpressions = hotNamedExpressionsRef.current?.hotInstance;\n    const formulasPlugin = hotNamedExpressions?.getPlugin('formulas');\n\n    try {\n      formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue);\n    } catch (error) {\n      // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n      setErrorMessage(error instanceof Error ? error.message : String(error));\n\n      return;\n    }\n\n    setErrorMessage('');\n    hotNamedExpressions?.render();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"named-expressions-input\"\n            type=\"text\"\n            defaultValue={namedExpressionValue}\n            onChange={(...args) => inputChangeCallback(...args)}\n          />\n          <button id=\"named-expressions-button\" onClick={() => buttonClickCallback()}>\n            Calculate the price\n          </button>\n        </div>\n        <output className={errorMessage ? 'is-error' : undefined}>{errorMessage}</output>\n      </div>\n      <HotTable\n        ref={hotNamedExpressionsRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={\n          {\n            engine: HyperFormula,\n            namedExpressions: [\n              {\n                name: 'ADDITIONAL_COST',\n                expression: 100,\n              },\n            ],\n          } as DetailedSettings\n        }\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"React (TS)"}
+{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { ChangeEvent, useRef, useState } from 'react';\nimport { HyperFormula } from 'hyperformula';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotNamedExpressionsRef = useRef<HotTableRef>(null);\n  const [namedExpressionValue, setNamedExpressionValue] = useState('=10 * Sheet1!$A$2');\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const data = [\n    ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n    ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n    ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n    ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n  ];\n\n  const inputChangeCallback = (event: ChangeEvent<HTMLInputElement>) => {\n    setNamedExpressionValue(event.target.value);\n  };\n\n  const buttonClickCallback = () => {\n    const hotNamedExpressions = hotNamedExpressionsRef.current?.hotInstance;\n    const formulasPlugin = hotNamedExpressions?.getPlugin('formulas');\n\n    try {\n      formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue);\n    } catch (error) {\n      // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n      setErrorMessage(error instanceof Error ? error.message : String(error));\n\n      return;\n    }\n\n    setErrorMessage('');\n    hotNamedExpressions?.render();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"named-expressions-input\"\n            type=\"text\"\n            defaultValue={namedExpressionValue}\n            onChange={(...args) => inputChangeCallback(...args)}\n          />\n          <button id=\"named-expressions-button\" onClick={() => buttonClickCallback()}>\n            Calculate the price\n          </button>\n        </div>\n        <output className={errorMessage ? 'is-error' : undefined}>{errorMessage}</output>\n      </div>\n      <HotTable\n        ref={hotNamedExpressionsRef}\n        data={data}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={\n          {\n            engine: HyperFormula,\n            namedExpressions: [\n              {\n                name: 'ADDITIONAL_COST',\n                expression: 100,\n              },\n            ],\n          } as DetailedSettings\n        }\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json
index a9e39b737..cafbcc08e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine at module level so it is created only once.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Q1 Sales', 'Q2 Sales']}\n      rowHeaders={true}\n      height=\"auto\"\n      formulas={{\n        engine: hfInstance,\n        sheetName: 'Sheet1',\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions2.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"React (TS)"}
+{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine at module level so it is created only once.\nconst hfInstance = HyperFormula.buildEmpty({\n  licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Q1 Sales', 'Q2 Sales']}\n      rowHeaders={true}\n      height=\"auto\"\n      formulas={{\n        engine: hfInstance,\n        sheetName: 'Sheet1',\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions2.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example1.tsx.json
index f39827d41..ba8b3aa9c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Formulas ▸ Formula calculation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data1 = [\n    ['10.26', null, 'Sum', '=SUM(A:A)'],\n    ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n    ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n    ['40.29', null, 'MAX', '=MAX(A:A)'],\n    ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n  ];\n\n  const data2 = [\n    ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n    ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n    ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n    ['Generate a random number', '=RAND()'],\n    ['Number of sheets in this workbook', '=SHEETS()'],\n  ];\n\n  //  create an external HyperFormula instance\n  const hyperformulaInstance = HyperFormula.buildEmpty({\n    // to use an external HyperFormula instance,\n    // initialize it with the `'internal-use-in-handsontable'` license key\n    licenseKey: 'internal-use-in-handsontable',\n  });\n\n  return (\n    <>\n      <h3 className=\"demo-preview\">Sheet 1</h3>\n      <HotTable\n        data={data1}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={{\n          engine: hyperformulaInstance,\n          sheetName: 'Sheet1',\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <h3 className=\"demo-preview\">Sheet 2</h3>\n      <HotTable\n        data={data2}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={{\n          engine: hyperformulaInstance,\n          sheetName: 'Sheet2',\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/react/example1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"React (TS)"}
+{"framework":"react","displayName":"Formulas ▸ Formula calculation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data1 = [\n    ['10.26', null, 'Sum', '=SUM(A:A)'],\n    ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n    ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n    ['40.29', null, 'MAX', '=MAX(A:A)'],\n    ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n  ];\n\n  const data2 = [\n    ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n    ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n    ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n    ['Generate a random number', '=RAND()'],\n    ['Number of sheets in this workbook', '=SHEETS()'],\n  ];\n\n  //  create an external HyperFormula instance\n  const hyperformulaInstance = HyperFormula.buildEmpty({\n    // to use an external HyperFormula instance,\n    // initialize it with the `'internal-use-in-handsontable'` license key\n    licenseKey: 'internal-use-in-handsontable',\n  });\n\n  return (\n    <>\n      <h3 className=\"demo-preview\">Sheet 1</h3>\n      <HotTable\n        data={data1}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={{\n          engine: hyperformulaInstance,\n          sheetName: 'Sheet1',\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <h3 className=\"demo-preview\">Sheet 2</h3>\n      <HotTable\n        data={data2}\n        colHeaders={true}\n        rowHeaders={true}\n        height=\"auto\"\n        formulas={{\n          engine: hyperformulaInstance,\n          sheetName: 'Sheet2',\n        }}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/react/example1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json
index 8410d52ec..ace30c8dc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-custom-functions\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: { engine: markRaw(HyperFormula) } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-custom-functions\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-custom-functions.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-custom-functions\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-custom-functions\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// HyperFormula does not export its parser and interpreter types from the package\n// entry point, so derive them from the inherited `runFunction` signature.\ntype RunFunction = FunctionPlugin['runFunction'];\ntype Ast = Parameters<RunFunction>[0][number];\ntype ProcedureAst = Extract<Ast, { procedureName: string }>;\ntype InterpreterState = Parameters<RunFunction>[1];\ntype InterpreterValue = ReturnType<Parameters<RunFunction>[3]>;\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n  commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n    return this.runFunction(\n      ast.args,\n      state,\n      this.metadata('COMMISSION'),\n      (revenue: number, rate: number): number => revenue * (rate / 100),\n    );\n  }\n}\n\nCommissionPlugin.implementedFunctions = {\n  COMMISSION: {\n    method: 'commission',\n    parameters: [\n      { argumentType: FunctionArgumentType.NUMBER },\n      { argumentType: FunctionArgumentType.NUMBER },\n    ],\n  },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n  enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n  ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n  ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n  ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n  ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n  ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n  ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: { engine: markRaw(HyperFormula) } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-custom-functions\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-custom-functions.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-data-grid.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-data-grid.vue.json
index 974d92ae0..5a294c1e6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-data-grid.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-data-grid.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Data grid example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-data-grid\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-data-grid\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-data-grid.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Data grid example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-data-grid\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-data-grid\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n  ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n  ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n  ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n  ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n  ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n  ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n  ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n  ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n  ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n  ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n  ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n  ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n  ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n  ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n  ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n  ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n  ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n  ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n  ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n  ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n  ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n  ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n  ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n  ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n  ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n  ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n  ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n  ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n  ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n  ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n  ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n  ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n  ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n  ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n  ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n  ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n  ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n  ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n  ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n  ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n  ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n  ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n  ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n  ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n  ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n  ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n  ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n  ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n  ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n  ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n  ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n  ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n  ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n  ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n  ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n  ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n  ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n  ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n  ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n  ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n  ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n  ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n  ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n  ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n  ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n  ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n  ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n  ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n  ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n  ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n  ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n  ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n  ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n  ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n  ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n  ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n  ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n  ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n  ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n  ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n  ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n  ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n  ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n  ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n  ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n  ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n  ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n  ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n  ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  formulas: {\n    engine: HyperFormula,\n  },\n  colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n  fixedRowsBottom: 2,\n  stretchH: 'all',\n  height: 500,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-data-grid\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-data-grid.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json
index c4b8b22a1..6dabeb3b5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst namedExpressionValue = ref('=10 * Sheet1!$A$2');\nconst errorMessage = ref('');\n\nconst data = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction inputChangeCallback(event: Event) {\n  namedExpressionValue.value = (event.target as HTMLInputElement).value;\n}\n\nfunction buttonClickCallback() {\n  const hotInstance = hotRef.value?.hotInstance;\n  const formulasPlugin = hotInstance?.getPlugin('formulas');\n\n  try {\n    formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue.value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    errorMessage.value = error instanceof Error ? error.message : String(error);\n\n    return;\n  }\n\n  errorMessage.value = '';\n  hotInstance?.render();\n}\n</script>\n\n<template>\n  <div id=\"example-named-expressions1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"named-expressions-input\"\n          type=\"text\"\n          :value=\"namedExpressionValue\"\n          @input=\"inputChangeCallback\"\n        />\n        <button id=\"named-expressions-button\" @click=\"buttonClickCallback\">\n          Calculate the price\n        </button>\n      </div>\n      <output :class=\"{ 'is-error': errorMessage }\">{{ errorMessage }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-named-expressions1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst namedExpressionValue = ref('=10 * Sheet1!$A$2');\nconst errorMessage = ref('');\n\nconst data = [\n  ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n  ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n  ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n  ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: HyperFormula,\n    namedExpressions: [\n      {\n        name: 'ADDITIONAL_COST',\n        expression: 100,\n      },\n    ],\n  } as DetailedSettings,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction inputChangeCallback(event: Event) {\n  namedExpressionValue.value = (event.target as HTMLInputElement).value;\n}\n\nfunction buttonClickCallback() {\n  const hotInstance = hotRef.value?.hotInstance;\n  const formulasPlugin = hotInstance?.getPlugin('formulas');\n\n  try {\n    formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue.value);\n  } catch (error) {\n    // HyperFormula rejects some expressions, for example relative references such as `Sheet1!A2`.\n    errorMessage.value = error instanceof Error ? error.message : String(error);\n\n    return;\n  }\n\n  errorMessage.value = '';\n  hotInstance?.render();\n}\n</script>\n\n<template>\n  <div id=\"example-named-expressions1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"named-expressions-input\"\n          type=\"text\"\n          :value=\"namedExpressionValue\"\n          @input=\"inputChangeCallback\"\n        />\n        <button id=\"named-expressions-button\" @click=\"buttonClickCallback\">\n          Calculate the price\n        </button>\n      </div>\n      <output :class=\"{ 'is-error': errorMessage }\">{{ errorMessage }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json
index c92b94180..9e3033ed8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine once. `markRaw` keeps Vue from proxying the instance.\nconst hfInstance = markRaw(\n  HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n  })\n);\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-named-expressions2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions2.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example-named-expressions2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine once. `markRaw` keeps Vue from proxying the instance.\nconst hfInstance = markRaw(\n  HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n  })\n);\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n  ['Widget A', 200, 250],\n  ['Widget B', 150, 300],\n  ['Widget C', 400, 350],\n  ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hfInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example-named-expressions2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions2.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example1.vue.json
index 1f98b2709..eb322590c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__formulas__formula-calculation__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data1 = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance, initialized with the\n// `'internal-use-in-handsontable'` license key, and shared by both grids.\n// `markRaw` prevents Vue from wrapping the instance in a reactive proxy.\nconst hyperformulaInstance = markRaw(\n  HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n  })\n);\n\nconst sheet1Settings = ref<GridSettings>({\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst sheet2Settings = ref<GridSettings>({\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <h3 class=\"demo-preview\">Sheet 1</h3>\n    <HotTable :settings=\"sheet1Settings\" />\n    <h3 class=\"demo-preview\">Sheet 2</h3>\n    <HotTable :settings=\"sheet2Settings\" />\n  </div>\n</template>","/src/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/vue/example1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"hyperformula\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, markRaw } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data1 = [\n  ['10.26', null, 'Sum', '=SUM(A:A)'],\n  ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n  ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n  ['40.29', null, 'MAX', '=MAX(A:A)'],\n  ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n  ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n  ['Generate a random number', '=RAND()'],\n  ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance, initialized with the\n// `'internal-use-in-handsontable'` license key, and shared by both grids.\n// `markRaw` prevents Vue from wrapping the instance in a reactive proxy.\nconst hyperformulaInstance = markRaw(\n  HyperFormula.buildEmpty({\n    licenseKey: 'internal-use-in-handsontable',\n  })\n);\n\nconst sheet1Settings = ref<GridSettings>({\n  data: data1,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet1',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst sheet2Settings = ref<GridSettings>({\n  data: data2,\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  formulas: {\n    engine: hyperformulaInstance,\n    sheetName: 'Sheet2',\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <h3 class=\"demo-preview\">Sheet 1</h3>\n    <HotTable :settings=\"sheet1Settings\" />\n    <h3 class=\"demo-preview\">Sheet 2</h3>\n    <HotTable :settings=\"sheet2Settings\" />\n  </div>\n</template>","/src/styles.css":"h3.demo-preview {\n  margin-bottom: 0.3rem !important;\n  padding-top: 0 !important;\n  margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/vue/example1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__angular-hot-instance__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__angular-hot-instance__angular__example1.ts.json
index a26df1ee1..a5b2165a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__angular-hot-instance__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__angular-hot-instance__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Instance access · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-instance-access></example1-instance-access>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-instance-access',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"selectCell()\">Select cell B2</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: true }) readonly hotTable!: HotTableComponent;\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  selectCell(): void {\n    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n    this.hotTable?.hotInstance?.selectCell(1, 1);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/angular-hot-instance/angular/example1.ts","breadcrumb":["Getting Started","Instance access"],"guide":"guides/getting-started/angular-hot-instance/angular-hot-instance.md","guideTitle":"Instance access","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/instance-access","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Instance access · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-instance-access></example1-instance-access>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-instance-access',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"selectCell()\">Select cell B2</button>\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: true }) readonly hotTable!: HotTableComponent;\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  selectCell(): void {\n    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n    this.hotTable?.hotInstance?.selectCell(1, 1);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/angular-hot-instance/angular/example1.ts","breadcrumb":["Getting Started","Instance access"],"guide":"guides/getting-started/angular-hot-instance/angular-hot-instance.md","guideTitle":"Instance access","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/instance-access","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
index 7c503d361..6e5c9f3c0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-binding-data></example1-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    startRows: 5,\n    startCols: 5,\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-binding-data></example1-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    startRows: 5,\n    startCols: 5,\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
index 744522812..1fe4d642b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example10-binding-data></example10-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example10-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    this.hotTable?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example10-binding-data></example10-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example10-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    this.hotTable?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
index e3f7838f0..239fb8bff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example11-binding-data></example11-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example11-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"dataAfterClone\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n  readonly dataAfterClone = structuredClone(this.data);\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example11-binding-data></example11-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example11-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"dataAfterClone\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n  readonly dataAfterClone = structuredClone(this.data);\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
index 3a983086a..795117e15 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-binding-data></example2-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-binding-data></example2-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example3.ts.json
index 129d952f5..e1bf16d4d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-binding-data></example3-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\n@Component({\n  selector: 'example3-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: 'Ted Right', address: '' },\n    { id: 2, name: 'Frank Honest', address: '' },\n    { id: 3, name: 'Joan Well', address: '' },\n    { id: 4, name: 'Gail Polite', address: '' },\n    { id: 5, name: 'Michael Fair', address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-binding-data></example3-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\n@Component({\n  selector: 'example3-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: 'Ted Right', address: '' },\n    { id: 2, name: 'Frank Honest', address: '' },\n    { id: 3, name: 'Joan Well', address: '' },\n    { id: 4, name: 'Gail Polite', address: '' },\n    { id: 5, name: 'Michael Fair', address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example4.ts.json
index 59cb43128..5a48c13e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-binding-data></example4-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\n@Component({\n  selector: 'example4-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: (columnIndex: number) => {\n      switch (columnIndex) {\n        case 0:\n          return { data: 'id' };\n        case 1:\n          return { data: 'name.first' };\n        case 2:\n          return { data: 'name.last' };\n        case 3:\n          return { data: 'address' };\n        default:\n          return {};\n      }\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-binding-data></example4-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\n@Component({\n  selector: 'example4-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: (columnIndex: number) => {\n      switch (columnIndex) {\n        case 0:\n          return { data: 'id' };\n        case 1:\n          return { data: 'name.first' };\n        case 2:\n          return { data: 'name.last' };\n        case 3:\n          return { data: 'address' };\n        default:\n          return {};\n      }\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example5.ts.json
index 76c974ba1..97428ccde 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-binding-data></example5-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\n@Component({\n  selector: 'example5-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'address' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-binding-data></example5-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\n@Component({\n  selector: 'example5-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'address' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example6.ts.json
index b93a31bb5..57d17b236 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-binding-data></example6-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [];\n  readonly gridSettings: GridSettings = {\n    dataSchema: {\n      id: null,\n      name: {\n        first: null,\n        last: null,\n      },\n      address: null,\n    },\n    startRows: 5,\n    startCols: 4,\n    colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'address' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example6-binding-data></example6-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example6-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [];\n  readonly gridSettings: GridSettings = {\n    dataSchema: {\n      id: null,\n      name: {\n        first: null,\n        last: null,\n      },\n      address: null,\n    },\n    startRows: 5,\n    startCols: 4,\n    colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 'id' },\n      { data: 'name.first' },\n      { data: 'name.last' },\n      { data: 'address' },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example7.ts.json
index e14c64a4f..b46041f47 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-binding-data></example7-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, Type } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\ninterface ModelOptions {\n  [x: string]: any;\n  id?: number;\n  name?: string;\n  address?: string;\n  hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n  [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial<Person> {\n  const _pub: Partial<Person> = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n\n  const _priv: Partial<PrivPerson> = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function (\n    attr: keyof Person | string,\n    val?: Handsontable.CellValue\n  ) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) =>\n    (row as unknown as Person).attr(attr, value);\n}\n\n@Component({\n  selector: 'example7-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ];\n\n  readonly gridSettings: GridSettings = {\n    dataSchema: model,\n    height: 'auto',\n    width: 'auto',\n    colHeaders: ['ID', 'Name', 'Address'],\n    columns: [\n      { data: property('id') },\n      { data: property('name') },\n      { data: property('address') },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example7-binding-data></example7-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, Type } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\ninterface ModelOptions {\n  [x: string]: any;\n  id?: number;\n  name?: string;\n  address?: string;\n  hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n  [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial<Person> {\n  const _pub: Partial<Person> = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n\n  const _priv: Partial<PrivPerson> = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function (\n    attr: keyof Person | string,\n    val?: Handsontable.CellValue\n  ) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) =>\n    (row as unknown as Person).attr(attr, value);\n}\n\n@Component({\n  selector: 'example7-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ];\n\n  readonly gridSettings: GridSettings = {\n    dataSchema: model,\n    height: 'auto',\n    width: 'auto',\n    colHeaders: ['ID', 'Name', 'Address'],\n    columns: [\n      { data: property('id') },\n      { data: property('name') },\n      { data: property('address') },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example9.ts.json
index 2b0d975f8..e9bfb82d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example9.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · No data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example9-binding-data></example9-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example9-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example9.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · No data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example9-binding-data></example9-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example9-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example9.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
index 22a3aeb60..a2b45f7ae 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
index 82e61a71e..032d36d3c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
index 3b05e5174..472ee1840 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
index eee0245b1..abad4a210 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
index 638f5048b..e1c00f840 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
index be021e4e5..b9e2a5f9f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
index 943e67c19..56b073970 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
index 434086ed1..74ca9fab5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.js.json
index f2fbb632e..12ee5f8c4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example3.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example3.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.ts.json
index 28796c8dc..7962e30eb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.js.json
index 007b78eff..bb70e86f8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' },\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    switch (column) {\n      case 0:\n        return { data: 'id' };\n      case 1:\n        return { data: 'name.first' };\n      case 2:\n        return { data: 'name.last' };\n      case 3:\n        return { data: 'address' };\n      default:\n        return {};\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example4.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' },\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    switch (column) {\n      case 0:\n        return { data: 'id' };\n      case 1:\n        return { data: 'name.first' };\n      case 2:\n        return { data: 'name.last' };\n      case 3:\n        return { data: 'address' };\n      default:\n        return {};\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example4.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.ts.json
index ccfd11185..3f7cf41a3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    switch (column) {\n      case 0:\n        return { data: 'id' };\n      case 1:\n        return { data: 'name.first' };\n      case 2:\n        return { data: 'name.last' };\n      case 3:\n        return { data: 'address' };\n      default:\n        return {};\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    switch (column) {\n      case 0:\n        return { data: 'id' };\n      case 1:\n        return { data: 'name.first' };\n      case 2:\n        return { data: 'name.last' };\n      case 3:\n        return { data: 'address' };\n      default:\n        return {};\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.js.json
index 4c3feeb06..eb7fc150a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' },\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example5.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' },\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example5.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.ts.json
index 976d10fda..b460b8560 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.js.json
index c1c1cf7fc..71ba37384 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data: [],\n  dataSchema: { id: null, name: { first: null, last: null }, address: null },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example6.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data: [],\n  dataSchema: { id: null, name: { first: null, last: null }, address: null },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example6.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.ts.json
index c2f51f8d0..e6f981ecb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data: [],\n  dataSchema: { id: null, name: { first: null, last: null }, address: null },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data: [],\n  dataSchema: { id: null, name: { first: null, last: null }, address: null },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.js.json
index 4299e3b00..fc9878835 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person) {\n  const _pub = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: () => _pub,\n  };\n\n  const _priv = {};\n\n  for (const prop in person) {\n    if (person.hasOwnProperty(prop)) {\n      _priv[prop] = person[prop];\n    }\n  }\n\n  _pub.attr = (attr, val) => {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr) {\n  return (row, value) => row.attr(attr, value);\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person) {\n  const _pub = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: () => _pub,\n  };\n\n  const _priv = {};\n\n  for (const prop in person) {\n    if (person.hasOwnProperty(prop)) {\n      _priv[prop] = person[prop];\n    }\n  }\n\n  _pub.attr = (attr, val) => {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr) {\n  return (row, value) => row.attr(attr, value);\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.ts.json
index 65210c59e..dd585dadc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example7.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person: Partial<Person>) {\n  const _pub: Person = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: () => _pub,\n  };\n\n  const _priv: Partial<Person> = {};\n\n  for (const prop in person) {\n    if (person.hasOwnProperty(prop)) {\n      _priv[prop] = person[prop];\n    }\n  }\n\n  _pub.attr = (attr, val) => {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person: Partial<Person>) {\n  const _pub: Person = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: () => _pub,\n  };\n\n  const _priv: Partial<Person> = {};\n\n  for (const prop in person) {\n    if (person.hasOwnProperty(prop)) {\n      _priv[prop] = person[prop];\n    }\n  }\n\n  _pub.attr = (attr, val) => {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.js.json
index 654e90128..6552fecac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · No data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example9');\n\nnew Handsontable(container, {\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example9.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · No data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example9');\n\nnew Handsontable(container, {\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example9.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.ts.json
index 0c014e363..f9cad0d91 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example9.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · No data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example9.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · No data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example9.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
index 02bda9a23..66a3b9700 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    startRows={5}\n    startCols={5}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={true}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example1.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    startRows={5}\n    startCols={5}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={true}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example1.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
index d26249821..70650ee2d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, FC } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (hot) {\n      hot.setDataAtCell(0, 1, 'Ford');\n    }\n  }, []); // run once\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example10.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, FC } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (hot) {\n      hot.setDataAtCell(0, 1, 'Ford');\n    }\n  }, []); // run once\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example10.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
index b101b2eda..93e8c9fc0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst clonedData = structuredClone(data);\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={clonedData}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example11.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst clonedData = structuredClone(data);\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={clonedData}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example11.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
index bddb123ab..e9233e146 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example2.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example2.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example3.tsx.json
index 7fd2f2dd2..f3f55c361 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example3.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name: string;\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: 'Ted Right', address: '' },\n  { id: 2, name: 'Frank Honest', address: '' },\n  { id: 3, name: 'Joan Well', address: '' },\n  { id: 4, name: 'Gail Polite', address: '' },\n  { id: 5, name: 'Michael Fair', address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example3.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example4.tsx.json
index 396f14899..ca5239f2b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst ExampleComponent: FC = () => {\n  const data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      height=\"auto\"\n      width=\"auto\"\n      columns={(column) => {\n        let columnMeta = {};\n\n        if (column === 0) {\n          columnMeta.data = 'id';\n        } else if (column === 1) {\n          columnMeta.data = 'name.first';\n        } else if (column === 2) {\n          columnMeta.data = 'name.last';\n        } else if (column === 3) {\n          columnMeta.data = 'address';\n        } else {\n          columnMeta = {};\n        }\n\n        return columnMeta;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example4.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst ExampleComponent: FC = () => {\n  const data: Person[] = [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' }, // Handsontable will create missing properties on demand\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ];\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      height=\"auto\"\n      width=\"auto\"\n      columns={(column) => {\n        let columnMeta = {};\n\n        if (column === 0) {\n          columnMeta.data = 'id';\n        } else if (column === 1) {\n          columnMeta.data = 'name.first';\n        } else if (column === 2) {\n          columnMeta.data = 'name.last';\n        } else if (column === 3) {\n          columnMeta.data = 'address';\n        } else {\n          columnMeta = {};\n        }\n\n        return columnMeta;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example4.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example5.tsx.json
index 7eca0c4db..4ba9590e9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example5.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n  id: number;\n  name?: { first: string; last: string };\n  address: string;\n}\n\nconst data: Person[] = [\n  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n  { id: 2, address: '' }, // Handsontable will create missing properties on demand\n  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example5.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example6.tsx.json
index 4b122ab96..6f1b26b59 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    dataSchema={{\n      id: null,\n      name: {\n        first: null,\n        last: null,\n      },\n      address: null,\n    }}\n    startRows={5}\n    startCols={4}\n    colHeaders={['ID', 'First Name', 'Last Name', 'Address']}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example6.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    dataSchema={{\n      id: null,\n      name: {\n        first: null,\n        last: null,\n      },\n      address: null,\n    }}\n    startRows={5}\n    startCols={4}\n    colHeaders={['ID', 'First Name', 'Last Name', 'Address']}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example6.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example7.tsx.json
index 82c67e1d0..b44e8eb8c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example7.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example7.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Function data source and schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ModelOptions {\n  [x: string]: any;\n  id?: number;\n  name?: string;\n  address?: string;\n  hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n  [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial<Person> {\n  const _pub: Partial<Person> = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n\n  const _priv: Partial<PrivPerson> = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function (attr: keyof Person | string, val?: Handsontable.CellValue) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}\n\nconst data: Partial<Person>[] = [\n  model({ id: 1, name: 'Ted Right', address: '' }),\n  model({ id: 2, name: 'Frank Honest', address: '' }),\n  model({ id: 3, name: 'Joan Well', address: '' }),\n  model({ id: 4, name: 'Gail Polite', address: '' }),\n  model({ id: 5, name: 'Michael Fair', address: '' }),\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    dataSchema={model}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={['ID', 'Name', 'Address']}\n    columns={[{ data: property('id') }, { data: property('name') }, { data: property('address') }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example7.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Function data source and schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ninterface Person {\n  id: number | undefined;\n  name: string | undefined;\n  address: string | undefined;\n  attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ModelOptions {\n  [x: string]: any;\n  id?: number;\n  name?: string;\n  address?: string;\n  hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n  [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial<Person> {\n  const _pub: Partial<Person> = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n\n  const _priv: Partial<PrivPerson> = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function (attr: keyof Person | string, val?: Handsontable.CellValue) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n\n      return _priv[attr];\n    }\n\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n  return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}\n\nconst data: Partial<Person>[] = [\n  model({ id: 1, name: 'Ted Right', address: '' }),\n  model({ id: 2, name: 'Frank Honest', address: '' }),\n  model({ id: 3, name: 'Joan Well', address: '' }),\n  model({ id: 4, name: 'Gail Polite', address: '' }),\n  model({ id: 5, name: 'Michael Fair', address: '' }),\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    dataSchema={model}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={['ID', 'Name', 'Address']}\n    columns={[{ data: property('id') }, { data: property('name') }, { data: property('address') }]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example7.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example9.tsx.json
index ad4e599e4..0b96a042c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example9.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example9.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · No data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => (\n  <HotTable autoWrapRow={true} autoWrapCol={true} height=\"auto\" licenseKey=\"non-commercial-and-evaluation\" />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example9.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · No data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => (\n  <HotTable autoWrapRow={true} autoWrapCol={true} height=\"auto\" licenseKey=\"non-commercial-and-evaluation\" />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example9.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
index 8418ccc8d..834d3f21c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example1.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example1.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
index 6f7edbae6..8f3785b4a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example10.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example10.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
index 196dd1681..45694398a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example11\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example11.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example11\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example11.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
index 1f8a4b946..3ba885832 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example2.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example2.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example3.vue.json
index 9517d6f29..5577c7514 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: 'Ted Right', address: '' },\n    { id: 2, name: 'Frank Honest', address: '' },\n    { id: 3, name: 'Joan Well', address: '' },\n    { id: 4, name: 'Gail Polite', address: '' },\n    { id: 5, name: 'Michael Fair', address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example3.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: 'Ted Right', address: '' },\n    { id: 2, name: 'Frank Honest', address: '' },\n    { id: 3, name: 'Joan Well', address: '' },\n    { id: 4, name: 'Gail Polite', address: '' },\n    { id: 5, name: 'Michael Fair', address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example3.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example4.vue.json
index 07ebae3bd..48fc905b2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' },\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    let columnMeta = {};\n\n    if (column === 0) {\n      columnMeta.data = 'id';\n    } else if (column === 1) {\n      columnMeta.data = 'name.first';\n    } else if (column === 2) {\n      columnMeta.data = 'name.last';\n    } else if (column === 3) {\n      columnMeta.data = 'address';\n    } else {\n      columnMeta = {};\n    }\n\n    return columnMeta;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example4.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' },\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns(column) {\n    let columnMeta = {};\n\n    if (column === 0) {\n      columnMeta.data = 'id';\n    } else if (column === 1) {\n      columnMeta.data = 'name.first';\n    } else if (column === 2) {\n      columnMeta.data = 'name.last';\n    } else if (column === 3) {\n      columnMeta.data = 'address';\n    } else {\n      columnMeta = {};\n    }\n\n    return columnMeta;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example4.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example5.vue.json
index b53b54841..5737d0532 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' },\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example5.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n    { id: 2, address: '' },\n    { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example5.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example6.vue.json
index b920dd2d0..750f141a0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  dataSchema: {\n    id: null,\n    name: {\n      first: null,\n      last: null,\n    },\n    address: null,\n  },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example6.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [],\n  dataSchema: {\n    id: null,\n    name: {\n      first: null,\n      last: null,\n    },\n    address: null,\n  },\n  startRows: 5,\n  startCols: 4,\n  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n  height: 'auto',\n  width: 'auto',\n  columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example6.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example7.vue.json
index 58d4c2d22..9965f8b85 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example7.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example7.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ModelOpts = Record<string, unknown>;\n\nfunction model(opts: ModelOpts) {\n  const _pub = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n  const _priv = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function(attr: string, val?: unknown) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n      return _priv[attr];\n    }\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: string) {\n  return (row: ReturnType<typeof model>, value: unknown) => row.attr(attr, value);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example7.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example7\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ModelOpts = Record<string, unknown>;\n\nfunction model(opts: ModelOpts) {\n  const _pub = {\n    id: undefined,\n    name: undefined,\n    address: undefined,\n    attr: undefined,\n  };\n  const _priv = {};\n\n  for (const i in opts) {\n    if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n      _priv[i] = opts[i];\n    }\n  }\n\n  _pub.attr = function(attr: string, val?: unknown) {\n    if (typeof val === 'undefined') {\n      window.console && console.log('GET the', attr, 'value of', _pub);\n      return _priv[attr];\n    }\n    window.console && console.log('SET the', attr, 'value of', _pub);\n    _priv[attr] = val;\n    return _pub;\n  };\n\n  return _pub;\n}\n\nfunction property(attr: string) {\n  return (row: ReturnType<typeof model>, value: unknown) => row.attr(attr, value);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    model({ id: 1, name: 'Ted Right', address: '' }),\n    model({ id: 2, name: 'Frank Honest', address: '' }),\n    model({ id: 3, name: 'Joan Well', address: '' }),\n    model({ id: 4, name: 'Gail Polite', address: '' }),\n    model({ id: 5, name: 'Michael Fair', address: '' }),\n  ],\n  dataSchema: model,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['ID', 'Name', 'Address'],\n  columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example7\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example7.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example9.vue.json
index 128433c91..54558c731 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example9.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example9.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · No data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example9.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · No data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example9\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example9\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example9.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example9","exampleTitle":"No data","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__angular__example1.ts.json
index 7c40bff84..a86415b6c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-custom-id></example1-custom-id>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-custom-id',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table\n      id=\"inventory-grid\"\n      class=\"inventory-grid\"\n      style=\"display: block; border: 1px solid #4caf50;\"\n      [data]=\"data\"\n      [settings]=\"gridSettings\"\n    ></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/custom-id-class-style/angular/example1.ts","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-custom-id></example1-custom-id>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-custom-id',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table\n      id=\"inventory-grid\"\n      class=\"inventory-grid\"\n      style=\"display: block; border: 1px solid #4caf50;\"\n      [data]=\"data\"\n      [settings]=\"gridSettings\"\n    ></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/custom-id-class-style/angular/example1.ts","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.js.json
index cca3097ce..ff223fc9c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\n// apply a custom class and inline style to the container element\ncontainer.classList.add('inventory-grid');\ncontainer.style.border = '1px solid #4caf50';\nconst data = [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\nnew Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/custom-id-class-style/javascript/example1.js","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\n// apply a custom class and inline style to the container element\ncontainer.classList.add('inventory-grid');\ncontainer.style.border = '1px solid #4caf50';\nconst data = [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\nnew Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/custom-id-class-style/javascript/example1.js","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.ts.json
index f04d42880..fe193f401 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\n// apply a custom class and inline style to the container element\ncontainer.classList.add('inventory-grid');\ncontainer.style.border = '1px solid #4caf50';\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n  ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n  ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n  ['SKU-3340', 'Notebook', 230, 'Stationery'],\n  ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/custom-id-class-style/javascript/example1.ts","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\n// apply a custom class and inline style to the container element\ncontainer.classList.add('inventory-grid');\ncontainer.style.border = '1px solid #4caf50';\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n  ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n  ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n  ['SKU-3340', 'Notebook', 230, 'Stationery'],\n  ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/custom-id-class-style/javascript/example1.ts","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__react__example1.tsx.json
index 5adb66e69..d7c35f8a8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n  ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n  ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n  ['SKU-3340', 'Notebook', 230, 'Stationery'],\n  ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    id=\"inventory-grid\"\n    className=\"inventory-grid\"\n    style={{ border: '1px solid #4caf50' }}\n    data={data}\n    colHeaders={['SKU', 'Product', 'Stock', 'Category']}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/custom-id-class-style/react/example1.tsx","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n  ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n  ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n  ['SKU-3340', 'Notebook', 230, 'Stationery'],\n  ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    id=\"inventory-grid\"\n    className=\"inventory-grid\"\n    style={{ border: '1px solid #4caf50' }}\n    data={data}\n    colHeaders={['SKU', 'Product', 'Stock', 'Category']}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/custom-id-class-style/react/example1.tsx","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__vue__example1.vue.json
index 0104f96ff..e9a4ae2d5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__custom-id-class-style__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst id = ref('inventory-grid');\nconst className = ref('inventory-grid');\nconst style = ref('border: 1px solid #4caf50;');\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :id=\"id\" :class=\"className\" :style=\"style\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/custom-id-class-style/vue/example1.vue","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Custom ID, class, and style · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],\n    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],\n    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],\n    ['SKU-3340', 'Notebook', 230, 'Stationery'],\n    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Stock', 'Category'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst id = ref('inventory-grid');\nconst className = ref('inventory-grid');\nconst style = ref('border: 1px solid #4caf50;');\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :id=\"id\" :class=\"className\" :style=\"style\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/custom-id-class-style/vue/example1.vue","breadcrumb":["Getting Started","Custom ID, class, and style"],"guide":"guides/getting-started/custom-id-class-style/custom-id-class-style.md","guideTitle":"Custom ID, class, and style","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-id-class-style","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__angular__example1.ts.json
index cebf00d5a..85f29f0b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Demo · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-demo></example1-demo>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport { CellProperties } from 'handsontable/settings';\nimport { PredefinedMenuItemKey } from 'handsontable/plugins/contextMenu';\n\n// constants.ts\nexport const data = [\n  [\n    false,\n    'Tagcat',\n    'United Kingdom',\n    'Classic Vest',\n    '2025-10-11',\n    '01-2331942',\n    true,\n    '172',\n    2,\n    2,\n  ],\n  [\n    true,\n    'Zoomzone',\n    'Indonesia',\n    'Cycling Cap',\n    '2025-05-03',\n    '88-2768633',\n    true,\n    '188',\n    6,\n    2,\n  ],\n  [\n    true,\n    'Meeveo',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-03-27',\n    '51-6775945',\n    true,\n    '162',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Buzzdog',\n    'Philippines',\n    'HL Mountain Frame',\n    '2025-08-29',\n    '44-4028109',\n    true,\n    '133',\n    7,\n    1,\n  ],\n  [\n    true,\n    'Katz',\n    'India',\n    'Half-Finger Gloves',\n    '2025-10-02',\n    '08-2758492',\n    true,\n    '87',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Jaxbean',\n    'China',\n    'HL Road Frame',\n    '2025-09-28',\n    '84-3557705',\n    false,\n    '26',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Wikido',\n    'Brazil',\n    'HL Touring Frame',\n    '2025-06-24',\n    '20-9397637',\n    false,\n    '110',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Browsedrive',\n    'United States',\n    'LL Mountain Frame',\n    '2025-03-13',\n    '36-0079556',\n    true,\n    '50',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Twinder',\n    'United Kingdom',\n    'LL Road Frame',\n    '2025-04-06',\n    '41-1489542',\n    false,\n    '160',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Jetwire',\n    'China',\n    'LL Touring Frame',\n    '2025-02-01',\n    '37-1531629',\n    true,\n    '30',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Chatterpoint',\n    'China',\n    'Long-Sleeve Logo Jersey',\n    '2025-07-14',\n    '25-5083429',\n    true,\n    '39',\n    7,\n    2,\n  ],\n  [\n    false,\n    'Twinder',\n    'Egypt',\n    \"Men's Bib-Shorts\",\n    '2025-08-31',\n    '04-4281278',\n    false,\n    '96',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Midel',\n    'United States',\n    \"Men's Sports Shorts\",\n    '2025-06-27',\n    '55-1711908',\n    true,\n    '108',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yodo',\n    'India',\n    'ML Mountain Frame',\n    '2025-03-16',\n    '58-8360815',\n    false,\n    '46',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Camido',\n    'Russia',\n    'ML Mountain Frame-W',\n    '2025-09-13',\n    '10-3786104',\n    true,\n    '97',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eire',\n    'Thailand',\n    'ML Road Frame',\n    '2025-04-10',\n    '45-1186054',\n    true,\n    '161',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Vinte',\n    'United Kingdom',\n    'ML Road Frame-W',\n    '2025-01-22',\n    '62-6202742',\n    true,\n    '58',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Twitterlist',\n    'China',\n    'Mountain Bike Socks',\n    '2025-11-09',\n    '88-9646223',\n    true,\n    '92',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eidel',\n    'Bangladesh',\n    'Mountain-100',\n    '2025-09-19',\n    '45-5588112',\n    true,\n    '5',\n    6,\n    5,\n  ],\n  [\n    false,\n    'Trunyx',\n    'Nigeria',\n    'Mountain-200',\n    '2025-03-09',\n    '66-6271819',\n    true,\n    '158',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Katz',\n    'Turkey',\n    'Mountain-300',\n    '2025-03-05',\n    '38-9245023',\n    false,\n    '121',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Kaymbo',\n    'United States',\n    'Mountain-400-W',\n    '2025-12-24',\n    '44-5916927',\n    false,\n    '61',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Ozu',\n    'Pakistan',\n    'Mountain-500',\n    '2025-06-13',\n    '31-5449914',\n    true,\n    '155',\n    2,\n    2,\n  ],\n  [\n    false,\n    'Rhynyx',\n    'India',\n    'Racing Socks',\n    '2025-12-05',\n    '19-9413869',\n    true,\n    '162',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Flashset',\n    'Iran',\n    'Road-150',\n    '2025-12-14',\n    '25-9807605',\n    false,\n    '46',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Yata',\n    'Congo (Kinshasa)',\n    'Road-250',\n    '2025-06-12',\n    '74-4291983',\n    true,\n    '47',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Brainlounge',\n    'Vietnam',\n    'Road-350-W',\n    '2025-03-10',\n    '83-0980643',\n    true,\n    '104',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Babblestorm',\n    'United States',\n    'Road-450',\n    '2025-10-10',\n    '19-2878430',\n    true,\n    '101',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Youspan',\n    'Brazil',\n    'Road-550-W',\n    '2025-12-16',\n    '19-1838230',\n    true,\n    '150',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Nlounge',\n    'China',\n    'Road-650',\n    '2025-10-31',\n    '32-2267938',\n    true,\n    '42',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Twinte',\n    'India',\n    'Road-750',\n    '2025-08-17',\n    '79-2821972',\n    true,\n    '144',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Oyonder',\n    'United Kingdom',\n    'Short-Sleeve Classic Jersey',\n    '2025-12-04',\n    '46-6597557',\n    true,\n    '195',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Gigabox',\n    'Pakistan',\n    'Sport-100',\n    '2025-02-03',\n    '15-1793960',\n    true,\n    '199',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Livetube',\n    'France',\n    'Touring-1000',\n    '2025-05-16',\n    '86-0811003',\n    true,\n    '110',\n    4,\n    5,\n  ],\n  [\n    false,\n    'Voomm',\n    'United Kingdom',\n    'Touring-2000',\n    '2025-07-15',\n    '95-3068680',\n    true,\n    '51',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Voonyx',\n    'China',\n    'Touring-3000',\n    '2025-11-27',\n    '35-3085360',\n    false,\n    '69',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Zoombeat',\n    'United States',\n    \"Women's Mountain Shorts\",\n    '2025-11-03',\n    '56-8673088',\n    false,\n    '53',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Roomm',\n    'China',\n    \"Women's Tights\",\n    '2025-03-16',\n    '76-0085918',\n    true,\n    '168',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'Mountain-400',\n    '2025-05-16',\n    '03-0893276',\n    false,\n    '58',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Jetpulse',\n    'United States',\n    'Road-550',\n    '2025-02-08',\n    '79-9013306',\n    true,\n    '152',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Katz',\n    'Peru',\n    'Road-350',\n    '2025-02-15',\n    '55-7799920',\n    true,\n    '66',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogidoo',\n    'India',\n    'LL Mountain Front Wheel',\n    '2025-06-04',\n    '07-0881122',\n    false,\n    '112',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Divavu',\n    'Colombia',\n    'Touring Rear Wheel',\n    '2025-02-24',\n    '58-6157387',\n    true,\n    '50',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Mydeo',\n    'China',\n    'Touring Front Wheel',\n    '2025-12-07',\n    '12-2810010',\n    false,\n    '31',\n    3,\n    5,\n  ],\n  [\n    false,\n    'Browsebug',\n    'Japan',\n    'ML Mountain Front Wheel',\n    '2025-01-14',\n    '64-9249984',\n    true,\n    '132',\n    5,\n    5,\n  ],\n  [\n    false,\n    'Layo',\n    'China',\n    'HL Mountain Front Wheel',\n    '2025-04-24',\n    '45-0739652',\n    true,\n    '45',\n    1,\n    5,\n  ],\n  [\n    false,\n    'Snaptags',\n    'United Kingdom',\n    'LL Touring Handlebars',\n    '2025-08-06',\n    '09-5712761',\n    true,\n    '197',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogilith',\n    'China',\n    'HL Touring Handlebars',\n    '2025-05-31',\n    '01-7345008',\n    true,\n    '190',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Reallinks',\n    'United Kingdom',\n    'LL Road Front Wheel',\n    '2025-05-14',\n    '62-1065350',\n    true,\n    '184',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United States',\n    'ML Road Front Wheel',\n    '2025-03-23',\n    '44-7241323',\n    true,\n    '169',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Devify',\n    'China',\n    'HL Road Front Wheel',\n    '2025-12-12',\n    '52-0295699',\n    false,\n    '152',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Youopia',\n    'Angola',\n    'LL Mountain Handlebars',\n    '2025-04-01',\n    '52-2650922',\n    false,\n    '182',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Ainyx',\n    'China',\n    'Touring Pedal',\n    '2025-02-27',\n    '48-3618525',\n    true,\n    '141',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Browsetype',\n    'Malaysia',\n    'ML Mountain Handlebars',\n    '2025-04-28',\n    '51-8893923',\n    true,\n    '169',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Handlebars',\n    '2025-08-22',\n    '68-5911361',\n    false,\n    '39',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Bubbletube',\n    'China',\n    'LL Road Handlebars',\n    '2025-10-04',\n    '41-5880042',\n    true,\n    '71',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Fadeo',\n    'Vietnam',\n    'ML Road Handlebars',\n    '2025-04-23',\n    '90-5913983',\n    true,\n    '148',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yadel',\n    'United Kingdom',\n    'HL Road Handlebars',\n    '2025-04-18',\n    '92-0960699',\n    true,\n    '116',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Blognation',\n    'China',\n    'LL Headset',\n    '2025-01-10',\n    '06-9493898',\n    true,\n    '96',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Devpoint',\n    'China',\n    'ML Headset',\n    '2025-12-25',\n    '69-5878565',\n    true,\n    '35',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Aibox',\n    'United Kingdom',\n    'HL Headset',\n    '2025-03-18',\n    '13-1133017',\n    true,\n    '16',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Brightdog',\n    'China',\n    'LL Mountain Pedal',\n    '2025-09-11',\n    '39-6530433',\n    true,\n    '194',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Gabcube',\n    'Nigeria',\n    'ML Mountain Pedal',\n    '2025-04-22',\n    '96-6860388',\n    true,\n    '24',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Pedal',\n    '2025-06-05',\n    '30-0356137',\n    true,\n    '170',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Tambee',\n    'China',\n    'ML Touring Seat/Saddle',\n    '2025-02-22',\n    '93-9058255',\n    true,\n    '184',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Cogilith',\n    'India',\n    'LL Touring Seat/Saddle',\n    '2025-04-06',\n    '82-9268909',\n    false,\n    '153',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Dynabox',\n    'Hong Kong',\n    'HL Touring Seat/Saddle',\n    '2025-01-10',\n    '20-6913815',\n    false,\n    '88',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Shuffledrive',\n    'Sudan',\n    'LL Road Pedal',\n    '2025-09-16',\n    '08-8238817',\n    true,\n    '57',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Fivechat',\n    'China',\n    'ML Road Pedal',\n    '2025-08-26',\n    '44-7370350',\n    false,\n    '62',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Meembee',\n    'United States',\n    'HL Road Pedal',\n    '2025-12-27',\n    '01-3525949',\n    true,\n    '123',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Dynazzy',\n    'United Kingdom',\n    'LL Mountain Seat/Saddle 1',\n    '2025-12-15',\n    '04-2414623',\n    true,\n    '77',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Eare',\n    'China',\n    'ML Mountain Seat/Saddle 1',\n    '2025-04-04',\n    '15-1917509',\n    false,\n    '199',\n    9,\n    4,\n  ],\n  [\n    false,\n    'Yozio',\n    'China',\n    'HL Mountain Seat/Saddle 1',\n    '2025-03-15',\n    '06-2526845',\n    true,\n    '149',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Quinu',\n    \"Xi'an\",\n    '425-777-7829',\n    '2025-02-22',\n    '83-1713558',\n    false,\n    '191',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Jazzy',\n    'United Kingdom',\n    'ML Road Seat/Saddle 1',\n    '2025-08-07',\n    '00-8892524',\n    true,\n    '150',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Thoughtsphere',\n    'China',\n    'HL Road Seat/Saddle 1',\n    '2025-11-28',\n    '39-5538991',\n    true,\n    '130',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'ML Road Rear Wheel',\n    '2025-12-29',\n    '06-9002973',\n    true,\n    '179',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United Kingdom',\n    'HL Road Rear Wheel',\n    '2025-09-06',\n    '73-6104901',\n    true,\n    '98',\n    5,\n    3,\n  ],\n  [\n    false,\n    'Tanoodle',\n    'Chile',\n    'LL Mountain Seat/Saddle 2',\n    '2025-05-24',\n    '68-7384479',\n    true,\n    '175',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Feednation',\n    'China',\n    'ML Mountain Seat/Saddle 2',\n    '2025-11-21',\n    '26-7757763',\n    true,\n    '11',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Kayveo',\n    'China',\n    'HL Mountain Seat/Saddle 2',\n    '2025-06-21',\n    '07-4873562',\n    false,\n    '184',\n    7,\n    4,\n  ],\n  [\n    false,\n    'Meevee',\n    'Saudi Arabia',\n    'LL Road Seat/Saddle 1',\n    '2025-11-16',\n    '46-5819554',\n    false,\n    '27',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Twitterworks',\n    'China',\n    'ML Road Seat/Saddle 2',\n    '2025-04-19',\n    '01-2666826',\n    true,\n    '186',\n    3,\n    2,\n  ],\n  [\n    false,\n    'Wikizz',\n    'Tanzania',\n    'HL Road Seat/Saddle 2',\n    '2025-03-08',\n    '54-7090503',\n    true,\n    '20',\n    3,\n    3,\n  ],\n  [\n    false,\n    'Yoveo',\n    'United States',\n    'LL Mountain Tire',\n    '2025-10-14',\n    '78-7658520',\n    false,\n    '153',\n    2,\n    1,\n  ],\n  [\n    false,\n    'Yakidoo',\n    'China',\n    'ML Mountain Tire',\n    '2025-10-12',\n    '23-9926318',\n    true,\n    '161',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Oyope',\n    'China',\n    'HL Mountain Tire',\n    '2025-09-20',\n    '20-0179517',\n    true,\n    '98',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Skipstorm',\n    'United States',\n    'LL Road Tire',\n    '2025-10-01',\n    '02-9543343',\n    true,\n    '30',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Minyx',\n    'United States',\n    'ML Road Tire',\n    '2025-07-07',\n    '98-3938169',\n    true,\n    '73',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Miboo',\n    'China',\n    'HL Road Tire',\n    '2025-07-25',\n    '68-5197934',\n    true,\n    '158',\n    9,\n    1,\n  ],\n  [\n    false,\n    'Realfire',\n    'United States',\n    'Touring Tire',\n    '2025-08-27',\n    '39-8260460',\n    true,\n    '122',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Shufflester',\n    'China',\n    'Mountain Tire Tube',\n    '2025-06-08',\n    '45-9776170',\n    true,\n    '33',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Ntag',\n    'China',\n    'Road Tire Tube',\n    '2025-12-06',\n    '45-0858451',\n    true,\n    '107',\n    6,\n    2,\n  ],\n  [\n    false,\n    'Jabberbean',\n    'United States',\n    'Touring Tire Tube',\n    '2025-04-26',\n    '15-4247305',\n    true,\n    '15',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Thoughtblab',\n    'China',\n    'LL Bottom Bracket',\n    '2025-05-21',\n    '15-8534931',\n    true,\n    '168',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Jabbertype',\n    'China',\n    'Classic Vest',\n    '2025-07-25',\n    '23-1251557',\n    true,\n    '135',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Buzzshare',\n    'United Kingdom',\n    'Cycling Cap',\n    '2025-07-07',\n    '86-5920601',\n    true,\n    '11',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Roodel',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-01-13',\n    '48-1055459',\n    true,\n    '41',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Zoovu',\n    'China',\n    'Half-Finger Gloves',\n    '2025-06-03',\n    '12-7842022',\n    true,\n    '144',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Photofeed',\n    'China',\n    'HL Mountain Frame',\n    '2025-07-14',\n    '94-5088099',\n    true,\n    '106',\n    1,\n    4,\n  ],\n];\n\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: Handsontable.CellValue,\n  cellProperties: CellProperties\n) {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\n@Component({\n  selector: 'example1-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<hot-table [data]=\"initialData\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly initialData = data;\n  readonly gridSettings: GridSettings = {\n    height: 450,\n    colWidths: [180, 220, 140, 120, 120, 120, 140],\n    colHeaders: [\n      'Company Name',\n      'Name',\n      'Sell date',\n      'In stock',\n      'Quantity',\n      'Order ID',\n      'Country',\n    ],\n    contextMenu: [\n      'cut',\n      'copy',\n      '---------',\n      'row_above',\n      'row_below',\n      'remove_row',\n      '---------',\n      'alignment',\n      'make_read_only',\n      'clear_column',\n    ] as PredefinedMenuItemKey[],\n    dropdownMenu: true,\n    hiddenColumns: {\n      indicators: true,\n    },\n    multiColumnSorting: true,\n    filters: true,\n    rowHeaders: true,\n    headerClassName: 'htLeft',\n    beforeRenderer: addClassesToRows,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    manualRowResize: true,\n    manualColumnResize: true,\n    navigableHeaders: true,\n    imeFastEdit: true,\n    columns: [\n      { data: 1 },\n      { data: 3 },\n      { data: 4, type: 'intl-date' },\n      { data: 6, type: 'checkbox', className: 'htCenter' },\n      { data: 7, type: 'numeric' },\n      { data: 5 },\n      { data: 2 },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/demo/angular/example1.ts","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/demo","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Demo · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-demo></example1-demo>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport { CellProperties } from 'handsontable/settings';\nimport { PredefinedMenuItemKey } from 'handsontable/plugins/contextMenu';\n\n// constants.ts\nexport const data = [\n  [\n    false,\n    'Tagcat',\n    'United Kingdom',\n    'Classic Vest',\n    '2025-10-11',\n    '01-2331942',\n    true,\n    '172',\n    2,\n    2,\n  ],\n  [\n    true,\n    'Zoomzone',\n    'Indonesia',\n    'Cycling Cap',\n    '2025-05-03',\n    '88-2768633',\n    true,\n    '188',\n    6,\n    2,\n  ],\n  [\n    true,\n    'Meeveo',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-03-27',\n    '51-6775945',\n    true,\n    '162',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Buzzdog',\n    'Philippines',\n    'HL Mountain Frame',\n    '2025-08-29',\n    '44-4028109',\n    true,\n    '133',\n    7,\n    1,\n  ],\n  [\n    true,\n    'Katz',\n    'India',\n    'Half-Finger Gloves',\n    '2025-10-02',\n    '08-2758492',\n    true,\n    '87',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Jaxbean',\n    'China',\n    'HL Road Frame',\n    '2025-09-28',\n    '84-3557705',\n    false,\n    '26',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Wikido',\n    'Brazil',\n    'HL Touring Frame',\n    '2025-06-24',\n    '20-9397637',\n    false,\n    '110',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Browsedrive',\n    'United States',\n    'LL Mountain Frame',\n    '2025-03-13',\n    '36-0079556',\n    true,\n    '50',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Twinder',\n    'United Kingdom',\n    'LL Road Frame',\n    '2025-04-06',\n    '41-1489542',\n    false,\n    '160',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Jetwire',\n    'China',\n    'LL Touring Frame',\n    '2025-02-01',\n    '37-1531629',\n    true,\n    '30',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Chatterpoint',\n    'China',\n    'Long-Sleeve Logo Jersey',\n    '2025-07-14',\n    '25-5083429',\n    true,\n    '39',\n    7,\n    2,\n  ],\n  [\n    false,\n    'Twinder',\n    'Egypt',\n    \"Men's Bib-Shorts\",\n    '2025-08-31',\n    '04-4281278',\n    false,\n    '96',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Midel',\n    'United States',\n    \"Men's Sports Shorts\",\n    '2025-06-27',\n    '55-1711908',\n    true,\n    '108',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yodo',\n    'India',\n    'ML Mountain Frame',\n    '2025-03-16',\n    '58-8360815',\n    false,\n    '46',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Camido',\n    'Russia',\n    'ML Mountain Frame-W',\n    '2025-09-13',\n    '10-3786104',\n    true,\n    '97',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eire',\n    'Thailand',\n    'ML Road Frame',\n    '2025-04-10',\n    '45-1186054',\n    true,\n    '161',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Vinte',\n    'United Kingdom',\n    'ML Road Frame-W',\n    '2025-01-22',\n    '62-6202742',\n    true,\n    '58',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Twitterlist',\n    'China',\n    'Mountain Bike Socks',\n    '2025-11-09',\n    '88-9646223',\n    true,\n    '92',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eidel',\n    'Bangladesh',\n    'Mountain-100',\n    '2025-09-19',\n    '45-5588112',\n    true,\n    '5',\n    6,\n    5,\n  ],\n  [\n    false,\n    'Trunyx',\n    'Nigeria',\n    'Mountain-200',\n    '2025-03-09',\n    '66-6271819',\n    true,\n    '158',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Katz',\n    'Turkey',\n    'Mountain-300',\n    '2025-03-05',\n    '38-9245023',\n    false,\n    '121',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Kaymbo',\n    'United States',\n    'Mountain-400-W',\n    '2025-12-24',\n    '44-5916927',\n    false,\n    '61',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Ozu',\n    'Pakistan',\n    'Mountain-500',\n    '2025-06-13',\n    '31-5449914',\n    true,\n    '155',\n    2,\n    2,\n  ],\n  [\n    false,\n    'Rhynyx',\n    'India',\n    'Racing Socks',\n    '2025-12-05',\n    '19-9413869',\n    true,\n    '162',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Flashset',\n    'Iran',\n    'Road-150',\n    '2025-12-14',\n    '25-9807605',\n    false,\n    '46',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Yata',\n    'Congo (Kinshasa)',\n    'Road-250',\n    '2025-06-12',\n    '74-4291983',\n    true,\n    '47',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Brainlounge',\n    'Vietnam',\n    'Road-350-W',\n    '2025-03-10',\n    '83-0980643',\n    true,\n    '104',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Babblestorm',\n    'United States',\n    'Road-450',\n    '2025-10-10',\n    '19-2878430',\n    true,\n    '101',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Youspan',\n    'Brazil',\n    'Road-550-W',\n    '2025-12-16',\n    '19-1838230',\n    true,\n    '150',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Nlounge',\n    'China',\n    'Road-650',\n    '2025-10-31',\n    '32-2267938',\n    true,\n    '42',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Twinte',\n    'India',\n    'Road-750',\n    '2025-08-17',\n    '79-2821972',\n    true,\n    '144',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Oyonder',\n    'United Kingdom',\n    'Short-Sleeve Classic Jersey',\n    '2025-12-04',\n    '46-6597557',\n    true,\n    '195',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Gigabox',\n    'Pakistan',\n    'Sport-100',\n    '2025-02-03',\n    '15-1793960',\n    true,\n    '199',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Livetube',\n    'France',\n    'Touring-1000',\n    '2025-05-16',\n    '86-0811003',\n    true,\n    '110',\n    4,\n    5,\n  ],\n  [\n    false,\n    'Voomm',\n    'United Kingdom',\n    'Touring-2000',\n    '2025-07-15',\n    '95-3068680',\n    true,\n    '51',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Voonyx',\n    'China',\n    'Touring-3000',\n    '2025-11-27',\n    '35-3085360',\n    false,\n    '69',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Zoombeat',\n    'United States',\n    \"Women's Mountain Shorts\",\n    '2025-11-03',\n    '56-8673088',\n    false,\n    '53',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Roomm',\n    'China',\n    \"Women's Tights\",\n    '2025-03-16',\n    '76-0085918',\n    true,\n    '168',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'Mountain-400',\n    '2025-05-16',\n    '03-0893276',\n    false,\n    '58',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Jetpulse',\n    'United States',\n    'Road-550',\n    '2025-02-08',\n    '79-9013306',\n    true,\n    '152',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Katz',\n    'Peru',\n    'Road-350',\n    '2025-02-15',\n    '55-7799920',\n    true,\n    '66',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogidoo',\n    'India',\n    'LL Mountain Front Wheel',\n    '2025-06-04',\n    '07-0881122',\n    false,\n    '112',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Divavu',\n    'Colombia',\n    'Touring Rear Wheel',\n    '2025-02-24',\n    '58-6157387',\n    true,\n    '50',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Mydeo',\n    'China',\n    'Touring Front Wheel',\n    '2025-12-07',\n    '12-2810010',\n    false,\n    '31',\n    3,\n    5,\n  ],\n  [\n    false,\n    'Browsebug',\n    'Japan',\n    'ML Mountain Front Wheel',\n    '2025-01-14',\n    '64-9249984',\n    true,\n    '132',\n    5,\n    5,\n  ],\n  [\n    false,\n    'Layo',\n    'China',\n    'HL Mountain Front Wheel',\n    '2025-04-24',\n    '45-0739652',\n    true,\n    '45',\n    1,\n    5,\n  ],\n  [\n    false,\n    'Snaptags',\n    'United Kingdom',\n    'LL Touring Handlebars',\n    '2025-08-06',\n    '09-5712761',\n    true,\n    '197',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogilith',\n    'China',\n    'HL Touring Handlebars',\n    '2025-05-31',\n    '01-7345008',\n    true,\n    '190',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Reallinks',\n    'United Kingdom',\n    'LL Road Front Wheel',\n    '2025-05-14',\n    '62-1065350',\n    true,\n    '184',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United States',\n    'ML Road Front Wheel',\n    '2025-03-23',\n    '44-7241323',\n    true,\n    '169',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Devify',\n    'China',\n    'HL Road Front Wheel',\n    '2025-12-12',\n    '52-0295699',\n    false,\n    '152',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Youopia',\n    'Angola',\n    'LL Mountain Handlebars',\n    '2025-04-01',\n    '52-2650922',\n    false,\n    '182',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Ainyx',\n    'China',\n    'Touring Pedal',\n    '2025-02-27',\n    '48-3618525',\n    true,\n    '141',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Browsetype',\n    'Malaysia',\n    'ML Mountain Handlebars',\n    '2025-04-28',\n    '51-8893923',\n    true,\n    '169',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Handlebars',\n    '2025-08-22',\n    '68-5911361',\n    false,\n    '39',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Bubbletube',\n    'China',\n    'LL Road Handlebars',\n    '2025-10-04',\n    '41-5880042',\n    true,\n    '71',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Fadeo',\n    'Vietnam',\n    'ML Road Handlebars',\n    '2025-04-23',\n    '90-5913983',\n    true,\n    '148',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yadel',\n    'United Kingdom',\n    'HL Road Handlebars',\n    '2025-04-18',\n    '92-0960699',\n    true,\n    '116',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Blognation',\n    'China',\n    'LL Headset',\n    '2025-01-10',\n    '06-9493898',\n    true,\n    '96',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Devpoint',\n    'China',\n    'ML Headset',\n    '2025-12-25',\n    '69-5878565',\n    true,\n    '35',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Aibox',\n    'United Kingdom',\n    'HL Headset',\n    '2025-03-18',\n    '13-1133017',\n    true,\n    '16',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Brightdog',\n    'China',\n    'LL Mountain Pedal',\n    '2025-09-11',\n    '39-6530433',\n    true,\n    '194',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Gabcube',\n    'Nigeria',\n    'ML Mountain Pedal',\n    '2025-04-22',\n    '96-6860388',\n    true,\n    '24',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Pedal',\n    '2025-06-05',\n    '30-0356137',\n    true,\n    '170',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Tambee',\n    'China',\n    'ML Touring Seat/Saddle',\n    '2025-02-22',\n    '93-9058255',\n    true,\n    '184',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Cogilith',\n    'India',\n    'LL Touring Seat/Saddle',\n    '2025-04-06',\n    '82-9268909',\n    false,\n    '153',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Dynabox',\n    'Hong Kong',\n    'HL Touring Seat/Saddle',\n    '2025-01-10',\n    '20-6913815',\n    false,\n    '88',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Shuffledrive',\n    'Sudan',\n    'LL Road Pedal',\n    '2025-09-16',\n    '08-8238817',\n    true,\n    '57',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Fivechat',\n    'China',\n    'ML Road Pedal',\n    '2025-08-26',\n    '44-7370350',\n    false,\n    '62',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Meembee',\n    'United States',\n    'HL Road Pedal',\n    '2025-12-27',\n    '01-3525949',\n    true,\n    '123',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Dynazzy',\n    'United Kingdom',\n    'LL Mountain Seat/Saddle 1',\n    '2025-12-15',\n    '04-2414623',\n    true,\n    '77',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Eare',\n    'China',\n    'ML Mountain Seat/Saddle 1',\n    '2025-04-04',\n    '15-1917509',\n    false,\n    '199',\n    9,\n    4,\n  ],\n  [\n    false,\n    'Yozio',\n    'China',\n    'HL Mountain Seat/Saddle 1',\n    '2025-03-15',\n    '06-2526845',\n    true,\n    '149',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Quinu',\n    \"Xi'an\",\n    '425-777-7829',\n    '2025-02-22',\n    '83-1713558',\n    false,\n    '191',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Jazzy',\n    'United Kingdom',\n    'ML Road Seat/Saddle 1',\n    '2025-08-07',\n    '00-8892524',\n    true,\n    '150',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Thoughtsphere',\n    'China',\n    'HL Road Seat/Saddle 1',\n    '2025-11-28',\n    '39-5538991',\n    true,\n    '130',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'ML Road Rear Wheel',\n    '2025-12-29',\n    '06-9002973',\n    true,\n    '179',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United Kingdom',\n    'HL Road Rear Wheel',\n    '2025-09-06',\n    '73-6104901',\n    true,\n    '98',\n    5,\n    3,\n  ],\n  [\n    false,\n    'Tanoodle',\n    'Chile',\n    'LL Mountain Seat/Saddle 2',\n    '2025-05-24',\n    '68-7384479',\n    true,\n    '175',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Feednation',\n    'China',\n    'ML Mountain Seat/Saddle 2',\n    '2025-11-21',\n    '26-7757763',\n    true,\n    '11',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Kayveo',\n    'China',\n    'HL Mountain Seat/Saddle 2',\n    '2025-06-21',\n    '07-4873562',\n    false,\n    '184',\n    7,\n    4,\n  ],\n  [\n    false,\n    'Meevee',\n    'Saudi Arabia',\n    'LL Road Seat/Saddle 1',\n    '2025-11-16',\n    '46-5819554',\n    false,\n    '27',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Twitterworks',\n    'China',\n    'ML Road Seat/Saddle 2',\n    '2025-04-19',\n    '01-2666826',\n    true,\n    '186',\n    3,\n    2,\n  ],\n  [\n    false,\n    'Wikizz',\n    'Tanzania',\n    'HL Road Seat/Saddle 2',\n    '2025-03-08',\n    '54-7090503',\n    true,\n    '20',\n    3,\n    3,\n  ],\n  [\n    false,\n    'Yoveo',\n    'United States',\n    'LL Mountain Tire',\n    '2025-10-14',\n    '78-7658520',\n    false,\n    '153',\n    2,\n    1,\n  ],\n  [\n    false,\n    'Yakidoo',\n    'China',\n    'ML Mountain Tire',\n    '2025-10-12',\n    '23-9926318',\n    true,\n    '161',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Oyope',\n    'China',\n    'HL Mountain Tire',\n    '2025-09-20',\n    '20-0179517',\n    true,\n    '98',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Skipstorm',\n    'United States',\n    'LL Road Tire',\n    '2025-10-01',\n    '02-9543343',\n    true,\n    '30',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Minyx',\n    'United States',\n    'ML Road Tire',\n    '2025-07-07',\n    '98-3938169',\n    true,\n    '73',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Miboo',\n    'China',\n    'HL Road Tire',\n    '2025-07-25',\n    '68-5197934',\n    true,\n    '158',\n    9,\n    1,\n  ],\n  [\n    false,\n    'Realfire',\n    'United States',\n    'Touring Tire',\n    '2025-08-27',\n    '39-8260460',\n    true,\n    '122',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Shufflester',\n    'China',\n    'Mountain Tire Tube',\n    '2025-06-08',\n    '45-9776170',\n    true,\n    '33',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Ntag',\n    'China',\n    'Road Tire Tube',\n    '2025-12-06',\n    '45-0858451',\n    true,\n    '107',\n    6,\n    2,\n  ],\n  [\n    false,\n    'Jabberbean',\n    'United States',\n    'Touring Tire Tube',\n    '2025-04-26',\n    '15-4247305',\n    true,\n    '15',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Thoughtblab',\n    'China',\n    'LL Bottom Bracket',\n    '2025-05-21',\n    '15-8534931',\n    true,\n    '168',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Jabbertype',\n    'China',\n    'Classic Vest',\n    '2025-07-25',\n    '23-1251557',\n    true,\n    '135',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Buzzshare',\n    'United Kingdom',\n    'Cycling Cap',\n    '2025-07-07',\n    '86-5920601',\n    true,\n    '11',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Roodel',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-01-13',\n    '48-1055459',\n    true,\n    '41',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Zoovu',\n    'China',\n    'Half-Finger Gloves',\n    '2025-06-03',\n    '12-7842022',\n    true,\n    '144',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Photofeed',\n    'China',\n    'HL Mountain Frame',\n    '2025-07-14',\n    '94-5088099',\n    true,\n    '106',\n    1,\n    4,\n  ],\n];\n\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: Handsontable.CellValue,\n  cellProperties: CellProperties\n) {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\n@Component({\n  selector: 'example1-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<hot-table [data]=\"initialData\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  readonly initialData = data;\n  readonly gridSettings: GridSettings = {\n    height: 450,\n    colWidths: [180, 220, 140, 120, 120, 120, 140],\n    colHeaders: [\n      'Company Name',\n      'Name',\n      'Sell date',\n      'In stock',\n      'Quantity',\n      'Order ID',\n      'Country',\n    ],\n    contextMenu: [\n      'cut',\n      'copy',\n      '---------',\n      'row_above',\n      'row_below',\n      'remove_row',\n      '---------',\n      'alignment',\n      'make_read_only',\n      'clear_column',\n    ] as PredefinedMenuItemKey[],\n    dropdownMenu: true,\n    hiddenColumns: {\n      indicators: true,\n    },\n    multiColumnSorting: true,\n    filters: true,\n    rowHeaders: true,\n    headerClassName: 'htLeft',\n    beforeRenderer: addClassesToRows,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    autoRowSize: true,\n    manualRowResize: true,\n    manualColumnResize: true,\n    navigableHeaders: true,\n    imeFastEdit: true,\n    columns: [\n      { data: 1 },\n      { data: 3 },\n      { data: 4, type: 'intl-date' },\n      { data: 6, type: 'checkbox', className: 'htCenter' },\n      { data: 7, type: 'numeric' },\n      { data: 5 },\n      { data: 2 },\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/demo/angular/example1.ts","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/demo","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__javascript__example.js.json
index 621022ad2..cb13f34bb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__javascript__example.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__javascript__example.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Demo · example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.js\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(TD, row, column, _prop, _value, cellProperties) {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst example = document.getElementById('example');\n\nnew Handsontable(example, {\n  data,\n  height: 450,\n  width: '100%',\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    { data: 1, type: 'text' },\n    { data: 3, type: 'text' },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n    },\n    { data: 7, type: 'numeric' },\n    { data: 5, type: 'text' },\n    { data: 2, type: 'text' },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  beforeRenderer: addClassesToRows,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  imeFastEdit: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconsole.log(`Handsontable: v${Handsontable.version} (${Handsontable.buildDate})`);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/demo/javascript/example.js","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example","exampleTitle":"example","docPermalink":"/demo","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Demo · example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.js\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(TD, row, column, _prop, _value, cellProperties) {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst example = document.getElementById('example');\n\nnew Handsontable(example, {\n  data,\n  height: 450,\n  width: '100%',\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    { data: 1, type: 'text' },\n    { data: 3, type: 'text' },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n    },\n    { data: 7, type: 'numeric' },\n    { data: 5, type: 'text' },\n    { data: 2, type: 'text' },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  beforeRenderer: addClassesToRows,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  imeFastEdit: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconsole.log(`Handsontable: v${Handsontable.version} (${Handsontable.buildDate})`);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/demo/javascript/example.js","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example","exampleTitle":"example","docPermalink":"/demo","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__react__example2.tsx.json
index 98857b547..c9ebc1ed6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Demo · Example 2 · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.ts\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n): void {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst App = () => {\n  return (\n    <HotTable\n      data={data}\n      height={450}\n      colWidths={[180, 220, 140, 120, 120, 120, 140]}\n      colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}\n      contextMenu={[\n        'cut',\n        'copy',\n        '---------',\n        'row_above',\n        'row_below',\n        'remove_row',\n        '---------',\n        'alignment',\n        'make_read_only',\n        'clear_column',\n      ]}\n      dropdownMenu={true}\n      hiddenColumns={{\n        indicators: true,\n      }}\n      multiColumnSorting={true}\n      filters={true}\n      rowHeaders={true}\n      headerClassName=\"htLeft\"\n      beforeRenderer={addClassesToRows}\n      manualRowMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      manualRowResize={true}\n      manualColumnResize={true}\n      navigableHeaders={true}\n      imeFastEdit={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data={1} />\n      <HotColumn data={3} />\n      <HotColumn data={4} type=\"intl-date\" />\n      <HotColumn data={6} type=\"checkbox\" className=\"htCenter\" />\n      <HotColumn data={7} type=\"numeric\" />\n      <HotColumn data={5} />\n      <HotColumn data={2} />\n    </HotTable>\n  );\n};\n\nexport default App;","/src/styles.css":""},"docsPath":"guides/getting-started/demo/react/example2.tsx","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example2","exampleTitle":"Example 2","docPermalink":"/demo","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Demo · Example 2 · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.ts\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n): void {\n  // Adding classes to `TR` just while rendering first visible `TD` element\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  // Add class to selected rows\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst App = () => {\n  return (\n    <HotTable\n      data={data}\n      height={450}\n      colWidths={[180, 220, 140, 120, 120, 120, 140]}\n      colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}\n      contextMenu={[\n        'cut',\n        'copy',\n        '---------',\n        'row_above',\n        'row_below',\n        'remove_row',\n        '---------',\n        'alignment',\n        'make_read_only',\n        'clear_column',\n      ]}\n      dropdownMenu={true}\n      hiddenColumns={{\n        indicators: true,\n      }}\n      multiColumnSorting={true}\n      filters={true}\n      rowHeaders={true}\n      headerClassName=\"htLeft\"\n      beforeRenderer={addClassesToRows}\n      manualRowMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      autoRowSize={true}\n      manualRowResize={true}\n      manualColumnResize={true}\n      navigableHeaders={true}\n      imeFastEdit={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data={1} />\n      <HotColumn data={3} />\n      <HotColumn data={4} type=\"intl-date\" />\n      <HotColumn data={6} type=\"checkbox\" className=\"htCenter\" />\n      <HotColumn data={7} type=\"numeric\" />\n      <HotColumn data={5} />\n      <HotColumn data={2} />\n    </HotTable>\n  );\n};\n\nexport default App;","/src/styles.css":""},"docsPath":"guides/getting-started/demo/react/example2.tsx","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example2","exampleTitle":"Example 2","docPermalink":"/demo","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__vue__example3.vue.json
index bee434715..67864f850 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__demo__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Demo · Example 3 · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellProperties, GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst SELECTED_CLASS = 'selected';\n\nfunction addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: unknown,\n  cellProperties: CellProperties,\n) {\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 450,\n  width: '100%',\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  headerClassName: 'htLeft',\n  beforeRenderer: addClassesToRows,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  imeFastEdit: true,\n  columns: [\n    { data: 1 },\n    { data: 3 },\n    { data: 4, type: 'intl-date' },\n    { data: 6, type: 'checkbox', className: 'htCenter' },\n    { data: 7, type: 'numeric' },\n    { data: 5 },\n    { data: 2 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/demo/vue/example3.vue","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example3","exampleTitle":"Example 3","docPermalink":"/demo","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Demo · Example 3 · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellProperties, GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst SELECTED_CLASS = 'selected';\n\nfunction addClassesToRows(\n  TD: HTMLTableCellElement,\n  row: number,\n  column: number,\n  _prop: string | number,\n  _value: unknown,\n  cellProperties: CellProperties,\n) {\n  if (column !== 0) {\n    return;\n  }\n\n  const parentElement = TD.parentElement;\n\n  if (parentElement === null) {\n    return;\n  }\n\n  if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n    parentElement.classList.add(SELECTED_CLASS);\n  } else {\n    parentElement.classList.remove(SELECTED_CLASS);\n  }\n}\n\nconst data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  height: 450,\n  width: '100%',\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  headerClassName: 'htLeft',\n  beforeRenderer: addClassesToRows,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  autoRowSize: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  imeFastEdit: true,\n  columns: [\n    { data: 1 },\n    { data: 3 },\n    { data: 4, type: 'intl-date' },\n    { data: 6, type: 'checkbox', className: 'htCenter' },\n    { data: 7, type: 'numeric' },\n    { data: 5 },\n    { data: 2 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/demo/vue/example3.vue","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example3","exampleTitle":"Example 3","docPermalink":"/demo","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
index 3c49ccf91..d3b0d8210 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-events-hooks id=\"example2\"></example2-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  lastChange: string | any[] | null = null;\n\n  data = [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    minSpareRows: 1,\n    beforeChange: (changes: any, source: any) => {\n      this.lastChange = changes;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown: (e) => {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return undefined;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return undefined;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          this.lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (\n            this.lastChange &&\n            this.lastChange.length === 1 &&\n            this.lastChange[0][2] == this.lastChange[0][3]\n          ) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            this.lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        this.lastChange = null;\n\n        return undefined;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-events-hooks id=\"example2\"></example2-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  lastChange: string | any[] | null = null;\n\n  data = [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    minSpareRows: 1,\n    beforeChange: (changes: any, source: any) => {\n      this.lastChange = changes;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown: (e) => {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return undefined;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return undefined;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          this.lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (\n            this.lastChange &&\n            this.lastChange.length === 1 &&\n            this.lastChange[0][2] == this.lastChange[0][3]\n          ) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            this.lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        this.lastChange = null;\n\n        return undefined;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example3.ts.json
index e7ab07703..7fd4adc15 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · External control · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-events-hooks id=\"example3\"></example3-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input\n            (change)=\"handleChange('fixedRowsTop', [0, 2], $event)\"\n            type=\"checkbox\"\n          />\n          Add fixed rows\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('fixedColumnsStart', [0, 2], $event)\"\n            type=\"checkbox\"\n          />\n          Add fixed columns\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('rowHeaders', [false, true], $event)\"\n            type=\"checkbox\"\n          />\n          Enable row headers\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('colHeaders', [false, true], $event)\"\n            type=\"checkbox\"\n          />\n          Enable column headers\n        </label>\n        <br />\n      </div>\n    </div>\n    <div style=\"max-width: 440px\">\n      <hot-table [data]=\"data\" [settings]=\"initialState\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n    [\n      'A10',\n      'B10',\n      'C10',\n      'D10',\n      'E10',\n      'F10',\n      'G10',\n      'H10',\n      'I10',\n      'J10',\n      'K10',\n      'L11',\n    ],\n    [\n      'A11',\n      'B11',\n      'C11',\n      'D11',\n      'E11',\n      'F11',\n      'G11',\n      'H11',\n      'I11',\n      'J11',\n      'K11',\n      'L11',\n    ],\n    [\n      'A12',\n      'B12',\n      'C12',\n      'D12',\n      'E12',\n      'F12',\n      'G12',\n      'H12',\n      'I12',\n      'J12',\n      'K12',\n      'L12',\n    ],\n  ];\n  readonly initialState = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 240\n  };\n\n  handleChange(\n    setting: string,\n    states: number[] | boolean[],\n    event: Event\n  ): void {\n    const target = event.target as HTMLInputElement;\n\n    this.hotTable.hotInstance?.updateSettings({\n      [setting]: states[target.checked ? 1 : 0],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example3.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · External control · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-events-hooks id=\"example3\"></example3-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input\n            (change)=\"handleChange('fixedRowsTop', [0, 2], $event)\"\n            type=\"checkbox\"\n          />\n          Add fixed rows\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('fixedColumnsStart', [0, 2], $event)\"\n            type=\"checkbox\"\n          />\n          Add fixed columns\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('rowHeaders', [false, true], $event)\"\n            type=\"checkbox\"\n          />\n          Enable row headers\n        </label>\n        <br />\n\n        <label>\n          <input\n            (change)=\"handleChange('colHeaders', [false, true], $event)\"\n            type=\"checkbox\"\n          />\n          Enable column headers\n        </label>\n        <br />\n      </div>\n    </div>\n    <div style=\"max-width: 440px\">\n      <hot-table [data]=\"data\" [settings]=\"initialState\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n    [\n      'A10',\n      'B10',\n      'C10',\n      'D10',\n      'E10',\n      'F10',\n      'G10',\n      'H10',\n      'I10',\n      'J10',\n      'K10',\n      'L11',\n    ],\n    [\n      'A11',\n      'B11',\n      'C11',\n      'D11',\n      'E11',\n      'F11',\n      'G11',\n      'H11',\n      'I11',\n      'J11',\n      'K11',\n      'L11',\n    ],\n    [\n      'A12',\n      'B12',\n      'C12',\n      'D12',\n      'E12',\n      'F12',\n      'G12',\n      'H12',\n      'I12',\n      'J12',\n      'K12',\n      'L12',\n    ],\n  ];\n  readonly initialState = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 240\n  };\n\n  handleChange(\n    setting: string,\n    states: number[] | boolean[],\n    event: Event\n  ): void {\n    const target = event.target as HTMLInputElement;\n\n    this.hotTable.hotInstance?.updateSettings({\n      [setting]: states[target.checked ? 1 : 0],\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example3.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
index 76eb26ad1..541698f42 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"example-table-container\">\n      <div id=\"example1\"></div>\n    </div>\n    <div id=\"example1_events\"></div>\n    <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n      <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n      <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n    </aside>\n    <strong> Choose events to be logged:</strong>\n    <ul id=\"hooksList\">\n      <li>\n        <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n      </li>\n    </ul>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst config = {\n    data: [\n        ['', 'Tesla', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],\n        ['2017', 0, 2941, 4303, 354, 5814],\n        ['2018', 3, 2905, 2867, 412, 5284],\n        ['2019', 4, 2517, 4822, 552, 6127],\n        ['2020', 2, 2422, 5399, 776, 4151],\n    ],\n    minRows: 5,\n    minCols: 6,\n    height: 'auto',\n    stretchH: 'all',\n    minSpareRows: 1,\n    autoWrapRow: true,\n    colHeaders: true,\n    contextMenu: true,\n    autoWrapCol: true,\n    dropdownMenu: true,\n    filters: true,\n    columnSorting: true,\n    mergeCells: true,\n    comments: true,\n    manualColumnMove: true,\n    manualRowMove: true,\n    moveCells: true,\n    licenseKey: 'non-commercial-and-evaluation',\n};\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\nhooks.forEach((hook) => {\n    let checked = '';\n    if (hook === 'afterChange' ||\n        hook === 'afterSelection' ||\n        hook === 'afterCreateRow' ||\n        hook === 'afterRemoveRow' ||\n        hook === 'afterCreateCol' ||\n        hook === 'afterRemoveCol') {\n        checked = 'checked';\n    }\n    hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n    config[hook] = function () {\n        log_events(hook, arguments);\n    };\n});\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n    if (document.getElementById(`check_${event}`).checked) {\n        const now = new Date().getTime();\n        const diff = now - start;\n        let str;\n        const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n        for (let d = 0; d < data.length; d++) {\n            try {\n                str = JSON.stringify(data[d]);\n            }\n            catch (e) {\n                str = data[d].toString();\n            }\n            if (str === void 0) {\n                continue;\n            }\n            if (str.length > 20) {\n                str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n            }\n            if (d < data.length - 1) {\n                str += ',';\n            }\n            vals.push(str);\n        }\n        if (window.console) {\n            console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n        }\n        const div = document.createElement('div');\n        const text = document.createTextNode(vals.join(' '));\n        div.appendChild(text);\n        example1Events.appendChild(div);\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n            example1Events.scrollTop = example1Events.scrollHeight;\n        }, 10);\n        i++;\n    }\n}\nconst example1 = document.querySelector('#example1');\nnew Handsontable(example1, config);\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n    const state = this.checked;\n    const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n    Array.prototype.forEach.call(inputs, (input) => {\n        input.checked = state;\n    });\n});\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n    if (!this.checked) {\n        document.getElementById('check_select_all').checked = false;\n    }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"example-table-container\">\n      <div id=\"example1\"></div>\n    </div>\n    <div id=\"example1_events\"></div>\n    <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n      <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n      <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n    </aside>\n    <strong> Choose events to be logged:</strong>\n    <ul id=\"hooksList\">\n      <li>\n        <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n      </li>\n    </ul>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst config = {\n    data: [\n        ['', 'Tesla', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],\n        ['2017', 0, 2941, 4303, 354, 5814],\n        ['2018', 3, 2905, 2867, 412, 5284],\n        ['2019', 4, 2517, 4822, 552, 6127],\n        ['2020', 2, 2422, 5399, 776, 4151],\n    ],\n    minRows: 5,\n    minCols: 6,\n    height: 'auto',\n    stretchH: 'all',\n    minSpareRows: 1,\n    autoWrapRow: true,\n    colHeaders: true,\n    contextMenu: true,\n    autoWrapCol: true,\n    dropdownMenu: true,\n    filters: true,\n    columnSorting: true,\n    mergeCells: true,\n    comments: true,\n    manualColumnMove: true,\n    manualRowMove: true,\n    moveCells: true,\n    licenseKey: 'non-commercial-and-evaluation',\n};\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\nhooks.forEach((hook) => {\n    let checked = '';\n    if (hook === 'afterChange' ||\n        hook === 'afterSelection' ||\n        hook === 'afterCreateRow' ||\n        hook === 'afterRemoveRow' ||\n        hook === 'afterCreateCol' ||\n        hook === 'afterRemoveCol') {\n        checked = 'checked';\n    }\n    hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n    config[hook] = function () {\n        log_events(hook, arguments);\n    };\n});\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n    if (document.getElementById(`check_${event}`).checked) {\n        const now = new Date().getTime();\n        const diff = now - start;\n        let str;\n        const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n        for (let d = 0; d < data.length; d++) {\n            try {\n                str = JSON.stringify(data[d]);\n            }\n            catch (e) {\n                str = data[d].toString();\n            }\n            if (str === void 0) {\n                continue;\n            }\n            if (str.length > 20) {\n                str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n            }\n            if (d < data.length - 1) {\n                str += ',';\n            }\n            vals.push(str);\n        }\n        if (window.console) {\n            console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n        }\n        const div = document.createElement('div');\n        const text = document.createTextNode(vals.join(' '));\n        div.appendChild(text);\n        example1Events.appendChild(div);\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n            example1Events.scrollTop = example1Events.scrollHeight;\n        }, 10);\n        i++;\n    }\n}\nconst example1 = document.querySelector('#example1');\nnew Handsontable(example1, config);\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n    const state = this.checked;\n    const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n    Array.prototype.forEach.call(inputs, (input) => {\n        input.checked = state;\n    });\n});\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n    if (!this.checked) {\n        document.getElementById('check_select_all').checked = false;\n    }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
index 3d99a9bfa..32088bc9a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nlet lastChange = null;\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n    if (!selected)\n      return;\n    const selection = selected[0];\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0)\n      return;\n    console.log(selection);\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n      // block the default deletion behavior\n      return false;\n    }\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n        // block the default Enter behavior\n        return false;\n      }\n    }\n    lastChange = null;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nlet lastChange = null;\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n    if (!selected)\n      return;\n    const selection = selected[0];\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0)\n      return;\n    console.log(selection);\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n      // block the default deletion behavior\n      return false;\n    }\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n        // block the default Enter behavior\n        return false;\n      }\n    }\n    lastChange = null;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
index 196d01a4f..50d545032 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet lastChange: (Handsontable.CellChange | null)[] | null = null;\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n\n    if (!selected) return;\n\n    const selection = selected[0]!;\n\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0) return;\n\n    console.log(selection);\n\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n\n      // block the default deletion behavior\n      return false;\n    }\n\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0]![2] == lastChange[0]![3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n\n        // block the default Enter behavior\n        return false;\n      }\n    }\n\n    lastChange = null;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet lastChange: (Handsontable.CellChange | null)[] | null = null;\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n\n    if (!selected) return;\n\n    const selection = selected[0]!;\n\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0) return;\n\n    console.log(selection);\n\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n\n      // block the default deletion behavior\n      return false;\n    }\n\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0]![2] == lastChange[0]![3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n\n        // block the default Enter behavior\n        return false;\n      }\n    }\n\n    lastChange = null;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
index c91dccf3a..ba8f88a9d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Tesla', 2017, 'black', 'black'],\n  ['Nissan', 2018, 'blue', 'blue'],\n  ['Chrysler', 2019, 'yellow', 'black'],\n  ['Volvo', 2020, 'yellow', 'gray'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  let lastChange: string | any[] | null = null;\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown(e) {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        lastChange = null;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      minSpareRows={1}\n      beforeChange={(changes, source) => {\n        lastChange = changes;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      ref={hotRef}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/events-and-hooks/react/example2.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Tesla', 2017, 'black', 'black'],\n  ['Nissan', 2018, 'blue', 'blue'],\n  ['Chrysler', 2019, 'yellow', 'black'],\n  ['Volvo', 2020, 'yellow', 'gray'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  let lastChange: string | any[] | null = null;\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown(e) {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        lastChange = null;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      minSpareRows={1}\n      beforeChange={(changes, source) => {\n        lastChange = changes;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      ref={hotRef}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/events-and-hooks/react/example2.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example3.tsx.json
index 3e0ddeaf9..27ee45f1c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Events and hooks · External control · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, ChangeEvent } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const [settings, setSettings] = useState(() => {\n    const initialState = {\n      data: [\n        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n        ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n        ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n        ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n        ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n        ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n        ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n        ['A10', 'B10', 'C10', 'D10', 'E10', 'F10', 'G10', 'H10', 'I10', 'J10', 'K10', 'L11'],\n        ['A11', 'B11', 'C11', 'D11', 'E11', 'F11', 'G11', 'H11', 'I11', 'J11', 'K11', 'L11'],\n        ['A12', 'B12', 'C12', 'D12', 'E12', 'F12', 'G12', 'H12', 'I12', 'J12', 'K12', 'L12'],\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n      height: 240,\n      licenseKey: 'non-commercial-and-evaluation',\n    };\n\n    return initialState;\n  });\n\n  const handleChange = (setting: string, states: number[] | boolean[]) => (event: ChangeEvent) => {\n    setSettings((prevState) => ({\n      ...prevState,\n      [setting]: states[(event.target as HTMLInputElement).checked ? 1 : 0],\n    }));\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input onChange={handleChange('fixedRowsTop', [0, 2])} type=\"checkbox\" />\n            Add fixed rows\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('fixedColumnsStart', [0, 2])} type=\"checkbox\" />\n            Add fixed columns\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('rowHeaders', [false, true])} type=\"checkbox\" />\n            Enable row headers\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('colHeaders', [false, true])} type=\"checkbox\" />\n            Enable column headers\n          </label>\n          <br />\n        </div>\n      </div>\n\n      <HotTable className=\"example-3-max-width\" id=\"hot\" {...settings} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-3-max-width {\n  max-width: 440px;\n}"},"docsPath":"guides/getting-started/events-and-hooks/react/example3.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Events and hooks · External control · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, ChangeEvent } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const [settings, setSettings] = useState(() => {\n    const initialState = {\n      data: [\n        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n        ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n        ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n        ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n        ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n        ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n        ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n        ['A10', 'B10', 'C10', 'D10', 'E10', 'F10', 'G10', 'H10', 'I10', 'J10', 'K10', 'L11'],\n        ['A11', 'B11', 'C11', 'D11', 'E11', 'F11', 'G11', 'H11', 'I11', 'J11', 'K11', 'L11'],\n        ['A12', 'B12', 'C12', 'D12', 'E12', 'F12', 'G12', 'H12', 'I12', 'J12', 'K12', 'L12'],\n      ],\n      autoWrapRow: true,\n      autoWrapCol: true,\n      height: 240,\n      licenseKey: 'non-commercial-and-evaluation',\n    };\n\n    return initialState;\n  });\n\n  const handleChange = (setting: string, states: number[] | boolean[]) => (event: ChangeEvent) => {\n    setSettings((prevState) => ({\n      ...prevState,\n      [setting]: states[(event.target as HTMLInputElement).checked ? 1 : 0],\n    }));\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label>\n            <input onChange={handleChange('fixedRowsTop', [0, 2])} type=\"checkbox\" />\n            Add fixed rows\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('fixedColumnsStart', [0, 2])} type=\"checkbox\" />\n            Add fixed columns\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('rowHeaders', [false, true])} type=\"checkbox\" />\n            Enable row headers\n          </label>\n          <br />\n\n          <label>\n            <input onChange={handleChange('colHeaders', [false, true])} type=\"checkbox\" />\n            Enable column headers\n          </label>\n          <br />\n        </div>\n      </div>\n\n      <HotTable className=\"example-3-max-width\" id=\"hot\" {...settings} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-3-max-width {\n  max-width: 440px;\n}"},"docsPath":"guides/getting-started/events-and-hooks/react/example3.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
index 3ec25ede9..66bdb3b1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nlet lastChange: CellChange[] | null = null;\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.updateSettings({\n    beforeKeyDown(e) {\n      const selection = hot?.getSelected()?.[0];\n\n      if (!selection) return;\n      if (selection[0] < 0 || selection[1] < 0) return;\n\n      // BACKSPACE or DELETE\n      if (e.keyCode === 8 || e.keyCode === 46) {\n        // remove data at cell, shift the cells below it up\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedUp = column.slice(selection[0] + 1);\n        shiftedUp.push(null);\n        hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n        e.preventDefault();\n        lastChange = null;\n\n        // block the default deletion behavior\n        return false;\n      }\n\n      // ENTER\n      if (e.keyCode === 13) {\n        // if last change affected a single cell and did not change its values\n        if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n          // insert an empty cell, shift the cells below it down\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedDown = ['', ...column.slice(selection[0])];\n          hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n          // add new cell\n          hot.selectCell(selection[0], selection[1]);\n          lastChange = null;\n\n          // block the default Enter behavior\n          return false;\n        }\n      }\n\n      lastChange = null;\n    },\n  });\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example2.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nlet lastChange: CellChange[] | null = null;\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.updateSettings({\n    beforeKeyDown(e) {\n      const selection = hot?.getSelected()?.[0];\n\n      if (!selection) return;\n      if (selection[0] < 0 || selection[1] < 0) return;\n\n      // BACKSPACE or DELETE\n      if (e.keyCode === 8 || e.keyCode === 46) {\n        // remove data at cell, shift the cells below it up\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedUp = column.slice(selection[0] + 1);\n        shiftedUp.push(null);\n        hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n        e.preventDefault();\n        lastChange = null;\n\n        // block the default deletion behavior\n        return false;\n      }\n\n      // ENTER\n      if (e.keyCode === 13) {\n        // if last change affected a single cell and did not change its values\n        if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n          // insert an empty cell, shift the cells below it down\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedDown = ['', ...column.slice(selection[0])];\n          hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n          // add new cell\n          hot.selectCell(selection[0], selection[1]);\n          lastChange = null;\n\n          // block the default Enter behavior\n          return false;\n        }\n      }\n\n      lastChange = null;\n    },\n  });\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example2.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example3.vue.json
index 7ae513161..d2d195d20 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · External control · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n    ['A10', 'B10', 'C10', 'D10', 'E10', 'F10', 'G10', 'H10', 'I10', 'J10', 'K10', 'L10'],\n    ['A11', 'B11', 'C11', 'D11', 'E11', 'F11', 'G11', 'H11', 'I11', 'J11', 'K11', 'L11'],\n    ['A12', 'B12', 'C12', 'D12', 'E12', 'F12', 'G12', 'H12', 'I12', 'J12', 'K12', 'L12'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onFixedRowsChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, fixedRowsTop: checked ? 2 : 0 };\n}\n\nfunction onFixedColumnsChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, fixedColumnsStart: checked ? 2 : 0 };\n}\n\nfunction onRowHeadersChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, rowHeaders: checked };\n}\n\nfunction onColHeadersChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, colHeaders: checked };\n}\n</script>\n\n<template>\n  <div id=\"example3\" class=\"example-3-max-width\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" @change=\"onFixedRowsChange\" />\n          Add fixed rows\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onFixedColumnsChange\" />\n          Add fixed columns\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onRowHeadersChange\" />\n          Enable row headers\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onColHeadersChange\" />\n          Enable column headers\n        </label>\n      </div>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.example-3-max-width {\n  max-width: 440px;\n}\n</style>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example3.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · External control · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6', 'K6', 'L6'],\n    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7', 'J7', 'K7', 'L7'],\n    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8', 'J8', 'K8', 'L8'],\n    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9', 'J9', 'K9', 'L9'],\n    ['A10', 'B10', 'C10', 'D10', 'E10', 'F10', 'G10', 'H10', 'I10', 'J10', 'K10', 'L10'],\n    ['A11', 'B11', 'C11', 'D11', 'E11', 'F11', 'G11', 'H11', 'I11', 'J11', 'K11', 'L11'],\n    ['A12', 'B12', 'C12', 'D12', 'E12', 'F12', 'G12', 'H12', 'I12', 'J12', 'K12', 'L12'],\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 240,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onFixedRowsChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, fixedRowsTop: checked ? 2 : 0 };\n}\n\nfunction onFixedColumnsChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, fixedColumnsStart: checked ? 2 : 0 };\n}\n\nfunction onRowHeadersChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, rowHeaders: checked };\n}\n\nfunction onColHeadersChange(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value = { ...hotSettings.value, colHeaders: checked };\n}\n</script>\n\n<template>\n  <div id=\"example3\" class=\"example-3-max-width\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label>\n          <input type=\"checkbox\" @change=\"onFixedRowsChange\" />\n          Add fixed rows\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onFixedColumnsChange\" />\n          Add fixed columns\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onRowHeadersChange\" />\n          Enable row headers\n        </label>\n        <br />\n        <label>\n          <input type=\"checkbox\" @change=\"onColHeadersChange\" />\n          Enable column headers\n        </label>\n      </div>\n    </div>\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.example-3-max-width {\n  max-width: 440px;\n}\n</style>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example3.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example3","exampleTitle":"External control","docPermalink":"/events-and-hooks","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example.ts.json
index 6511539e9..f578b85a4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Grid size · Manual resizing · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-grid-size></example-grid-size>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-grid-size',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"triggerBtn\"\n          class=\"button button--primary\"\n          (click)=\"btnClick()\"\n        >\n          {{ isContainerExpanded ? 'Collapse container' : 'Expand container' }}\n        </button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  // generate an array of arrays with dummy data\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  isContainerExpanded = false;\n\n  gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    width: '100%',\n    height: 157,\n    colWidths: 100,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  btnClick(): void {\n    this.isContainerExpanded = !this.isContainerExpanded;\n    this.gridSettings = {\n      ...this.gridSettings,\n      height: this.isContainerExpanded ? 410 : 157,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/grid-size/angular/example.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Grid size · Manual resizing · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-grid-size></example-grid-size>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-grid-size',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"triggerBtn\"\n          class=\"button button--primary\"\n          (click)=\"btnClick()\"\n        >\n          {{ isContainerExpanded ? 'Collapse container' : 'Expand container' }}\n        </button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>`,\n})\nexport class AppComponent {\n  // generate an array of arrays with dummy data\n  readonly data = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  isContainerExpanded = false;\n\n  gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    width: '100%',\n    height: 157,\n    colWidths: 100,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  btnClick(): void {\n    this.isContainerExpanded = !this.isContainerExpanded;\n    this.gridSettings = {\n      ...this.gridSettings,\n      height: this.isContainerExpanded ? 410 : 157,\n    };\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/grid-size/angular/example.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example2.ts.json
index d575f284c..51f67a61d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Grid size · Compare size units · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-grid-size></example2-grid-size>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\n@Component({\n  selector: 'example2-grid-size',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"unitSelect\">Grid size unit</label>\n        <select id=\"unitSelect\" (change)=\"changeUnit($event)\">\n          @for (key of unitKeys; track key) {\n            <option [value]=\"key\">{{ key }}</option>\n          }\n        </select>\n      </div>\n      <p class=\"unit-caption\">{{ unitCaption }}</p>\n    </div>\n    <div id=\"exampleParent2\">\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly unitKeys = Object.keys(UNIT_SIZES);\n  unitCaption = UNIT_CAPTIONS['px'];\n\n  readonly data = [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n    rowHeaders: true,\n    width: UNIT_SIZES['px'].width,\n    height: UNIT_SIZES['px'].height,\n  };\n\n  changeUnit(event: Event): void {\n    const unit = UNIT_SIZES[(event.target as HTMLSelectElement).value];\n\n    this.unitCaption = UNIT_CAPTIONS[(event.target as HTMLSelectElement).value];\n    this.hotTable?.hotInstance?.updateSettings({ width: unit.width, height: unit.height });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > hot-table {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/angular/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Grid size · Compare size units · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-grid-size></example2-grid-size>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\n@Component({\n  selector: 'example2-grid-size',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"unitSelect\">Grid size unit</label>\n        <select id=\"unitSelect\" (change)=\"changeUnit($event)\">\n          @for (key of unitKeys; track key) {\n            <option [value]=\"key\">{{ key }}</option>\n          }\n        </select>\n      </div>\n      <p class=\"unit-caption\">{{ unitCaption }}</p>\n    </div>\n    <div id=\"exampleParent2\">\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly unitKeys = Object.keys(UNIT_SIZES);\n  unitCaption = UNIT_CAPTIONS['px'];\n\n  readonly data = [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n    rowHeaders: true,\n    width: UNIT_SIZES['px'].width,\n    height: UNIT_SIZES['px'].height,\n  };\n\n  changeUnit(event: Event): void {\n    const unit = UNIT_SIZES[(event.target as HTMLSelectElement).value];\n\n    this.unitCaption = UNIT_CAPTIONS[(event.target as HTMLSelectElement).value];\n    this.hotTable?.hotInstance?.updateSettings({ width: unit.width, height: unit.height });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > hot-table {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/angular/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.js.json
index 1a01d11ad..2f7c5bf9f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Grid size · Manual resizing · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"triggerBtn\" class=\"button button--primary\">Expand container</button>\n    </div>\n  </div>\n  <div id=\"exampleParent\"><!-- element with dynamically added styles -->\n    <div id=\"example\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst triggerBtn = document.querySelector('#triggerBtn');\nconst example = document.querySelector('#example');\nconst exampleParent = document.querySelector('#exampleParent');\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hot = new Handsontable(example, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ntriggerBtn.addEventListener('click', () => {\n  if (triggerBtn.textContent === 'Collapse container') {\n    exampleParent.style.height = ''; // reset to initial 150px;\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Expand container';\n  } else {\n    exampleParent.style.height = '410px';\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Collapse container';\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#example {\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example.js","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Grid size · Manual resizing · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"triggerBtn\" class=\"button button--primary\">Expand container</button>\n    </div>\n  </div>\n  <div id=\"exampleParent\"><!-- element with dynamically added styles -->\n    <div id=\"example\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst triggerBtn = document.querySelector('#triggerBtn');\nconst example = document.querySelector('#example');\nconst exampleParent = document.querySelector('#exampleParent');\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hot = new Handsontable(example, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ntriggerBtn.addEventListener('click', () => {\n  if (triggerBtn.textContent === 'Collapse container') {\n    exampleParent.style.height = ''; // reset to initial 150px;\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Expand container';\n  } else {\n    exampleParent.style.height = '410px';\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Collapse container';\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#example {\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example.js","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.ts.json
index a764e4346..aebb01c11 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Grid size · Manual resizing · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"triggerBtn\" class=\"button button--primary\">Expand container</button>\n    </div>\n  </div>\n  <div id=\"exampleParent\"><!-- element with dynamically added styles -->\n    <div id=\"example\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst triggerBtn = document.querySelector('#triggerBtn')!;\nconst example = document.querySelector('#example')!;\nconst exampleParent = document.querySelector('#exampleParent') as HTMLElement;\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hot = new Handsontable(example, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ntriggerBtn.addEventListener('click', () => {\n  if (triggerBtn.textContent === 'Collapse container') {\n    exampleParent.style.height = ''; // reset to initial 150px;\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Expand container';\n  } else {\n    exampleParent.style.height = '410px';\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Collapse container';\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#example {\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Grid size · Manual resizing · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"triggerBtn\" class=\"button button--primary\">Expand container</button>\n    </div>\n  </div>\n  <div id=\"exampleParent\"><!-- element with dynamically added styles -->\n    <div id=\"example\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst triggerBtn = document.querySelector('#triggerBtn')!;\nconst example = document.querySelector('#example')!;\nconst exampleParent = document.querySelector('#exampleParent') as HTMLElement;\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hot = new Handsontable(example, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\ntriggerBtn.addEventListener('click', () => {\n  if (triggerBtn.textContent === 'Collapse container') {\n    exampleParent.style.height = ''; // reset to initial 150px;\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Expand container';\n  } else {\n    exampleParent.style.height = '410px';\n    hot.refreshDimensions();\n    triggerBtn.textContent = 'Collapse container';\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#example {\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.js.json
index 6ae6b5b2a..ea2410675 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Grid size · Compare size units · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"unitSelect\">Grid size unit</label>\n      <select id=\"unitSelect\">\n        <option value=\"px\">px</option>\n        <option value=\"%\">%</option>\n        <option value=\"em\">em</option>\n        <option value=\"rem\">rem</option>\n        <option value=\"vh\">vh</option>\n        <option value=\"vw\">vw</option>\n      </select>\n    </div>\n    <p id=\"unitCaption\" class=\"unit-caption\"></p>\n  </div>\n  <div id=\"exampleParent2\">\n    <div id=\"example2\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst UNIT_SIZES = {\n    px: { width: '600px', height: '300px' },\n    '%': { width: '75%', height: '75%' },\n    em: { width: '37.5em', height: '18.75em' },\n    rem: { width: '37.5rem', height: '18.75rem' },\n    vh: { width: '50vh', height: '50vh' },\n    vw: { width: '50vw', height: '50vw' },\n};\nconst UNIT_CAPTIONS = {\n    px: 'A fixed pixel size, independent of any parent element or font size.',\n    '%': \"A percentage of the parent container's size (the dashed box).\",\n    em: \"A multiple of this element's own font size.\",\n    rem: \"A multiple of the document's root font size.\",\n    vh: \"A percentage of the browser viewport's height.\",\n    vw: \"A percentage of the browser viewport's width.\",\n};\nconst container = document.querySelector('#example2');\nconst unitSelect = document.querySelector('#unitSelect');\nconst unitCaption = document.querySelector('#unitCaption');\nconst hot = new Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n        ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n        ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n        ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n        ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n        ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n        ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n        ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n        ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n        ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n        ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n        ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n    ],\n    colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n    rowHeaders: true,\n    width: UNIT_SIZES['px'].width,\n    height: UNIT_SIZES['px'].height,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nunitCaption.textContent = UNIT_CAPTIONS['px'];\nunitSelect.addEventListener('change', () => {\n    const unit = UNIT_SIZES[unitSelect.value];\n    hot.updateSettings({ width: unit.width, height: unit.height });\n    unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.js","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Grid size · Compare size units · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"unitSelect\">Grid size unit</label>\n      <select id=\"unitSelect\">\n        <option value=\"px\">px</option>\n        <option value=\"%\">%</option>\n        <option value=\"em\">em</option>\n        <option value=\"rem\">rem</option>\n        <option value=\"vh\">vh</option>\n        <option value=\"vw\">vw</option>\n      </select>\n    </div>\n    <p id=\"unitCaption\" class=\"unit-caption\"></p>\n  </div>\n  <div id=\"exampleParent2\">\n    <div id=\"example2\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst UNIT_SIZES = {\n    px: { width: '600px', height: '300px' },\n    '%': { width: '75%', height: '75%' },\n    em: { width: '37.5em', height: '18.75em' },\n    rem: { width: '37.5rem', height: '18.75rem' },\n    vh: { width: '50vh', height: '50vh' },\n    vw: { width: '50vw', height: '50vw' },\n};\nconst UNIT_CAPTIONS = {\n    px: 'A fixed pixel size, independent of any parent element or font size.',\n    '%': \"A percentage of the parent container's size (the dashed box).\",\n    em: \"A multiple of this element's own font size.\",\n    rem: \"A multiple of the document's root font size.\",\n    vh: \"A percentage of the browser viewport's height.\",\n    vw: \"A percentage of the browser viewport's width.\",\n};\nconst container = document.querySelector('#example2');\nconst unitSelect = document.querySelector('#unitSelect');\nconst unitCaption = document.querySelector('#unitCaption');\nconst hot = new Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n        ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n        ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n        ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n        ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n        ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n        ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n        ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n        ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n        ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n        ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n        ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n    ],\n    colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n    rowHeaders: true,\n    width: UNIT_SIZES['px'].width,\n    height: UNIT_SIZES['px'].height,\n    licenseKey: 'non-commercial-and-evaluation',\n});\nunitCaption.textContent = UNIT_CAPTIONS['px'];\nunitSelect.addEventListener('change', () => {\n    const unit = UNIT_SIZES[unitSelect.value];\n    hot.updateSettings({ width: unit.width, height: unit.height });\n    unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.js","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.ts.json
index 825a3f447..20798ceaa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Grid size · Compare size units · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"unitSelect\">Grid size unit</label>\n      <select id=\"unitSelect\">\n        <option value=\"px\">px</option>\n        <option value=\"%\">%</option>\n        <option value=\"em\">em</option>\n        <option value=\"rem\">rem</option>\n        <option value=\"vh\">vh</option>\n        <option value=\"vw\">vw</option>\n      </select>\n    </div>\n    <p id=\"unitCaption\" class=\"unit-caption\"></p>\n  </div>\n  <div id=\"exampleParent2\">\n    <div id=\"example2\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst container = document.querySelector('#example2')!;\nconst unitSelect = document.querySelector<HTMLSelectElement>('#unitSelect')!;\nconst unitCaption = document.querySelector('#unitCaption')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n  rowHeaders: true,\n  width: UNIT_SIZES['px'].width,\n  height: UNIT_SIZES['px'].height,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nunitCaption.textContent = UNIT_CAPTIONS['px'];\n\nunitSelect.addEventListener('change', () => {\n  const unit = UNIT_SIZES[unitSelect.value];\n\n  hot.updateSettings({ width: unit.width, height: unit.height });\n  unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Grid size · Compare size units · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <label for=\"unitSelect\">Grid size unit</label>\n      <select id=\"unitSelect\">\n        <option value=\"px\">px</option>\n        <option value=\"%\">%</option>\n        <option value=\"em\">em</option>\n        <option value=\"rem\">rem</option>\n        <option value=\"vh\">vh</option>\n        <option value=\"vw\">vw</option>\n      </select>\n    </div>\n    <p id=\"unitCaption\" class=\"unit-caption\"></p>\n  </div>\n  <div id=\"exampleParent2\">\n    <div id=\"example2\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst container = document.querySelector('#example2')!;\nconst unitSelect = document.querySelector<HTMLSelectElement>('#unitSelect')!;\nconst unitCaption = document.querySelector('#unitCaption')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n  rowHeaders: true,\n  width: UNIT_SIZES['px'].width,\n  height: UNIT_SIZES['px'].height,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nunitCaption.textContent = UNIT_CAPTIONS['px'];\n\nunitSelect.addEventListener('change', () => {\n  const unit = UNIT_SIZES[unitSelect.value];\n\n  hot.updateSettings({ width: unit.width, height: unit.height });\n  unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example.tsx.json
index ff5309bc4..7bee99b59 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Grid size · Manual resizing · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  const [isContainerExpanded, setIsContainerExpanded] = useState(false);\n  const hotRef = useRef<HotTableRef>(null);\n\n  const triggerBtnClickCallback = () => {\n    setIsContainerExpanded(!isContainerExpanded);\n  };\n\n  useEffect(() => {\n    // simulate layout change outside of React lifecycle\n    // @ts-ignore\n    document.getElementById('exampleParent').style.height = isContainerExpanded ? '410px' : '157px';\n    hotRef.current?.hotInstance?.refreshDimensions();\n  });\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"triggerBtn\" className=\"button button--primary\" onClick={() => triggerBtnClickCallback()}>\n            {isContainerExpanded ? 'Collapse container' : 'Expand container'}\n          </button>\n        </div>\n      </div>\n      <div id=\"exampleParent\" className=\"exampleParent\">\n        <HotTable\n          data={data}\n          rowHeaders={true}\n          colHeaders={true}\n          width=\"100%\"\n          height=\"100%\"\n          colWidths={100}\n          autoWrapRow={true}\n          autoWrapCol={true}\n          licenseKey=\"non-commercial-and-evaluation\"\n          ref={hotRef}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#exampleParent > div{\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/react/example.tsx","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Grid size · Manual resizing · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  const [isContainerExpanded, setIsContainerExpanded] = useState(false);\n  const hotRef = useRef<HotTableRef>(null);\n\n  const triggerBtnClickCallback = () => {\n    setIsContainerExpanded(!isContainerExpanded);\n  };\n\n  useEffect(() => {\n    // simulate layout change outside of React lifecycle\n    // @ts-ignore\n    document.getElementById('exampleParent').style.height = isContainerExpanded ? '410px' : '157px';\n    hotRef.current?.hotInstance?.refreshDimensions();\n  });\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"triggerBtn\" className=\"button button--primary\" onClick={() => triggerBtnClickCallback()}>\n            {isContainerExpanded ? 'Collapse container' : 'Expand container'}\n          </button>\n        </div>\n      </div>\n      <div id=\"exampleParent\" className=\"exampleParent\">\n        <HotTable\n          data={data}\n          rowHeaders={true}\n          colHeaders={true}\n          width=\"100%\"\n          height=\"100%\"\n          colWidths={100}\n          autoWrapRow={true}\n          autoWrapCol={true}\n          licenseKey=\"non-commercial-and-evaluation\"\n          ref={hotRef}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleParent {\n  height: 157px;\n}\n\n#exampleParent > div{\n  height: 100%;\n}"},"docsPath":"guides/getting-started/grid-size/react/example.tsx","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example2.tsx.json
index 590a79661..d751784ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Grid size · Compare size units · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n  ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n  ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n  ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n  ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n  ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n  ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n  ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n  ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n  ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n  ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n  ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n];\n\nconst ExampleComponent = () => {\n  const [unit, setUnit] = useState('px');\n  const { width, height } = UNIT_SIZES[unit];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"unitSelect\">Grid size unit</label>\n          <select id=\"unitSelect\" value={unit} onChange={(event) => setUnit(event.target.value)}>\n            {Object.keys(UNIT_SIZES).map((key) => (\n              <option key={key} value={key}>{key}</option>\n            ))}\n          </select>\n        </div>\n        <p className=\"unit-caption\">{UNIT_CAPTIONS[unit]}</p>\n      </div>\n      <div id=\"exampleParent2\">\n        <HotTable\n          data={data}\n          colHeaders={['SKU', 'Product', 'Category', 'Supplier', 'Quantity']}\n          rowHeaders={true}\n          width={width}\n          height={height}\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > div {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/react/example2.tsx","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Grid size · Compare size units · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst data = [\n  ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n  ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n  ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n  ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n  ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n  ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n  ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n  ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n  ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n  ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n  ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n  ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n];\n\nconst ExampleComponent = () => {\n  const [unit, setUnit] = useState('px');\n  const { width, height } = UNIT_SIZES[unit];\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"unitSelect\">Grid size unit</label>\n          <select id=\"unitSelect\" value={unit} onChange={(event) => setUnit(event.target.value)}>\n            {Object.keys(UNIT_SIZES).map((key) => (\n              <option key={key} value={key}>{key}</option>\n            ))}\n          </select>\n        </div>\n        <p className=\"unit-caption\">{UNIT_CAPTIONS[unit]}</p>\n      </div>\n      <div id=\"exampleParent2\">\n        <HotTable\n          data={data}\n          colHeaders={['SKU', 'Product', 'Category', 'Supplier', 'Quantity']}\n          rowHeaders={true}\n          width={width}\n          height={height}\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > div {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/react/example2.tsx","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example.vue.json
index b44086f6d..aa54f8684 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Grid size · Manual resizing · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(50)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst isContainerExpanded = ref(false);\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nfunction triggerBtnClickCallback() {\n  isContainerExpanded.value = !isContainerExpanded.value;\n  const parent = document.getElementById('exampleParent');\n\n  if (!parent) {\n    return;\n  }\n\n  parent.style.height = isContainerExpanded.value ? '410px' : '157px';\n  hotRef.value?.hotInstance?.refreshDimensions();\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"triggerBtn\" class=\"button button--primary\" @click=\"triggerBtnClickCallback\">\n          {{ isContainerExpanded ? 'Collapse container' : 'Expand container' }}\n        </button>\n      </div>\n    </div>\n    <div id=\"exampleParent\" class=\"exampleParent\">\n      <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style>\n#exampleParent {\n  height: 157px;\n}\n\n#exampleParent > div {\n  height: 100%;\n}\n</style>"},"docsPath":"guides/getting-started/grid-size/vue/example.vue","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Grid size · Manual resizing · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = new Array(100)\n  .fill(null)\n  .map((_, row) =>\n    new Array(50)\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst isContainerExpanded = ref(false);\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nfunction triggerBtnClickCallback() {\n  isContainerExpanded.value = !isContainerExpanded.value;\n  const parent = document.getElementById('exampleParent');\n\n  if (!parent) {\n    return;\n  }\n\n  parent.style.height = isContainerExpanded.value ? '410px' : '157px';\n  hotRef.value?.hotInstance?.refreshDimensions();\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  width: '100%',\n  height: '100%',\n  colWidths: 100,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"triggerBtn\" class=\"button button--primary\" @click=\"triggerBtnClickCallback\">\n          {{ isContainerExpanded ? 'Collapse container' : 'Expand container' }}\n        </button>\n      </div>\n    </div>\n    <div id=\"exampleParent\" class=\"exampleParent\">\n      <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style>\n#exampleParent {\n  height: 157px;\n}\n\n#exampleParent > div {\n  height: 100%;\n}\n</style>"},"docsPath":"guides/getting-started/grid-size/vue/example.vue","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example","exampleTitle":"Manual resizing","docPermalink":"/grid-size","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example2.vue.json
index ba5f696bb..9aa2d4600 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__grid-size__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Grid size · Compare size units · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst unitKeys = Object.keys(UNIT_SIZES);\nconst unit = ref('px');\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n  rowHeaders: true,\n  width: UNIT_SIZES['px'].width,\n  height: UNIT_SIZES['px'].height,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst changeUnit = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value;\n  const size = UNIT_SIZES[value];\n\n  unit.value = value;\n  hotTableRef.value?.hotInstance?.updateSettings({ width: size.width, height: size.height });\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"unitSelect\">Grid size unit</label>\n        <select id=\"unitSelect\" @change=\"changeUnit\">\n          <option v-for=\"key in unitKeys\" :key=\"key\" :value=\"key\">{{ key }}</option>\n        </select>\n      </div>\n      <p class=\"unit-caption\">{{ UNIT_CAPTIONS[unit] }}</p>\n    </div>\n    <div id=\"exampleParent2\">\n      <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style>\n#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > div {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}\n</style>"},"docsPath":"guides/getting-started/grid-size/vue/example2.vue","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Grid size · Compare size units · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst UNIT_SIZES: Record<string, { width: string; height: string }> = {\n  px: { width: '600px', height: '300px' },\n  '%': { width: '75%', height: '75%' },\n  em: { width: '37.5em', height: '18.75em' },\n  rem: { width: '37.5rem', height: '18.75rem' },\n  vh: { width: '50vh', height: '50vh' },\n  vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record<string, string> = {\n  px: 'A fixed pixel size, independent of any parent element or font size.',\n  '%': \"A percentage of the parent container's size (the dashed box).\",\n  em: \"A multiple of this element's own font size.\",\n  rem: \"A multiple of the document's root font size.\",\n  vh: \"A percentage of the browser viewport's height.\",\n  vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst unitKeys = Object.keys(UNIT_SIZES);\nconst unit = ref('px');\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n    ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n    ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n    ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n    ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n    ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n    ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n    ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n    ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n    ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n    ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n    ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n  rowHeaders: true,\n  width: UNIT_SIZES['px'].width,\n  height: UNIT_SIZES['px'].height,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst changeUnit = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value;\n  const size = UNIT_SIZES[value];\n\n  unit.value = value;\n  hotTableRef.value?.hotInstance?.updateSettings({ width: size.width, height: size.height });\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"unitSelect\">Grid size unit</label>\n        <select id=\"unitSelect\" @change=\"changeUnit\">\n          <option v-for=\"key in unitKeys\" :key=\"key\" :value=\"key\">{{ key }}</option>\n        </select>\n      </div>\n      <p class=\"unit-caption\">{{ UNIT_CAPTIONS[unit] }}</p>\n    </div>\n    <div id=\"exampleParent2\">\n      <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style>\n#exampleParent2 {\n  width: 800px;\n  max-width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n  border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > div {\n  height: 100%;\n}\n\n.unit-caption {\n  margin-top: 8px;\n  color: var(--sl-color-text, #485164);\n}\n</style>"},"docsPath":"guides/getting-started/grid-size/vue/example2.vue","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
index 3a01f8a6e..71fce5297 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Installation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-installation></example-installation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-installation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ];\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\nimport { registerLanguageDictionary, enUS } from \"handsontable/i18n\";\n\nregisterLanguageDictionary(enUS);\nregisterAllModules();\n\nconst globalHotConfig: HotGlobalConfig = {\n  license: NON_COMMERCIAL_LICENSE,\n  layoutDirection: \"ltr\",\n  language: enUS.languageCode,\n};\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },\n  ],\n};"},"docsPath":"guides/getting-started/installation/angular/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Installation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-installation></example-installation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-installation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ];\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\nimport { registerLanguageDictionary, enUS } from \"handsontable/i18n\";\n\nregisterLanguageDictionary(enUS);\nregisterAllModules();\n\nconst globalHotConfig: HotGlobalConfig = {\n  license: NON_COMMERCIAL_LICENSE,\n  layoutDirection: \"ltr\",\n  language: enUS.languageCode,\n};\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },\n  ],\n};"},"docsPath":"guides/getting-started/installation/angular/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
index a0b73a47b..26caaaea6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Installation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/installation/javascript/example1.js","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Installation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/installation/javascript/example1.js","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
index c7692309e..a6596650d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Installation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/installation/javascript/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Installation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/installation/javascript/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
index 5bed8ea8a..db654d473 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Installation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nconst ExampleComponent: FC = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\" // for non-commercial use only\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/installation/react/example1.tsx","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Installation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nconst ExampleComponent: FC = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\" // for non-commercial use only\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/installation/react/example1.tsx","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
index eff98fb7f..f508df468 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Installation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/installation/vue/example1.vue","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Installation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/installation/vue/example1.vue","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-methods__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-methods__react__example1.tsx.json
index 27fa32355..3f1a6aab4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-methods__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-methods__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Instance methods · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ];\n\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n\n  const selectCell = () => {\n    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n    hotTableComponentRef.current?.hotInstance?.selectCell(1, 1);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={selectCell}>Select cell B2</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        colHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-methods/react/example1.tsx","breadcrumb":["Getting Started","Instance methods"],"guide":"guides/getting-started/react-methods/react-methods.md","guideTitle":"Instance methods","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/instance-methods","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Instance methods · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ];\n\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n\n  const selectCell = () => {\n    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n    hotTableComponentRef.current?.hotInstance?.selectCell(1, 1);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={selectCell}>Select cell B2</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        colHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-methods/react/example1.tsx","breadcrumb":["Getting Started","Instance methods"],"guide":"guides/getting-started/react-methods/react-methods.md","guideTitle":"Instance methods","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/instance-methods","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example1.tsx.json
index bfdf43f2e..1f5e6a9fe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"redux\": \"5.0.1\",\n    \"react-redux\": \"9.3.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponentContent = () => {\n  const hotSettings = useSelector((state: RootState) => state);\n  const dispatch = useDispatch();\n  const hotTableComponentRef = useRef(null);\n\n  const hotData = hotSettings.data;\n  const isHotData = Array.isArray(hotData);\n\n  const onBeforeHotChange = (changes: (Handsontable.CellChange | null)[]) => {\n    dispatch({\n      type: 'updateData',\n      dataChanges: changes,\n    });\n\n    return false;\n  };\n\n  const toggleReadOnly = (event: MouseEvent) => {\n    dispatch({\n      type: 'updateReadOnly',\n      readOnly: (event.target as HTMLInputElement).checked,\n    });\n  };\n\n  return (\n    <div className=\"dump-example-container\">\n      <div id=\"example-container\">\n        <div id=\"example-preview\">\n          <div className=\"example-controls-container\">\n            <div className=\"controls\">\n              <label>\n                <input onClick={toggleReadOnly} type=\"checkbox\" />\n                Toggle <code>readOnly</code> for the entire table\n              </label>\n            </div>\n          </div>\n\n          <HotTable\n            ref={hotTableComponentRef}\n            beforeChange={onBeforeHotChange}\n            autoWrapRow={true}\n            autoWrapCol={true}\n            {...hotSettings}\n          />\n        </div>\n        <h3>Redux store dump</h3>\n        <pre id=\"redux-preview\" className=\"table-container\">\n          {isHotData && (\n            <div>\n              <strong>data:</strong>\n              <table style={{ border: '1px solid #d6d6d6' }}>\n                <tbody>\n                  {hotData.map((row, i) => (\n                    <tr key={i}>\n                      {row.map(\n                        (\n                          cell:\n                            | string\n                            | number\n                            | boolean\n                            | ReactElement<any, string | JSXElementConstructor<any>>\n                            | Iterable<ReactNode>\n                            | ReactPortal\n                            | null\n                            | undefined,\n                          i: Key | null | undefined\n                        ) => (\n                          <td key={i}>{cell}</td>\n                        )\n                      )}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          )}\n\n          <table>\n            <tbody>\n              {Object.entries(hotSettings).map(\n                ([name, value]) =>\n                  name !== 'data' && (\n                    <tr key={`${name}${value}`}>\n                      <td>\n                        <strong>{name}:</strong>\n                      </td>\n                      <td>{value.toString()}</td>\n                    </tr>\n                  )\n              )}\n            </tbody>\n          </table>\n        </pre>\n      </div>\n    </div>\n  );\n};\n\nconst initialReduxStoreState = {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  readOnly: false,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst updatesReducer = (\n  state = initialReduxStoreState,\n  action: { type: any; dataChanges: [any, any, any, any][]; readOnly: any }\n) => {\n  switch (action.type) {\n    case 'updateData': {\n      let hasChanged = false;\n      const newData = state.data.map((row) => [...row]);\n\n      action.dataChanges.forEach(([row, column, oldValue, newValue]) => {\n        if (newData[row][column] !== newValue) {\n          newData[row][column] = newValue;\n          hasChanged = true;\n        }\n      });\n\n      // Return the previous state when no value actually changed. Plugins write to the grid on\n      // their own (`mergeCells` clears the cells that a merge area covers), and handing back a new\n      // state object every time would re-render the component and resend the settings in a loop.\n      return hasChanged ? { ...state, data: newData } : state;\n    }\n\n    case 'updateReadOnly':\n      return {\n        ...state,\n        readOnly: action.readOnly,\n      };\n\n    default:\n      return state;\n  }\n};\n\nexport type RootState = ReturnType<typeof updatesReducer>;\n\nconst reduxStore = createStore(updatesReducer);\n\nconst ExampleComponent = () => (\n  <Provider store={reduxStore}>\n    <ExampleComponentContent />\n  </Provider>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example1.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/redux","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"redux\": \"5.0.1\",\n    \"react-redux\": \"9.3.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponentContent = () => {\n  const hotSettings = useSelector((state: RootState) => state);\n  const dispatch = useDispatch();\n  const hotTableComponentRef = useRef(null);\n\n  const hotData = hotSettings.data;\n  const isHotData = Array.isArray(hotData);\n\n  const onBeforeHotChange = (changes: (Handsontable.CellChange | null)[]) => {\n    dispatch({\n      type: 'updateData',\n      dataChanges: changes,\n    });\n\n    return false;\n  };\n\n  const toggleReadOnly = (event: MouseEvent) => {\n    dispatch({\n      type: 'updateReadOnly',\n      readOnly: (event.target as HTMLInputElement).checked,\n    });\n  };\n\n  return (\n    <div className=\"dump-example-container\">\n      <div id=\"example-container\">\n        <div id=\"example-preview\">\n          <div className=\"example-controls-container\">\n            <div className=\"controls\">\n              <label>\n                <input onClick={toggleReadOnly} type=\"checkbox\" />\n                Toggle <code>readOnly</code> for the entire table\n              </label>\n            </div>\n          </div>\n\n          <HotTable\n            ref={hotTableComponentRef}\n            beforeChange={onBeforeHotChange}\n            autoWrapRow={true}\n            autoWrapCol={true}\n            {...hotSettings}\n          />\n        </div>\n        <h3>Redux store dump</h3>\n        <pre id=\"redux-preview\" className=\"table-container\">\n          {isHotData && (\n            <div>\n              <strong>data:</strong>\n              <table style={{ border: '1px solid #d6d6d6' }}>\n                <tbody>\n                  {hotData.map((row, i) => (\n                    <tr key={i}>\n                      {row.map(\n                        (\n                          cell:\n                            | string\n                            | number\n                            | boolean\n                            | ReactElement<any, string | JSXElementConstructor<any>>\n                            | Iterable<ReactNode>\n                            | ReactPortal\n                            | null\n                            | undefined,\n                          i: Key | null | undefined\n                        ) => (\n                          <td key={i}>{cell}</td>\n                        )\n                      )}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          )}\n\n          <table>\n            <tbody>\n              {Object.entries(hotSettings).map(\n                ([name, value]) =>\n                  name !== 'data' && (\n                    <tr key={`${name}${value}`}>\n                      <td>\n                        <strong>{name}:</strong>\n                      </td>\n                      <td>{value.toString()}</td>\n                    </tr>\n                  )\n              )}\n            </tbody>\n          </table>\n        </pre>\n      </div>\n    </div>\n  );\n};\n\nconst initialReduxStoreState = {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  readOnly: false,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst updatesReducer = (\n  state = initialReduxStoreState,\n  action: { type: any; dataChanges: [any, any, any, any][]; readOnly: any }\n) => {\n  switch (action.type) {\n    case 'updateData': {\n      let hasChanged = false;\n      const newData = state.data.map((row) => [...row]);\n\n      action.dataChanges.forEach(([row, column, oldValue, newValue]) => {\n        if (newData[row][column] !== newValue) {\n          newData[row][column] = newValue;\n          hasChanged = true;\n        }\n      });\n\n      // Return the previous state when no value actually changed. Plugins write to the grid on\n      // their own (`mergeCells` clears the cells that a merge area covers), and handing back a new\n      // state object every time would re-render the component and resend the settings in a loop.\n      return hasChanged ? { ...state, data: newData } : state;\n    }\n\n    case 'updateReadOnly':\n      return {\n        ...state,\n        readOnly: action.readOnly,\n      };\n\n    default:\n      return state;\n  }\n};\n\nexport type RootState = ReturnType<typeof updatesReducer>;\n\nconst reduxStore = createStore(updatesReducer);\n\nconst ExampleComponent = () => (\n  <Provider store={reduxStore}>\n    <ExampleComponentContent />\n  </Provider>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example1.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/redux","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example6.tsx.json
index d59ec4cd7..0b534e869 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__react-redux__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"react-colorful\": \"5.8.1\",\n    \"react-redux\": \"9.3.0\",\n    \"redux\": \"5.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n  name: string;\n  value?: number;\n  starCount?: number;\n  starColor?: string;\n  emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n  return (\n    <div style={{ display: 'inline-flex', gap: '1px' }}>\n      {Array.from({ length: starCount }, (_, i) => (\n        <span\n          key={`${name}-${i + 1}`}\n          style={{ fontSize: '18px', color: i + 1 <= value ? starColor : emptyStarColor, lineHeight: 1 }}\n        >\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n  const dispatch = useDispatch();\n  const editorRef = useRef<HTMLDivElement>(null);\n  const [pickedColor, setPickedColor] = useState('');\n\n  const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n    onOpen: () => {\n      if (editorRef.current) editorRef.current.style.display = 'block';\n      (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n    },\n    onClose: () => {\n      if (editorRef.current) editorRef.current.style.display = 'none';\n\n      setPickedColor('');\n    },\n    onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n      const tdPosition = TD.getBoundingClientRect();\n\n      if (!editorRef.current) return;\n\n      editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n      editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n    },\n    onFocus: () => {},\n  });\n\n  const onPickedColor = (color: string) => {\n    setValue(color);\n  };\n\n  const applyColor = () => {\n    if (col === 1) {\n      dispatch({\n        type: 'updateActiveStarColor',\n        row,\n        hexColor: value,\n      });\n    } else if (col === 2) {\n      dispatch({\n        type: 'updateInactiveStarColor',\n        row,\n        hexColor: value,\n      });\n    }\n\n    finishEditing();\n  };\n\n  const stopMousedownPropagation = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const stopKeyboardPropagation = (e: KeyboardEvent) => {\n    e.stopPropagation();\n\n    if (e.key === 'Escape') {\n      applyColor();\n    }\n  };\n\n  return (\n    <div\n      style={{\n        display: 'none',\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        zIndex: 999,\n        background: '#fff',\n        padding: '15px',\n        border: '1px solid #cecece',\n      }}\n      ref={editorRef}\n      onMouseDown={stopMousedownPropagation}\n      onKeyDown={stopKeyboardPropagation}\n    >\n      <HexColorPicker color={pickedColor || value} onChange={onPickedColor} />\n      <button style={{ width: '100%', height: '33px', marginTop: '10px' }} onClick={applyColor}>\n        Apply\n      </button>\n    </div>\n  );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n  return {\n    activeColors: state.appReducer.activeColors,\n    inactiveColors: state.appReducer.inactiveColors,\n  };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n  return (\n    <>\n      <div\n        style={{\n          background: value,\n          width: '21px',\n          height: '21px',\n          float: 'left',\n          marginRight: '5px',\n        }}\n      />\n      <div>{value}</div>\n    </>\n  );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n  activeColors?: string[];\n  inactiveColors?: string[];\n} = {\n  activeColors: [],\n  inactiveColors: [],\n};\n\nconst appReducer = (\n  state = initialReduxStoreState,\n  action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n  switch (action.type) {\n    case 'initRatingColors': {\n      const { hotData } = action;\n\n      const activeColors = hotData.map((data: string[]) => data[1]);\n      const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n      return {\n        ...state,\n        activeColors,\n        inactiveColors,\n      };\n    }\n\n    case 'updateActiveStarColor': {\n      const rowIndex = action.row;\n      const newColor = action.hexColor;\n\n      const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n      activeColorArray[rowIndex] = newColor;\n\n      return {\n        ...state,\n        activeColors: activeColorArray,\n      };\n    }\n\n    case 'updateInactiveStarColor': {\n      const rowIndex = action.row;\n      const newColor = action.hexColor;\n\n      const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n      inactiveColorArray[rowIndex] = newColor;\n\n      return {\n        ...state,\n        inactiveColors: inactiveColorArray,\n      };\n    }\n\n    default:\n      return state;\n  }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType<typeof actionReducers>;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n  row,\n  col,\n  value,\n  activeColors,\n  inactiveColors,\n}: {\n  row?: number;\n  col?: number;\n  value?: number;\n  activeColors?: string;\n  inactiveColors?: string;\n}) => {\n  return (\n    <StarRating\n      name={`${row}-${col}`}\n      value={value}\n      starCount={5}\n      starColor={activeColors?.[row || 0]}\n      emptyStarColor={inactiveColors?.[row || 0]}\n    />\n  );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n  activeColors: state.appReducer.activeColors,\n  inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n  [1, '#ff6900', '#fcb900'],\n  [2, '#fcb900', '#7bdcb5'],\n  [3, '#7bdcb5', '#8ed1fc'],\n  [4, '#00d084', '#0693e3'],\n  [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n  useEffect(() => {\n    reduxStore.dispatch({\n      type: 'initRatingColors',\n      hotData: data,\n    });\n  }, []);\n\n  return (\n    <Provider store={reduxStore}>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        rowHeights={30}\n        colHeaders={['Rating', 'Active star color', 'Inactive star color']}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn width={100} type=\"numeric\" renderer={StarRatingRenderer} />\n        <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n        <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n      </HotTable>\n    </Provider>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"react-colorful\": \"5.8.1\",\n    \"react-redux\": \"9.3.0\",\n    \"redux\": \"5.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n  name: string;\n  value?: number;\n  starCount?: number;\n  starColor?: string;\n  emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n  return (\n    <div style={{ display: 'inline-flex', gap: '1px' }}>\n      {Array.from({ length: starCount }, (_, i) => (\n        <span\n          key={`${name}-${i + 1}`}\n          style={{ fontSize: '18px', color: i + 1 <= value ? starColor : emptyStarColor, lineHeight: 1 }}\n        >\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\ntype RendererProps = {\n  TD?: HTMLTableCellElement;\n  value?: string | number;\n  row?: number;\n  col?: number;\n  cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n  const dispatch = useDispatch();\n  const editorRef = useRef<HTMLDivElement>(null);\n  const [pickedColor, setPickedColor] = useState('');\n\n  const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n    onOpen: () => {\n      if (editorRef.current) editorRef.current.style.display = 'block';\n      (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n    },\n    onClose: () => {\n      if (editorRef.current) editorRef.current.style.display = 'none';\n\n      setPickedColor('');\n    },\n    onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n      const tdPosition = TD.getBoundingClientRect();\n\n      if (!editorRef.current) return;\n\n      editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n      editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n    },\n    onFocus: () => {},\n  });\n\n  const onPickedColor = (color: string) => {\n    setValue(color);\n  };\n\n  const applyColor = () => {\n    if (col === 1) {\n      dispatch({\n        type: 'updateActiveStarColor',\n        row,\n        hexColor: value,\n      });\n    } else if (col === 2) {\n      dispatch({\n        type: 'updateInactiveStarColor',\n        row,\n        hexColor: value,\n      });\n    }\n\n    finishEditing();\n  };\n\n  const stopMousedownPropagation = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const stopKeyboardPropagation = (e: KeyboardEvent) => {\n    e.stopPropagation();\n\n    if (e.key === 'Escape') {\n      applyColor();\n    }\n  };\n\n  return (\n    <div\n      style={{\n        display: 'none',\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        zIndex: 999,\n        background: '#fff',\n        padding: '15px',\n        border: '1px solid #cecece',\n      }}\n      ref={editorRef}\n      onMouseDown={stopMousedownPropagation}\n      onKeyDown={stopKeyboardPropagation}\n    >\n      <HexColorPicker color={pickedColor || value} onChange={onPickedColor} />\n      <button style={{ width: '100%', height: '33px', marginTop: '10px' }} onClick={applyColor}>\n        Apply\n      </button>\n    </div>\n  );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n  return {\n    activeColors: state.appReducer.activeColors,\n    inactiveColors: state.appReducer.inactiveColors,\n  };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n  return (\n    <>\n      <div\n        style={{\n          background: value,\n          width: '21px',\n          height: '21px',\n          float: 'left',\n          marginRight: '5px',\n        }}\n      />\n      <div>{value}</div>\n    </>\n  );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n  activeColors?: string[];\n  inactiveColors?: string[];\n} = {\n  activeColors: [],\n  inactiveColors: [],\n};\n\nconst appReducer = (\n  state = initialReduxStoreState,\n  action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n  switch (action.type) {\n    case 'initRatingColors': {\n      const { hotData } = action;\n\n      const activeColors = hotData.map((data: string[]) => data[1]);\n      const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n      return {\n        ...state,\n        activeColors,\n        inactiveColors,\n      };\n    }\n\n    case 'updateActiveStarColor': {\n      const rowIndex = action.row;\n      const newColor = action.hexColor;\n\n      const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n      activeColorArray[rowIndex] = newColor;\n\n      return {\n        ...state,\n        activeColors: activeColorArray,\n      };\n    }\n\n    case 'updateInactiveStarColor': {\n      const rowIndex = action.row;\n      const newColor = action.hexColor;\n\n      const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n      inactiveColorArray[rowIndex] = newColor;\n\n      return {\n        ...state,\n        inactiveColors: inactiveColorArray,\n      };\n    }\n\n    default:\n      return state;\n  }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType<typeof actionReducers>;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n  row,\n  col,\n  value,\n  activeColors,\n  inactiveColors,\n}: {\n  row?: number;\n  col?: number;\n  value?: number;\n  activeColors?: string;\n  inactiveColors?: string;\n}) => {\n  return (\n    <StarRating\n      name={`${row}-${col}`}\n      value={value}\n      starCount={5}\n      starColor={activeColors?.[row || 0]}\n      emptyStarColor={inactiveColors?.[row || 0]}\n    />\n  );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n  activeColors: state.appReducer.activeColors,\n  inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n  [1, '#ff6900', '#fcb900'],\n  [2, '#fcb900', '#7bdcb5'],\n  [3, '#7bdcb5', '#8ed1fc'],\n  [4, '#00d084', '#0693e3'],\n  [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n  useEffect(() => {\n    reduxStore.dispatch({\n      type: 'initRatingColors',\n      hotData: data,\n    });\n  }, []);\n\n  return (\n    <Provider store={reduxStore}>\n      <HotTable\n        data={data}\n        rowHeaders={true}\n        rowHeights={30}\n        colHeaders={['Rating', 'Active star color', 'Inactive star color']}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn width={100} type=\"numeric\" renderer={StarRatingRenderer} />\n        <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n        <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n      </HotTable>\n    </Provider>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__angular__example1.ts.json
index 2e70265c4..f27fee758 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Saving data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n    .controls {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n  </style>\n</head>\n<body>\n  <div>\n    \n    <example1-saving-data></example1-saving-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-saving-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"load\"\n          class=\"button button--primary button--blue\"\n          (click)=\"loadClickCallback($event)\"\n        >\n          Load data\n        </button>\n        <button\n          id=\"save\"\n          class=\"button button--primary button--blue\"\n          (click)=\"saveClickCallback($event)\"\n        >\n          Save data\n        </button>\n        <label>\n          <input\n            type=\"checkbox\"\n            name=\"autosave\"\n            id=\"autosave\"\n            [checked]=\"isAutoSave\"\n            (click)=\"autosaveClickCallback($event)\"\n          />\n          Autosave\n        </label>\n      </div>\n      <output class=\"console\" id=\"output\"> {{ output }} </output>\n    </div>\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isAutoSave = false;\n  output: string = 'Click \"Load\" to load data from server';\n\n  readonly gridSettings: GridSettings = {\n    startRows: 8,\n    startCols: 6,\n    rowHeaders: true,\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n\n    afterChange: (\n      change: Handsontable.CellChange[] | null,\n      source: Handsontable.ChangeSource\n    ) => {\n      if (source === 'loadData') {\n        return; // don't save this change\n      }\n\n      if (!this.isAutoSave) {\n        return;\n      }\n\n      fetch('/docs/scripts/json/save.json', {\n        method: 'POST',\n        mode: 'no-cors',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({ data: change }),\n      }).then(() => {\n        this.output = `Autosaved (${change?.length} cell${\n          (change?.length || 0) > 1 ? 's' : ''\n        })`;\n        console.log('The POST request is only used here for the demo purposes');\n      });\n    }\n  };\n\n  autosaveClickCallback(event: MouseEvent): void {\n    const target = event.target as HTMLInputElement;\n\n    this.isAutoSave = target.checked;\n\n    if (target.checked) {\n      this.output = 'Changes will be autosaved';\n    } else {\n      this.output = 'Changes will not be autosaved';\n    }\n  }\n\n  loadClickCallback(event: MouseEvent): void {\n    const hot = this.hotTable?.hotInstance;\n\n    fetch('/docs/scripts/json/load.json').then(\n      (response) => {\n        response.json().then((data) => {\n          hot?.loadData(data.data);\n          // or, use `updateData()` to replace `data` without resetting states\n          this.output = 'Data loaded';\n        });\n      }\n    );\n  }\n\n  saveClickCallback(event: MouseEvent): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // save all cell's data\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: hot?.getData() }),\n    }).then(() => {\n      this.output = 'Data saved';\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/saving-data/angular/example1.ts","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Saving data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n    .controls {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n  </style>\n</head>\n<body>\n  <div>\n    \n    <example1-saving-data></example1-saving-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-saving-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"load\"\n          class=\"button button--primary button--blue\"\n          (click)=\"loadClickCallback($event)\"\n        >\n          Load data\n        </button>\n        <button\n          id=\"save\"\n          class=\"button button--primary button--blue\"\n          (click)=\"saveClickCallback($event)\"\n        >\n          Save data\n        </button>\n        <label>\n          <input\n            type=\"checkbox\"\n            name=\"autosave\"\n            id=\"autosave\"\n            [checked]=\"isAutoSave\"\n            (click)=\"autosaveClickCallback($event)\"\n          />\n          Autosave\n        </label>\n      </div>\n      <output class=\"console\" id=\"output\"> {{ output }} </output>\n    </div>\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isAutoSave = false;\n  output: string = 'Click \"Load\" to load data from server';\n\n  readonly gridSettings: GridSettings = {\n    startRows: 8,\n    startCols: 6,\n    rowHeaders: true,\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n\n    afterChange: (\n      change: Handsontable.CellChange[] | null,\n      source: Handsontable.ChangeSource\n    ) => {\n      if (source === 'loadData') {\n        return; // don't save this change\n      }\n\n      if (!this.isAutoSave) {\n        return;\n      }\n\n      fetch('/docs/scripts/json/save.json', {\n        method: 'POST',\n        mode: 'no-cors',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({ data: change }),\n      }).then(() => {\n        this.output = `Autosaved (${change?.length} cell${\n          (change?.length || 0) > 1 ? 's' : ''\n        })`;\n        console.log('The POST request is only used here for the demo purposes');\n      });\n    }\n  };\n\n  autosaveClickCallback(event: MouseEvent): void {\n    const target = event.target as HTMLInputElement;\n\n    this.isAutoSave = target.checked;\n\n    if (target.checked) {\n      this.output = 'Changes will be autosaved';\n    } else {\n      this.output = 'Changes will not be autosaved';\n    }\n  }\n\n  loadClickCallback(event: MouseEvent): void {\n    const hot = this.hotTable?.hotInstance;\n\n    fetch('/docs/scripts/json/load.json').then(\n      (response) => {\n        response.json().then((data) => {\n          hot?.loadData(data.data);\n          // or, use `updateData()` to replace `data` without resetting states\n          this.output = 'Data loaded';\n        });\n      }\n    );\n  }\n\n  saveClickCallback(event: MouseEvent): void {\n    const hot = this.hotTable?.hotInstance;\n\n    // save all cell's data\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: hot?.getData() }),\n    }).then(() => {\n      this.output = 'Data saved';\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/saving-data/angular/example1.ts","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.js.json
index dd239eb0f..758c01d0b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Saving data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"load\" class=\"button button--primary button--blue\">Load data</button>\n      <button id=\"save\" class=\"button button--primary button--blue\">Save data</button>\n      <label>\n        <input type=\"checkbox\" name=\"autosave\" id=\"autosave\"/>\n        Autosave\n      </label>\n    </div>\n  \n    <output class=\"console\" id=\"output\">Click \"Load\" to load data from server</output>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst exampleConsole = document.querySelector('#output');\nconst autosave = document.querySelector('#autosave');\nconst load = document.querySelector('#load');\nconst save = document.querySelector('#save');\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange(change, source) {\n    if (source === 'loadData') {\n      return; // don't save this change\n    }\n\n    if (!change) {\n      return;\n    }\n\n    if (!autosave.checked) {\n      return;\n    }\n\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: change }),\n    }).then(() => {\n      exampleConsole.innerText = `Autosaved (${change.length} cell${change.length > 1 ? 's' : ''})`;\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\nload.addEventListener('click', () => {\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data) => {\n      hot.loadData(data.data);\n      // or, use `updateData()` to replace `data` without resetting states\n      exampleConsole.innerText = 'Data loaded';\n    });\n  });\n});\nsave.addEventListener('click', () => {\n  // save all cell's data\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ data: hot.getData() }),\n  }).then(() => {\n    exampleConsole.innerText = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n});\nautosave.addEventListener('click', () => {\n  if (autosave.checked) {\n    exampleConsole.innerText = 'Changes will be autosaved';\n  } else {\n    exampleConsole.innerText = 'Changes will not be autosaved';\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/javascript/example1.js","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Saving data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"load\" class=\"button button--primary button--blue\">Load data</button>\n      <button id=\"save\" class=\"button button--primary button--blue\">Save data</button>\n      <label>\n        <input type=\"checkbox\" name=\"autosave\" id=\"autosave\"/>\n        Autosave\n      </label>\n    </div>\n  \n    <output class=\"console\" id=\"output\">Click \"Load\" to load data from server</output>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst exampleConsole = document.querySelector('#output');\nconst autosave = document.querySelector('#autosave');\nconst load = document.querySelector('#load');\nconst save = document.querySelector('#save');\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange(change, source) {\n    if (source === 'loadData') {\n      return; // don't save this change\n    }\n\n    if (!change) {\n      return;\n    }\n\n    if (!autosave.checked) {\n      return;\n    }\n\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: change }),\n    }).then(() => {\n      exampleConsole.innerText = `Autosaved (${change.length} cell${change.length > 1 ? 's' : ''})`;\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\nload.addEventListener('click', () => {\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data) => {\n      hot.loadData(data.data);\n      // or, use `updateData()` to replace `data` without resetting states\n      exampleConsole.innerText = 'Data loaded';\n    });\n  });\n});\nsave.addEventListener('click', () => {\n  // save all cell's data\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ data: hot.getData() }),\n  }).then(() => {\n    exampleConsole.innerText = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n});\nautosave.addEventListener('click', () => {\n  if (autosave.checked) {\n    exampleConsole.innerText = 'Changes will be autosaved';\n  } else {\n    exampleConsole.innerText = 'Changes will not be autosaved';\n  }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/javascript/example1.js","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.ts.json
index 1b850b35c..af4147189 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Saving data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"load\" class=\"button button--primary button--blue\">Load data</button>\n      <button id=\"save\" class=\"button button--primary button--blue\">Save data</button>\n      <label>\n        <input type=\"checkbox\" name=\"autosave\" id=\"autosave\"/>\n        Autosave\n      </label>\n    </div>\n  \n    <output class=\"console\" id=\"output\">Click \"Load\" to load data from server</output>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\nconst exampleConsole = document.querySelector<HTMLDivElement>('#output')!;\nconst autosave = document.querySelector<HTMLInputElement>('#autosave')!;\nconst load = document.querySelector<HTMLButtonElement>('#load')!;\nconst save = document.querySelector<HTMLButtonElement>('#save')!;\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange(change: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n    if (source === 'loadData') {\n      return; // don't save this change\n    }\n\n    if (!change) {\n      return;\n    }\n\n    if (!autosave.checked) {\n      return;\n    }\n\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: change }),\n    }).then(() => {\n      exampleConsole.innerText = `Autosaved (${change.length} cell${change.length > 1 ? 's' : ''})`;\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\nload.addEventListener('click', () => {\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data) => {\n      hot.loadData(data.data);\n      // or, use `updateData()` to replace `data` without resetting states\n      exampleConsole.innerText = 'Data loaded';\n    });\n  });\n});\n\nsave.addEventListener('click', () => {\n  // save all cell's data\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ data: hot.getData() }),\n  }).then(() => {\n    exampleConsole.innerText = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n});\n\nautosave.addEventListener('click', () => {\n  if (autosave.checked) {\n    exampleConsole.innerText = 'Changes will be autosaved';\n  } else {\n    exampleConsole.innerText = 'Changes will not be autosaved';\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/javascript/example1.ts","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Saving data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"load\" class=\"button button--primary button--blue\">Load data</button>\n      <button id=\"save\" class=\"button button--primary button--blue\">Save data</button>\n      <label>\n        <input type=\"checkbox\" name=\"autosave\" id=\"autosave\"/>\n        Autosave\n      </label>\n    </div>\n  \n    <output class=\"console\" id=\"output\">Click \"Load\" to load data from server</output>\n  </div>\n  \n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\nconst exampleConsole = document.querySelector<HTMLDivElement>('#output')!;\nconst autosave = document.querySelector<HTMLInputElement>('#autosave')!;\nconst load = document.querySelector<HTMLButtonElement>('#load')!;\nconst save = document.querySelector<HTMLButtonElement>('#save')!;\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange(change: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n    if (source === 'loadData') {\n      return; // don't save this change\n    }\n\n    if (!change) {\n      return;\n    }\n\n    if (!autosave.checked) {\n      return;\n    }\n\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: change }),\n    }).then(() => {\n      exampleConsole.innerText = `Autosaved (${change.length} cell${change.length > 1 ? 's' : ''})`;\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\nload.addEventListener('click', () => {\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data) => {\n      hot.loadData(data.data);\n      // or, use `updateData()` to replace `data` without resetting states\n      exampleConsole.innerText = 'Data loaded';\n    });\n  });\n});\n\nsave.addEventListener('click', () => {\n  // save all cell's data\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ data: hot.getData() }),\n  }).then(() => {\n    exampleConsole.innerText = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n});\n\nautosave.addEventListener('click', () => {\n  if (autosave.checked) {\n    exampleConsole.innerText = 'Changes will be autosaved';\n  } else {\n    exampleConsole.innerText = 'Changes will not be autosaved';\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/javascript/example1.ts","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__react__example1.tsx.json
index 0fe655041..1360fbd4b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Saving data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useRef, MouseEvent } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: React.FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState<string>('Click \"Load\" to load data from server');\n\n  const [isAutosave, setIsAutosave] = useState<boolean>(false);\n\n  const autosaveClickCallback = (event: MouseEvent<HTMLInputElement>) => {\n    const target = event.target as HTMLInputElement;\n\n    setIsAutosave(target.checked);\n\n    if (target.checked) {\n      setOutput('Changes will be autosaved');\n    } else {\n      setOutput('Changes will not be autosaved');\n    }\n  };\n\n  const loadClickCallback = (event: MouseEvent<HTMLButtonElement>) => {\n    const hot = hotRef.current?.hotInstance;\n\n    fetch('/docs/scripts/json/load.json').then((response) => {\n      response.json().then((data) => {\n        hot?.loadData(data.data);\n        // or, use `updateData()` to replace `data` without resetting states\n        setOutput('Data loaded');\n      });\n    });\n  };\n\n  const saveClickCallback = (event: MouseEvent<HTMLButtonElement>) => {\n    const hot = hotRef.current?.hotInstance;\n\n    // save all cell's data\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: hot?.getData() }),\n    }).then(() => {\n      setOutput('Data saved');\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"load\" className=\"button button--primary button--blue\" onClick={loadClickCallback}>\n            Load data\n          </button>\n          <button id=\"save\" className=\"button button--primary button--blue\" onClick={saveClickCallback}>\n            Save data\n          </button>\n          <label>\n            <input type=\"checkbox\" name=\"autosave\" id=\"autosave\" checked={isAutosave} onClick={autosaveClickCallback} />\n            Autosave\n          </label>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        startRows={8}\n        startCols={6}\n        rowHeaders={true}\n        colHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterChange={function (change: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n          if (source === 'loadData') {\n            return; // don't save this change\n          }\n\n          if (!isAutosave) {\n            return;\n          }\n\n          fetch('/docs/scripts/json/save.json', {\n            method: 'POST',\n            mode: 'no-cors',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            body: JSON.stringify({ data: change }),\n          }).then(() => {\n            setOutput(`Autosaved (${change?.length} cell${(change?.length || 0) > 1 ? 's' : ''})`);\n            console.log('The POST request is only used here for the demo purposes');\n          });\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/react/example1.tsx","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Saving data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useRef, MouseEvent } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: React.FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState<string>('Click \"Load\" to load data from server');\n\n  const [isAutosave, setIsAutosave] = useState<boolean>(false);\n\n  const autosaveClickCallback = (event: MouseEvent<HTMLInputElement>) => {\n    const target = event.target as HTMLInputElement;\n\n    setIsAutosave(target.checked);\n\n    if (target.checked) {\n      setOutput('Changes will be autosaved');\n    } else {\n      setOutput('Changes will not be autosaved');\n    }\n  };\n\n  const loadClickCallback = (event: MouseEvent<HTMLButtonElement>) => {\n    const hot = hotRef.current?.hotInstance;\n\n    fetch('/docs/scripts/json/load.json').then((response) => {\n      response.json().then((data) => {\n        hot?.loadData(data.data);\n        // or, use `updateData()` to replace `data` without resetting states\n        setOutput('Data loaded');\n      });\n    });\n  };\n\n  const saveClickCallback = (event: MouseEvent<HTMLButtonElement>) => {\n    const hot = hotRef.current?.hotInstance;\n\n    // save all cell's data\n    fetch('/docs/scripts/json/save.json', {\n      method: 'POST',\n      mode: 'no-cors',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ data: hot?.getData() }),\n    }).then(() => {\n      setOutput('Data saved');\n      console.log('The POST request is only used here for the demo purposes');\n    });\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"load\" className=\"button button--primary button--blue\" onClick={loadClickCallback}>\n            Load data\n          </button>\n          <button id=\"save\" className=\"button button--primary button--blue\" onClick={saveClickCallback}>\n            Save data\n          </button>\n          <label>\n            <input type=\"checkbox\" name=\"autosave\" id=\"autosave\" checked={isAutosave} onClick={autosaveClickCallback} />\n            Autosave\n          </label>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        startRows={8}\n        startCols={6}\n        rowHeaders={true}\n        colHeaders={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterChange={function (change: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n          if (source === 'loadData') {\n            return; // don't save this change\n          }\n\n          if (!isAutosave) {\n            return;\n          }\n\n          fetch('/docs/scripts/json/save.json', {\n            method: 'POST',\n            mode: 'no-cors',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            body: JSON.stringify({ data: change }),\n          }).then(() => {\n            setOutput(`Autosaved (${change?.length} cell${(change?.length || 0) > 1 ? 's' : ''})`);\n            console.log('The POST request is only used here for the demo purposes');\n          });\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".controls {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}"},"docsPath":"guides/getting-started/saving-data/react/example1.tsx","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__vue__example1.vue.json
index 40f516acb..9f3d42f13 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__saving-data__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Saving data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange, ChangeSource } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Click \"Load\" to load data from server');\nconst isAutosave = ref(false);\n\nfunction autosaveClickCallback(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  isAutosave.value = checked;\n  output.value = checked\n    ? 'Changes will be autosaved'\n    : 'Changes will not be autosaved';\n}\n\nfunction loadClickCallback() {\n  const hot = hotRef.value?.hotInstance;\n\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data: { data: unknown[][] }) => {\n      hot?.loadData(data.data);\n      output.value = 'Data loaded';\n    });\n  });\n}\n\nfunction saveClickCallback() {\n  const hot = hotRef.value?.hotInstance;\n\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ data: hot?.getData() }),\n  }).then(() => {\n    output.value = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n}\n\nfunction afterChange(change: CellChange[] | null, source: ChangeSource) {\n  if (source === 'loadData') {\n    return;\n  }\n\n  if (!isAutosave.value) {\n    return;\n  }\n\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ data: change }),\n  }).then(() => {\n    output.value = `Autosaved (${change?.length} cell${(change?.length || 0) > 1 ? 's' : ''})`;\n    console.log('The POST request is only used here for the demo purposes');\n  });\n}\n\nconst hotSettings = ref<GridSettings>({\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"load\" class=\"button button--primary button--blue\" @click=\"loadClickCallback\">\n          Load data\n        </button>\n        <button id=\"save\" class=\"button button--primary button--blue\" @click=\"saveClickCallback\">\n          Save data\n        </button>\n        <label>\n          <input\n            type=\"checkbox\"\n            name=\"autosave\"\n            id=\"autosave\"\n            :checked=\"isAutosave\"\n            @click=\"autosaveClickCallback\"\n          />\n          Autosave\n        </label>\n      </div>\n      <output class=\"console\" id=\"output\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/saving-data/vue/example1.vue","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Saving data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange, ChangeSource } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Click \"Load\" to load data from server');\nconst isAutosave = ref(false);\n\nfunction autosaveClickCallback(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  isAutosave.value = checked;\n  output.value = checked\n    ? 'Changes will be autosaved'\n    : 'Changes will not be autosaved';\n}\n\nfunction loadClickCallback() {\n  const hot = hotRef.value?.hotInstance;\n\n  fetch('/docs/scripts/json/load.json').then((response) => {\n    response.json().then((data: { data: unknown[][] }) => {\n      hot?.loadData(data.data);\n      output.value = 'Data loaded';\n    });\n  });\n}\n\nfunction saveClickCallback() {\n  const hot = hotRef.value?.hotInstance;\n\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ data: hot?.getData() }),\n  }).then(() => {\n    output.value = 'Data saved';\n    console.log('The POST request is only used here for the demo purposes');\n  });\n}\n\nfunction afterChange(change: CellChange[] | null, source: ChangeSource) {\n  if (source === 'loadData') {\n    return;\n  }\n\n  if (!isAutosave.value) {\n    return;\n  }\n\n  fetch('/docs/scripts/json/save.json', {\n    method: 'POST',\n    mode: 'no-cors',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ data: change }),\n  }).then(() => {\n    output.value = `Autosaved (${change?.length} cell${(change?.length || 0) > 1 ? 's' : ''})`;\n    console.log('The POST request is only used here for the demo purposes');\n  });\n}\n\nconst hotSettings = ref<GridSettings>({\n  startRows: 8,\n  startCols: 6,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  afterChange,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"load\" class=\"button button--primary button--blue\" @click=\"loadClickCallback\">\n          Load data\n        </button>\n        <button id=\"save\" class=\"button button--primary button--blue\" @click=\"saveClickCallback\">\n          Save data\n        </button>\n        <label>\n          <input\n            type=\"checkbox\"\n            name=\"autosave\"\n            id=\"autosave\"\n            :checked=\"isAutosave\"\n            @click=\"autosaveClickCallback\"\n          />\n          Autosave\n        </label>\n      </div>\n      <output class=\"console\" id=\"output\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/saving-data/vue/example1.vue","breadcrumb":["Getting Started","Saving data"],"guide":"guides/getting-started/saving-data/saving-data.md","guideTitle":"Saving data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/saving-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__angular__example1.ts.json
index d25eca4f5..dfeb80f0b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Server-side data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  RowUpdatePayload,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  { id: 1, product: 'Wireless ergonomic keyboard', sku: 'PER-KBD-901', category: 'Peripherals', unitPrice: 79.99, inStock: 210 },\n  { id: 2, product: 'USB-C 7-port hub', sku: 'PER-HUB-707', category: 'Peripherals', unitPrice: 45.5, inStock: 88 },\n  { id: 3, product: '27\" QHD monitor', sku: 'DSP-MON-270', category: 'Displays', unitPrice: 329, inStock: 42 },\n  { id: 4, product: 'Laptop stand aluminum', sku: 'ACC-STD-112', category: 'Accessories', unitPrice: 39.99, inStock: 156 },\n  { id: 5, product: 'Noise-cancelling headset', sku: 'AUD-HDS-440', category: 'Audio', unitPrice: 199, inStock: 67 },\n  { id: 6, product: 'Mechanical keyboard MX Brown', sku: 'PER-KBD-303', category: 'Peripherals', unitPrice: 129, inStock: 94 },\n  { id: 7, product: 'Webcam 1080p autofocus', sku: 'VID-CAM-108', category: 'Video', unitPrice: 89, inStock: 203 },\n  { id: 8, product: 'Docking station Thunderbolt 4', sku: 'PER-DCK-401', category: 'Peripherals', unitPrice: 279, inStock: 31 },\n  { id: 9, product: 'Portable SSD 1TB', sku: 'STO-SSD-1T', category: 'Storage', unitPrice: 119.99, inStock: 178 },\n  { id: 10, product: 'Office chair mesh back', sku: 'FUR-CHR-882', category: 'Furniture', unitPrice: 349, inStock: 22 },\n  { id: 11, product: 'LED desk lamp dimmable', sku: 'LGT-LMP-210', category: 'Lighting', unitPrice: 54.25, inStock: 115 },\n  { id: 12, product: 'Bluetooth mouse silent', sku: 'PER-MSE-055', category: 'Peripherals', unitPrice: 32.99, inStock: 340 },\n  { id: 13, product: 'HDMI 2.1 cable 2m', sku: 'CBL-HDM-200', category: 'Cables', unitPrice: 18.99, inStock: 512 },\n  { id: 14, product: 'USB-C PD charger 65W', sku: 'PWR-PD65-W', category: 'Power', unitPrice: 49, inStock: 189 },\n  { id: 15, product: 'Mesh Wi-Fi router', sku: 'NET-RT-M1', category: 'Networking', unitPrice: 159, inStock: 58 },\n  { id: 16, product: 'External HDD 4TB', sku: 'STO-HDD-4T', category: 'Storage', unitPrice: 99.5, inStock: 76 },\n  { id: 17, product: 'Graphics tablet medium', sku: 'CRT-TAB-M2', category: 'Creative', unitPrice: 249, inStock: 41 },\n  { id: 18, product: 'Microphone USB condenser', sku: 'AUD-MIC-U1', category: 'Audio', unitPrice: 74.99, inStock: 99 },\n  { id: 19, product: 'Privacy screen 14\"', sku: 'ACC-PRV-140', category: 'Accessories', unitPrice: 42, inStock: 133 },\n  { id: 20, product: 'Surge protector 8-outlet', sku: 'PWR-SRG-808', category: 'Power', unitPrice: 28.75, inStock: 267 },\n  { id: 21, product: 'FHD portable monitor 15.6\"', sku: 'DSP-MON-156', category: 'Displays', unitPrice: 189, inStock: 48 },\n  { id: 22, product: 'Ethernet cable Cat6 5m', sku: 'CBL-ETH-500', category: 'Cables', unitPrice: 12.5, inStock: 620 },\n  { id: 23, product: 'Laptop sleeve 15\"', sku: 'ACC-SLV-150', category: 'Accessories', unitPrice: 35, inStock: 201 },\n  { id: 24, product: 'Smart power strip', sku: 'PWR-STR-S1', category: 'Power', unitPrice: 59.99, inStock: 71 },\n  { id: 25, product: 'Ring light 12\" with stand', sku: 'LGT-RNG-120', category: 'Lighting', unitPrice: 65, inStock: 84 },\n  { id: 26, product: 'NVMe enclosure USB4', sku: 'STO-ENC-NV', category: 'Storage', unitPrice: 79, inStock: 55 },\n  { id: 27, product: 'Vertical mouse', sku: 'PER-MSE-VER', category: 'Peripherals', unitPrice: 56.5, inStock: 112 },\n  { id: 28, product: 'Conference speakerphone', sku: 'AUD-SPK-CF', category: 'Audio', unitPrice: 189.99, inStock: 36 },\n];\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row: DemoRow, colFilter: DataProviderFilterColumn): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows: DemoRow[], filters: DataProviderFilterColumn[] | null): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"reloadFetch()\">Reload data</button>\n        <button type=\"button\" (click)=\"simulateFailedFetch()\">Simulate failed fetch</button>\n      </div>\n      <output id=\"example1-status\">{{ fetchStatus }}</output>\n    </div>\n    <div id=\"example1\">\n      <hot-table\n        #hot\n        [settings]=\"hotSettings!\">\n      </hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hot') private hotTable?: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  fetchStatus = 'Initializing…';\n\n  private readonly inventoryServer = createInventoryDemoServer();\n\n  readonly hotSettings: GridSettings;\n\n  /** Defers binding updates so sync data-provider hooks do not trigger NG0100 in dev mode. */\n  private setFetchStatus(message: string): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.fetchStatus = message;\n      });\n    }, 0);\n  }\n\n  constructor() {\n    const server = this.inventoryServer;\n\n    this.hotSettings = {\n      dataProvider: {\n        rowId: 'id',\n        fetchRows: server.fetchRows.bind(server),\n        onRowsCreate: server.onRowsCreate.bind(server),\n        onRowsUpdate: server.onRowsUpdate.bind(server),\n        onRowsRemove: server.onRowsRemove.bind(server),\n      },\n      columns: [\n        { data: 'product' },\n        { data: 'sku', readOnly: true },\n        { data: 'category' },\n        { data: 'unitPrice', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'inStock', type: 'numeric' },\n      ],\n      rowHeaders: true,\n      colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n      width: '100%',\n      height: '300px',\n      columnSorting: true,\n      pagination: true,\n      dropdownMenu: true,\n      filters: true,\n      contextMenu: true,\n      emptyDataState: true,\n      notification: true,\n      beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n        this.setFetchStatus(\n          params.skipLoading\n            ? 'Updating after sort or edit…'\n            : 'Loading data…'\n        );\n      },\n      afterDataProviderFetch: () => {\n        this.setFetchStatus(`Ready (simulated ${LATENCY_MS}ms request).`);\n      },\n      afterDataProviderFetchError: (error: Error) => {\n        this.setFetchStatus(`Could not load data: ${error.message}`);\n      },\n    };\n  }\n\n  reloadFetch(): void {\n    this.inventoryServer.clearFailNextFetch();\n    void this.hotTable?.hotInstance?.getPlugin('dataProvider')?.fetchData()?.catch(() => {});\n  }\n\n  simulateFailedFetch(): void {\n    this.inventoryServer.setFailNextFetch();\n    void this.hotTable?.hotInstance?.getPlugin('dataProvider')?.fetchData()?.catch(() => {});\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/server-side-data/angular/example1.ts","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Server-side data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  RowUpdatePayload,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  { id: 1, product: 'Wireless ergonomic keyboard', sku: 'PER-KBD-901', category: 'Peripherals', unitPrice: 79.99, inStock: 210 },\n  { id: 2, product: 'USB-C 7-port hub', sku: 'PER-HUB-707', category: 'Peripherals', unitPrice: 45.5, inStock: 88 },\n  { id: 3, product: '27\" QHD monitor', sku: 'DSP-MON-270', category: 'Displays', unitPrice: 329, inStock: 42 },\n  { id: 4, product: 'Laptop stand aluminum', sku: 'ACC-STD-112', category: 'Accessories', unitPrice: 39.99, inStock: 156 },\n  { id: 5, product: 'Noise-cancelling headset', sku: 'AUD-HDS-440', category: 'Audio', unitPrice: 199, inStock: 67 },\n  { id: 6, product: 'Mechanical keyboard MX Brown', sku: 'PER-KBD-303', category: 'Peripherals', unitPrice: 129, inStock: 94 },\n  { id: 7, product: 'Webcam 1080p autofocus', sku: 'VID-CAM-108', category: 'Video', unitPrice: 89, inStock: 203 },\n  { id: 8, product: 'Docking station Thunderbolt 4', sku: 'PER-DCK-401', category: 'Peripherals', unitPrice: 279, inStock: 31 },\n  { id: 9, product: 'Portable SSD 1TB', sku: 'STO-SSD-1T', category: 'Storage', unitPrice: 119.99, inStock: 178 },\n  { id: 10, product: 'Office chair mesh back', sku: 'FUR-CHR-882', category: 'Furniture', unitPrice: 349, inStock: 22 },\n  { id: 11, product: 'LED desk lamp dimmable', sku: 'LGT-LMP-210', category: 'Lighting', unitPrice: 54.25, inStock: 115 },\n  { id: 12, product: 'Bluetooth mouse silent', sku: 'PER-MSE-055', category: 'Peripherals', unitPrice: 32.99, inStock: 340 },\n  { id: 13, product: 'HDMI 2.1 cable 2m', sku: 'CBL-HDM-200', category: 'Cables', unitPrice: 18.99, inStock: 512 },\n  { id: 14, product: 'USB-C PD charger 65W', sku: 'PWR-PD65-W', category: 'Power', unitPrice: 49, inStock: 189 },\n  { id: 15, product: 'Mesh Wi-Fi router', sku: 'NET-RT-M1', category: 'Networking', unitPrice: 159, inStock: 58 },\n  { id: 16, product: 'External HDD 4TB', sku: 'STO-HDD-4T', category: 'Storage', unitPrice: 99.5, inStock: 76 },\n  { id: 17, product: 'Graphics tablet medium', sku: 'CRT-TAB-M2', category: 'Creative', unitPrice: 249, inStock: 41 },\n  { id: 18, product: 'Microphone USB condenser', sku: 'AUD-MIC-U1', category: 'Audio', unitPrice: 74.99, inStock: 99 },\n  { id: 19, product: 'Privacy screen 14\"', sku: 'ACC-PRV-140', category: 'Accessories', unitPrice: 42, inStock: 133 },\n  { id: 20, product: 'Surge protector 8-outlet', sku: 'PWR-SRG-808', category: 'Power', unitPrice: 28.75, inStock: 267 },\n  { id: 21, product: 'FHD portable monitor 15.6\"', sku: 'DSP-MON-156', category: 'Displays', unitPrice: 189, inStock: 48 },\n  { id: 22, product: 'Ethernet cable Cat6 5m', sku: 'CBL-ETH-500', category: 'Cables', unitPrice: 12.5, inStock: 620 },\n  { id: 23, product: 'Laptop sleeve 15\"', sku: 'ACC-SLV-150', category: 'Accessories', unitPrice: 35, inStock: 201 },\n  { id: 24, product: 'Smart power strip', sku: 'PWR-STR-S1', category: 'Power', unitPrice: 59.99, inStock: 71 },\n  { id: 25, product: 'Ring light 12\" with stand', sku: 'LGT-RNG-120', category: 'Lighting', unitPrice: 65, inStock: 84 },\n  { id: 26, product: 'NVMe enclosure USB4', sku: 'STO-ENC-NV', category: 'Storage', unitPrice: 79, inStock: 55 },\n  { id: 27, product: 'Vertical mouse', sku: 'PER-MSE-VER', category: 'Peripherals', unitPrice: 56.5, inStock: 112 },\n  { id: 28, product: 'Conference speakerphone', sku: 'AUD-SPK-CF', category: 'Audio', unitPrice: 189.99, inStock: 36 },\n];\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row: DemoRow, colFilter: DataProviderFilterColumn): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows: DemoRow[], filters: DataProviderFilterColumn[] | null): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"reloadFetch()\">Reload data</button>\n        <button type=\"button\" (click)=\"simulateFailedFetch()\">Simulate failed fetch</button>\n      </div>\n      <output id=\"example1-status\">{{ fetchStatus }}</output>\n    </div>\n    <div id=\"example1\">\n      <hot-table\n        #hot\n        [settings]=\"hotSettings!\">\n      </hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hot') private hotTable?: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  fetchStatus = 'Initializing…';\n\n  private readonly inventoryServer = createInventoryDemoServer();\n\n  readonly hotSettings: GridSettings;\n\n  /** Defers binding updates so sync data-provider hooks do not trigger NG0100 in dev mode. */\n  private setFetchStatus(message: string): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.fetchStatus = message;\n      });\n    }, 0);\n  }\n\n  constructor() {\n    const server = this.inventoryServer;\n\n    this.hotSettings = {\n      dataProvider: {\n        rowId: 'id',\n        fetchRows: server.fetchRows.bind(server),\n        onRowsCreate: server.onRowsCreate.bind(server),\n        onRowsUpdate: server.onRowsUpdate.bind(server),\n        onRowsRemove: server.onRowsRemove.bind(server),\n      },\n      columns: [\n        { data: 'product' },\n        { data: 'sku', readOnly: true },\n        { data: 'category' },\n        { data: 'unitPrice', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'inStock', type: 'numeric' },\n      ],\n      rowHeaders: true,\n      colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n      width: '100%',\n      height: '300px',\n      columnSorting: true,\n      pagination: true,\n      dropdownMenu: true,\n      filters: true,\n      contextMenu: true,\n      emptyDataState: true,\n      notification: true,\n      beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n        this.setFetchStatus(\n          params.skipLoading\n            ? 'Updating after sort or edit…'\n            : 'Loading data…'\n        );\n      },\n      afterDataProviderFetch: () => {\n        this.setFetchStatus(`Ready (simulated ${LATENCY_MS}ms request).`);\n      },\n      afterDataProviderFetchError: (error: Error) => {\n        this.setFetchStatus(`Could not load data: ${error.message}`);\n      },\n    };\n  }\n\n  reloadFetch(): void {\n    this.inventoryServer.clearFailNextFetch();\n    void this.hotTable?.hotInstance?.getPlugin('dataProvider')?.fetchData()?.catch(() => {});\n  }\n\n  simulateFailedFetch(): void {\n    this.inventoryServer.setFailNextFetch();\n    void this.hotTable?.hotInstance?.getPlugin('dataProvider')?.fetchData()?.catch(() => {});\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/server-side-data/angular/example1.ts","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.js.json
index 6a995a48a..37a4aa24f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Server-side data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example1-reload\">Reload data</button>\n      <button type=\"button\" id=\"example1-fail-fetch\">Simulate failed fetch</button>\n    </div>\n    <output id=\"example1-status\">Initializing</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst LATENCY_MS = 450;\nconst SEED_CATALOG = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction asLowerString(cell) {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell, cond) {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row, colFilter) {\n  const value = row[colFilter.prop];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows, filters) {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms, signal) {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction createInventoryDemoServer() {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n// =============================================================================\n// Grid — Handsontable options, hooks, and demo toolbar.\n// =============================================================================\nconst server = createInventoryDemoServer();\nconst statusEl = document.querySelector('#example1-status');\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: server.fetchRows,\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    {\n      data: 'unitPrice',\n      type: 'numeric',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch: (params) => {\n    if (statusEl) {\n      statusEl.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n    }\n  },\n  afterDataProviderFetch: () => {\n    if (statusEl) {\n      statusEl.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  },\n  afterDataProviderFetchError: (error) => {\n    if (statusEl) {\n      statusEl.textContent = `Could not load data: ${error.message}`;\n    }\n  },\n});\n\nfunction runFetch(clearFail) {\n  if (clearFail) {\n    server.clearFailNextFetch();\n  } else {\n    server.setFailNextFetch();\n  }\n\n  const p = hot.getPlugin('dataProvider').fetchData();\n\n  void p.catch(() => {});\n}\n\ndocument.querySelector('#example1-reload')?.addEventListener('click', () => runFetch(true));\ndocument.querySelector('#example1-fail-fetch')?.addEventListener('click', () => runFetch(false));","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/server-side-data/javascript/example1.js","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Server-side data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example1-reload\">Reload data</button>\n      <button type=\"button\" id=\"example1-fail-fetch\">Simulate failed fetch</button>\n    </div>\n    <output id=\"example1-status\">Initializing</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst LATENCY_MS = 450;\nconst SEED_CATALOG = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction asLowerString(cell) {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell, cond) {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row, colFilter) {\n  const value = row[colFilter.prop];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows, filters) {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms, signal) {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction createInventoryDemoServer() {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n// =============================================================================\n// Grid — Handsontable options, hooks, and demo toolbar.\n// =============================================================================\nconst server = createInventoryDemoServer();\nconst statusEl = document.querySelector('#example1-status');\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: server.fetchRows,\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    {\n      data: 'unitPrice',\n      type: 'numeric',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch: (params) => {\n    if (statusEl) {\n      statusEl.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n    }\n  },\n  afterDataProviderFetch: () => {\n    if (statusEl) {\n      statusEl.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  },\n  afterDataProviderFetchError: (error) => {\n    if (statusEl) {\n      statusEl.textContent = `Could not load data: ${error.message}`;\n    }\n  },\n});\n\nfunction runFetch(clearFail) {\n  if (clearFail) {\n    server.clearFailNextFetch();\n  } else {\n    server.setFailNextFetch();\n  }\n\n  const p = hot.getPlugin('dataProvider').fetchData();\n\n  void p.catch(() => {});\n}\n\ndocument.querySelector('#example1-reload')?.addEventListener('click', () => runFetch(true));\ndocument.querySelector('#example1-fail-fetch')?.addEventListener('click', () => runFetch(false));","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/server-side-data/javascript/example1.js","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.ts.json
index 07c61b527..46fe654bd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Server-side data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example1-reload\">Reload data</button>\n      <button type=\"button\" id=\"example1-fail-fetch\">Simulate failed fetch</button>\n    </div>\n    <output id=\"example1-status\">Initializing</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\nregisterAllModules();\n\n// =============================================================================\n// In-memory \"server\" — replace with REST/GraphQL clients in production.\n// =============================================================================\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(\n  row: DemoRow,\n  colFilter: DataProviderFilterColumn\n): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(\n  rows: DemoRow[],\n  filters: DataProviderFilterColumn[] | null\n): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n// =============================================================================\n// Grid — Handsontable options, hooks, and demo toolbar.\n// =============================================================================\n\nconst server = createInventoryDemoServer();\nconst statusEl = document.querySelector('#example1-status');\nconst container = document.querySelector('#example1') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: server.fetchRows,\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    {\n      data: 'unitPrice',\n      type: 'numeric',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n    if (statusEl) {\n      statusEl.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n    }\n  },\n  afterDataProviderFetch: () => {\n    if (statusEl) {\n      statusEl.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  },\n  afterDataProviderFetchError: (error: Error) => {\n    if (statusEl) {\n      statusEl.textContent = `Could not load data: ${error.message}`;\n    }\n  },\n});\n\nfunction runFetch(clearFail: boolean) {\n  if (clearFail) {\n    server.clearFailNextFetch();\n  } else {\n    server.setFailNextFetch();\n  }\n\n  const p = hot.getPlugin('dataProvider').fetchData();\n\n  void p.catch(() => {});\n}\n\ndocument.querySelector('#example1-reload')?.addEventListener('click', () => runFetch(true));\ndocument.querySelector('#example1-fail-fetch')?.addEventListener('click', () => runFetch(false));","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/server-side-data/javascript/example1.ts","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Server-side data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"example1-reload\">Reload data</button>\n      <button type=\"button\" id=\"example1-fail-fetch\">Simulate failed fetch</button>\n    </div>\n    <output id=\"example1-status\">Initializing</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\nregisterAllModules();\n\n// =============================================================================\n// In-memory \"server\" — replace with REST/GraphQL clients in production.\n// =============================================================================\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(\n  row: DemoRow,\n  colFilter: DataProviderFilterColumn\n): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(\n  rows: DemoRow[],\n  filters: DataProviderFilterColumn[] | null\n): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\n// =============================================================================\n// Grid — Handsontable options, hooks, and demo toolbar.\n// =============================================================================\n\nconst server = createInventoryDemoServer();\nconst statusEl = document.querySelector('#example1-status');\nconst container = document.querySelector('#example1') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: server.fetchRows,\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    {\n      data: 'unitPrice',\n      type: 'numeric',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  rowHeaders: true,\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n    if (statusEl) {\n      statusEl.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n    }\n  },\n  afterDataProviderFetch: () => {\n    if (statusEl) {\n      statusEl.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  },\n  afterDataProviderFetchError: (error: Error) => {\n    if (statusEl) {\n      statusEl.textContent = `Could not load data: ${error.message}`;\n    }\n  },\n});\n\nfunction runFetch(clearFail: boolean) {\n  if (clearFail) {\n    server.clearFailNextFetch();\n  } else {\n    server.setFailNextFetch();\n  }\n\n  const p = hot.getPlugin('dataProvider').fetchData();\n\n  void p.catch(() => {});\n}\n\ndocument.querySelector('#example1-reload')?.addEventListener('click', () => runFetch(true));\ndocument.querySelector('#example1-fail-fetch')?.addEventListener('click', () => runFetch(false));","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/server-side-data/javascript/example1.ts","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__react__example1.tsx.json
index ad389c0d6..f8b0f8670 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Server-side data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { memo, useCallback, useMemo, useRef } from 'react';\nimport { HotTable, type HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  DataProviderFilterColumn,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(\n  row: DemoRow,\n  colFilter: DataProviderFilterColumn\n): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(\n  rows: DemoRow[],\n  filters: DataProviderFilterColumn[] | null\n): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\nconst columns = [\n  { data: 'product' },\n  { data: 'sku', readOnly: true },\n  { data: 'category' },\n  { data: 'unitPrice', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'inStock', type: 'numeric' },\n];\n\nconst colHeaders = ['Product', 'SKU', 'Category', 'Unit price', 'In stock'];\n\ntype InventoryServerTableProps = {\n  statusRef: React.RefObject<HTMLOutputElement>;\n  beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => void;\n  afterDataProviderFetch: () => void;\n  afterDataProviderFetchError: (error: Error) => void;\n};\n\n/**\n * Renders HotTable in isolation to avoid a fetch loop.\n * The React wrapper calls `updateSettings` after every HotTable render. With `dataProvider`,\n * each `updateSettings` call re-triggers a fetch. Status is therefore updated via a DOM ref\n * rather than React state so that status changes never cause HotTable to re-render.\n */\nconst InventoryServerTable = memo(function InventoryServerTable({\n  statusRef,\n  beforeDataProviderFetch,\n  afterDataProviderFetch,\n  afterDataProviderFetchError,\n}: InventoryServerTableProps) {\n  const hotRef = useRef<HotTableRef>(null);\n  const server = useMemo(() => createInventoryDemoServer(), []);\n\n  const fetchRows = useCallback(\n    (queryParameters: DataProviderQueryParameters, options: DataProviderFetchOptions) =>\n      server.fetchRows(queryParameters, options),\n    [server]\n  );\n\n  const dataProvider = useMemo(\n    () => ({\n      rowId: 'id',\n      fetchRows,\n      onRowsCreate: server.onRowsCreate,\n      onRowsUpdate: server.onRowsUpdate,\n      onRowsRemove: server.onRowsRemove,\n    }),\n    [fetchRows, server]\n  );\n\n  const runFetch = useCallback(\n    (clearFail: boolean) => {\n      if (clearFail) {\n        server.clearFailNextFetch();\n      } else {\n        server.setFailNextFetch();\n      }\n\n      const p = hotRef.current?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n      if (p) {\n        void p.catch(() => {});\n      }\n    },\n    [server]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={() => runFetch(true)}>\n            Reload data\n          </button>\n          <button type=\"button\" onClick={() => runFetch(false)}>\n            Simulate failed fetch\n          </button>\n        </div>\n        <output ref={statusRef} id=\"example1-status\">Initializing…</output>\n      </div>\n      <div id=\"example1\">\n        <HotTable\n          ref={hotRef}\n          dataProvider={dataProvider}\n          columns={columns}\n          rowHeaders\n          colHeaders={colHeaders}\n          width=\"100%\"\n          height=\"300px\"\n          licenseKey=\"non-commercial-and-evaluation\"\n          columnSorting\n          pagination\n          dropdownMenu\n          filters\n          contextMenu\n          emptyDataState\n          notification\n          beforeDataProviderFetch={beforeDataProviderFetch}\n          afterDataProviderFetch={afterDataProviderFetch}\n          afterDataProviderFetchError={afterDataProviderFetchError}\n        />\n      </div>\n    </>\n  );\n});\n\nconst ExampleComponent = () => {\n  const statusRef = useRef<HTMLOutputElement>(null);\n\n  const beforeDataProviderFetch = useCallback(\n    (params: DataProviderBeforeFetchParameters) => {\n      if (statusRef.current) {\n        statusRef.current.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n      }\n    },\n    []\n  );\n\n  const afterDataProviderFetch = useCallback(() => {\n    if (statusRef.current) {\n      statusRef.current.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  }, []);\n\n  const afterDataProviderFetchError = useCallback((error: Error) => {\n    if (statusRef.current) {\n      statusRef.current.textContent = `Could not load data: ${error.message}`;\n    }\n  }, []);\n\n  return (\n    <>\n      <InventoryServerTable\n        statusRef={statusRef}\n        beforeDataProviderFetch={beforeDataProviderFetch}\n        afterDataProviderFetch={afterDataProviderFetch}\n        afterDataProviderFetchError={afterDataProviderFetchError}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/server-side-data/react/example1.tsx","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Server-side data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { memo, useCallback, useMemo, useRef } from 'react';\nimport { HotTable, type HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  DataProviderFilterColumn,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\nconst LATENCY_MS = 450;\n\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction delay(ms: number, signal: AbortSignal): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction asLowerString(cell: unknown): string {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition): boolean {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(\n  row: DemoRow,\n  colFilter: DataProviderFilterColumn\n): boolean {\n  const value = row[colFilter.prop as keyof DemoRow];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(\n  rows: DemoRow[],\n  filters: DataProviderFilterColumn[] | null\n): DemoRow[] {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\ntype InventoryDemoServer = {\n  clearFailNextFetch: () => void;\n  setFailNextFetch: () => void;\n  fetchRows: (\n    queryParameters: DataProviderQueryParameters,\n    options: DataProviderFetchOptions\n  ) => Promise<{ rows: DemoRow[]; totalRows: number }>;\n  onRowsCreate: (payload: {\n    rowsAmount: number;\n    position: 'above' | 'below';\n    referenceRowId?: unknown;\n  }) => Promise<void>;\n  onRowsUpdate: (rows: RowUpdatePayload[]) => Promise<void>;\n  onRowsRemove: (rowIds: unknown[]) => Promise<void>;\n};\n\nfunction createInventoryDemoServer(): InventoryDemoServer {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters, { signal }) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop as keyof DemoRow];\n          const bv = b[sort.prop as keyof DemoRow];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\nconst columns = [\n  { data: 'product' },\n  { data: 'sku', readOnly: true },\n  { data: 'category' },\n  { data: 'unitPrice', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'inStock', type: 'numeric' },\n];\n\nconst colHeaders = ['Product', 'SKU', 'Category', 'Unit price', 'In stock'];\n\ntype InventoryServerTableProps = {\n  statusRef: React.RefObject<HTMLOutputElement>;\n  beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => void;\n  afterDataProviderFetch: () => void;\n  afterDataProviderFetchError: (error: Error) => void;\n};\n\n/**\n * Renders HotTable in isolation to avoid a fetch loop.\n * The React wrapper calls `updateSettings` after every HotTable render. With `dataProvider`,\n * each `updateSettings` call re-triggers a fetch. Status is therefore updated via a DOM ref\n * rather than React state so that status changes never cause HotTable to re-render.\n */\nconst InventoryServerTable = memo(function InventoryServerTable({\n  statusRef,\n  beforeDataProviderFetch,\n  afterDataProviderFetch,\n  afterDataProviderFetchError,\n}: InventoryServerTableProps) {\n  const hotRef = useRef<HotTableRef>(null);\n  const server = useMemo(() => createInventoryDemoServer(), []);\n\n  const fetchRows = useCallback(\n    (queryParameters: DataProviderQueryParameters, options: DataProviderFetchOptions) =>\n      server.fetchRows(queryParameters, options),\n    [server]\n  );\n\n  const dataProvider = useMemo(\n    () => ({\n      rowId: 'id',\n      fetchRows,\n      onRowsCreate: server.onRowsCreate,\n      onRowsUpdate: server.onRowsUpdate,\n      onRowsRemove: server.onRowsRemove,\n    }),\n    [fetchRows, server]\n  );\n\n  const runFetch = useCallback(\n    (clearFail: boolean) => {\n      if (clearFail) {\n        server.clearFailNextFetch();\n      } else {\n        server.setFailNextFetch();\n      }\n\n      const p = hotRef.current?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n      if (p) {\n        void p.catch(() => {});\n      }\n    },\n    [server]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={() => runFetch(true)}>\n            Reload data\n          </button>\n          <button type=\"button\" onClick={() => runFetch(false)}>\n            Simulate failed fetch\n          </button>\n        </div>\n        <output ref={statusRef} id=\"example1-status\">Initializing…</output>\n      </div>\n      <div id=\"example1\">\n        <HotTable\n          ref={hotRef}\n          dataProvider={dataProvider}\n          columns={columns}\n          rowHeaders\n          colHeaders={colHeaders}\n          width=\"100%\"\n          height=\"300px\"\n          licenseKey=\"non-commercial-and-evaluation\"\n          columnSorting\n          pagination\n          dropdownMenu\n          filters\n          contextMenu\n          emptyDataState\n          notification\n          beforeDataProviderFetch={beforeDataProviderFetch}\n          afterDataProviderFetch={afterDataProviderFetch}\n          afterDataProviderFetchError={afterDataProviderFetchError}\n        />\n      </div>\n    </>\n  );\n});\n\nconst ExampleComponent = () => {\n  const statusRef = useRef<HTMLOutputElement>(null);\n\n  const beforeDataProviderFetch = useCallback(\n    (params: DataProviderBeforeFetchParameters) => {\n      if (statusRef.current) {\n        statusRef.current.textContent = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n      }\n    },\n    []\n  );\n\n  const afterDataProviderFetch = useCallback(() => {\n    if (statusRef.current) {\n      statusRef.current.textContent = `Ready (simulated ${LATENCY_MS}ms request).`;\n    }\n  }, []);\n\n  const afterDataProviderFetchError = useCallback((error: Error) => {\n    if (statusRef.current) {\n      statusRef.current.textContent = `Could not load data: ${error.message}`;\n    }\n  }, []);\n\n  return (\n    <>\n      <InventoryServerTable\n        statusRef={statusRef}\n        beforeDataProviderFetch={beforeDataProviderFetch}\n        afterDataProviderFetch={afterDataProviderFetch}\n        afterDataProviderFetchError={afterDataProviderFetchError}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/server-side-data/react/example1.tsx","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__vue__example1.vue.json
index 9cbc59618..3476501f1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__server-side-data__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Server-side data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\nconst LATENCY_MS = 450;\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction delay(ms: number, signal: AbortSignal) {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction asLowerString(cell: unknown) {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition) {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row: DemoRow, colFilter: DataProviderFilterColumn) {\n  const value = row[colFilter.prop];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows: DemoRow[], filters: DataProviderQueryParameters['filters']) {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction createInventoryDemoServer() {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters: DataProviderQueryParameters, { signal }: DataProviderFetchOptions) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }: {\n      rowsAmount: number;\n      position: 'above' | 'below';\n      referenceRowId?: number | string;\n    }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows: RowUpdatePayload[]) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds: Array<number | string>) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\nconst server = createInventoryDemoServer();\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst status = ref('Initializing…');\n\n// hotSettings is a plain const (not reactive) to prevent updateSettings being triggered\n// when status changes — avoids re-fetching data on every status text update.\nconst hotSettings: GridSettings = {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: (queryParameters, options) => server.fetchRows(queryParameters, options),\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    { data: 'unitPrice', type: 'numeric', numericFormat: { pattern: '$0,0.00' } },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  rowHeaders: true,\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch(params: DataProviderBeforeFetchParameters) {\n    status.value = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n  },\n  afterDataProviderFetch() {\n    status.value = `Ready (simulated ${LATENCY_MS}ms request).`;\n  },\n  afterDataProviderFetchError(error: Error) {\n    status.value = `Could not load data: ${error.message}`;\n  },\n};\n\nfunction reloadData() {\n  server.clearFailNextFetch();\n  const p = hotRef.value?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n  if (p) {\n    void p.catch(() => {});\n  }\n}\n\nfunction simulateFailedFetch() {\n  server.setFailNextFetch();\n  const p = hotRef.value?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n  if (p) {\n    void p.catch(() => {});\n  }\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"reloadData\">Reload data</button>\n        <button type=\"button\" @click=\"simulateFailedFetch\">Simulate failed fetch</button>\n      </div>\n      <output id=\"example1-status\">{{ status }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/server-side-data/vue/example1.vue","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Server-side data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n  RowUpdatePayload,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype DemoRow = {\n  id: number;\n  product: string;\n  sku: string;\n  category: string;\n  unitPrice: number;\n  inStock: number;\n};\n\ntype FilterCondition = { name?: string; args?: unknown[] };\n\ntype DataProviderFilterColumn = NonNullable<DataProviderQueryParameters['filters']>[number];\n\nconst LATENCY_MS = 450;\nconst SEED_CATALOG: readonly DemoRow[] = [\n  {\n    id: 1,\n    product: 'Wireless ergonomic keyboard',\n    sku: 'PER-KBD-901',\n    category: 'Peripherals',\n    unitPrice: 79.99,\n    inStock: 210,\n  },\n  {\n    id: 2,\n    product: 'USB-C 7-port hub',\n    sku: 'PER-HUB-707',\n    category: 'Peripherals',\n    unitPrice: 45.5,\n    inStock: 88,\n  },\n  {\n    id: 3,\n    product: '27\" QHD monitor',\n    sku: 'DSP-MON-270',\n    category: 'Displays',\n    unitPrice: 329,\n    inStock: 42,\n  },\n  {\n    id: 4,\n    product: 'Laptop stand aluminum',\n    sku: 'ACC-STD-112',\n    category: 'Accessories',\n    unitPrice: 39.99,\n    inStock: 156,\n  },\n  {\n    id: 5,\n    product: 'Noise-cancelling headset',\n    sku: 'AUD-HDS-440',\n    category: 'Audio',\n    unitPrice: 199,\n    inStock: 67,\n  },\n  {\n    id: 6,\n    product: 'Mechanical keyboard MX Brown',\n    sku: 'PER-KBD-303',\n    category: 'Peripherals',\n    unitPrice: 129,\n    inStock: 94,\n  },\n  {\n    id: 7,\n    product: 'Webcam 1080p autofocus',\n    sku: 'VID-CAM-108',\n    category: 'Video',\n    unitPrice: 89,\n    inStock: 203,\n  },\n  {\n    id: 8,\n    product: 'Docking station Thunderbolt 4',\n    sku: 'PER-DCK-401',\n    category: 'Peripherals',\n    unitPrice: 279,\n    inStock: 31,\n  },\n  {\n    id: 9,\n    product: 'Portable SSD 1TB',\n    sku: 'STO-SSD-1T',\n    category: 'Storage',\n    unitPrice: 119.99,\n    inStock: 178,\n  },\n  {\n    id: 10,\n    product: 'Office chair mesh back',\n    sku: 'FUR-CHR-882',\n    category: 'Furniture',\n    unitPrice: 349,\n    inStock: 22,\n  },\n  {\n    id: 11,\n    product: 'LED desk lamp dimmable',\n    sku: 'LGT-LMP-210',\n    category: 'Lighting',\n    unitPrice: 54.25,\n    inStock: 115,\n  },\n  {\n    id: 12,\n    product: 'Bluetooth mouse silent',\n    sku: 'PER-MSE-055',\n    category: 'Peripherals',\n    unitPrice: 32.99,\n    inStock: 340,\n  },\n  {\n    id: 13,\n    product: 'HDMI 2.1 cable 2m',\n    sku: 'CBL-HDM-200',\n    category: 'Cables',\n    unitPrice: 18.99,\n    inStock: 512,\n  },\n  {\n    id: 14,\n    product: 'USB-C PD charger 65W',\n    sku: 'PWR-PD65-W',\n    category: 'Power',\n    unitPrice: 49,\n    inStock: 189,\n  },\n  {\n    id: 15,\n    product: 'Mesh Wi-Fi router',\n    sku: 'NET-RT-M1',\n    category: 'Networking',\n    unitPrice: 159,\n    inStock: 58,\n  },\n  {\n    id: 16,\n    product: 'External HDD 4TB',\n    sku: 'STO-HDD-4T',\n    category: 'Storage',\n    unitPrice: 99.5,\n    inStock: 76,\n  },\n  {\n    id: 17,\n    product: 'Graphics tablet medium',\n    sku: 'CRT-TAB-M2',\n    category: 'Creative',\n    unitPrice: 249,\n    inStock: 41,\n  },\n  {\n    id: 18,\n    product: 'Microphone USB condenser',\n    sku: 'AUD-MIC-U1',\n    category: 'Audio',\n    unitPrice: 74.99,\n    inStock: 99,\n  },\n  {\n    id: 19,\n    product: 'Privacy screen 14\"',\n    sku: 'ACC-PRV-140',\n    category: 'Accessories',\n    unitPrice: 42,\n    inStock: 133,\n  },\n  {\n    id: 20,\n    product: 'Surge protector 8-outlet',\n    sku: 'PWR-SRG-808',\n    category: 'Power',\n    unitPrice: 28.75,\n    inStock: 267,\n  },\n  {\n    id: 21,\n    product: 'FHD portable monitor 15.6\"',\n    sku: 'DSP-MON-156',\n    category: 'Displays',\n    unitPrice: 189,\n    inStock: 48,\n  },\n  {\n    id: 22,\n    product: 'Ethernet cable Cat6 5m',\n    sku: 'CBL-ETH-500',\n    category: 'Cables',\n    unitPrice: 12.5,\n    inStock: 620,\n  },\n  {\n    id: 23,\n    product: 'Laptop sleeve 15\"',\n    sku: 'ACC-SLV-150',\n    category: 'Accessories',\n    unitPrice: 35,\n    inStock: 201,\n  },\n  {\n    id: 24,\n    product: 'Smart power strip',\n    sku: 'PWR-STR-S1',\n    category: 'Power',\n    unitPrice: 59.99,\n    inStock: 71,\n  },\n  {\n    id: 25,\n    product: 'Ring light 12\" with stand',\n    sku: 'LGT-RNG-120',\n    category: 'Lighting',\n    unitPrice: 65,\n    inStock: 84,\n  },\n  {\n    id: 26,\n    product: 'NVMe enclosure USB4',\n    sku: 'STO-ENC-NV',\n    category: 'Storage',\n    unitPrice: 79,\n    inStock: 55,\n  },\n  {\n    id: 27,\n    product: 'Vertical mouse',\n    sku: 'PER-MSE-VER',\n    category: 'Peripherals',\n    unitPrice: 56.5,\n    inStock: 112,\n  },\n  {\n    id: 28,\n    product: 'Conference speakerphone',\n    sku: 'AUD-SPK-CF',\n    category: 'Audio',\n    unitPrice: 189.99,\n    inStock: 36,\n  },\n];\n\nfunction delay(ms: number, signal: AbortSignal) {\n  return new Promise((resolve, reject) => {\n    if (signal.aborted) {\n      reject(new DOMException('Aborted', 'AbortError'));\n\n      return;\n    }\n\n    const timeoutId = setTimeout(resolve, ms);\n\n    signal.addEventListener(\n      'abort',\n      () => {\n        clearTimeout(timeoutId);\n        reject(new DOMException('Aborted', 'AbortError'));\n      },\n      { once: true }\n    );\n  });\n}\n\nfunction asLowerString(cell: unknown) {\n  if (cell === null || cell === undefined) {\n    return '';\n  }\n\n  return String(cell).toLowerCase();\n}\n\nfunction matchesCondition(cell: unknown, cond: FilterCondition) {\n  const args = Array.isArray(cond.args) ? cond.args : [];\n  const name = cond.name;\n\n  if (!name || name === 'none') {\n    return true;\n  }\n\n  switch (name) {\n    case 'eq':\n      return asLowerString(cell) === asLowerString(args[0]);\n    case 'neq':\n      return asLowerString(cell) !== asLowerString(args[0]);\n    case 'contains':\n      return asLowerString(cell).includes(asLowerString(args[0]));\n    case 'not_contains':\n      return !asLowerString(cell).includes(asLowerString(args[0]));\n    case 'begins_with':\n      return asLowerString(cell).startsWith(asLowerString(args[0]));\n    case 'ends_with':\n      return asLowerString(cell).endsWith(asLowerString(args[0]));\n    case 'gt':\n      return Number(cell) > Number(args[0]);\n    case 'gte':\n      return Number(cell) >= Number(args[0]);\n    case 'lt':\n      return Number(cell) < Number(args[0]);\n    case 'lte':\n      return Number(cell) <= Number(args[0]);\n    case 'between':\n      return Number(cell) >= Number(args[0]) && Number(cell) <= Number(args[1]);\n    case 'not_between':\n      return Number(cell) < Number(args[0]) || Number(cell) > Number(args[1]);\n    case 'empty':\n      return cell === null || cell === undefined || String(cell) === '';\n    case 'not_empty':\n      return cell !== null && cell !== undefined && String(cell) !== '';\n    default:\n      return true;\n  }\n}\n\nfunction rowMatchesFilterColumn(row: DemoRow, colFilter: DataProviderFilterColumn) {\n  const value = row[colFilter.prop];\n  const conditions = colFilter.conditions ?? [];\n  const op = colFilter.operation ?? 'conjunction';\n\n  if (conditions.length === 0) {\n    return true;\n  }\n\n  const parts = conditions.map((c) => () => matchesCondition(value, c));\n\n  if (op === 'disjunction') {\n    return parts.some((fn) => fn());\n  }\n\n  if (op === 'disjunctionWithExtraCondition' && parts.length >= 3) {\n    return parts.slice(0, -1).some((fn) => fn()) && parts[parts.length - 1]();\n  }\n\n  return parts.every((fn) => fn());\n}\n\nfunction applyQueryFilters(rows: DemoRow[], filters: DataProviderQueryParameters['filters']) {\n  if (!filters || filters.length === 0) {\n    return rows;\n  }\n\n  return rows.filter((row) => filters.every((f) => rowMatchesFilterColumn(row, f)));\n}\n\nfunction createInventoryDemoServer() {\n  const store = {\n    nextId: SEED_CATALOG.reduce((max, r) => Math.max(max, r.id), 0),\n    rows: SEED_CATALOG.map((r) => ({ ...r })),\n  };\n\n  let failNextFetch = false;\n\n  return {\n    clearFailNextFetch() {\n      failNextFetch = false;\n    },\n    setFailNextFetch() {\n      failNextFetch = true;\n    },\n    fetchRows(queryParameters: DataProviderQueryParameters, { signal }: DataProviderFetchOptions) {\n      const { page, pageSize, sort, filters } = queryParameters;\n      let rows = [...store.rows];\n\n      if (sort) {\n        rows.sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          let cmp = 0;\n\n          if (av < bv) {\n            cmp = -1;\n          } else if (av > bv) {\n            cmp = 1;\n          }\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      rows = applyQueryFilters(rows, filters);\n\n      const start = (page - 1) * pageSize;\n      const pageRows = rows.slice(start, start + pageSize);\n\n      return delay(LATENCY_MS, signal).then(() => {\n        if (signal.aborted) {\n          return Promise.reject(new DOMException('Aborted', 'AbortError'));\n        }\n\n        if (failNextFetch) {\n          failNextFetch = false;\n\n          return Promise.reject(new Error('Simulated server error (for example HTTP 503).'));\n        }\n\n        return {\n          rows: pageRows,\n          totalRows: rows.length,\n        };\n      });\n    },\n    async onRowsCreate({ rowsAmount, position, referenceRowId }: {\n      rowsAmount: number;\n      position: 'above' | 'below';\n      referenceRowId?: number | string;\n    }) {\n      const newRows: DemoRow[] = [];\n\n      for (let i = 0; i < rowsAmount; i += 1) {\n        store.nextId += 1;\n        newRows.push({\n          id: store.nextId,\n          product: 'New product',\n          sku: `NEW-${store.nextId}`,\n          category: 'Uncategorized',\n          unitPrice: 0,\n          inStock: 0,\n        });\n      }\n\n      let insertAt = store.rows.length;\n\n      if (referenceRowId !== undefined && referenceRowId !== null) {\n        const refIdx = store.rows.findIndex((r) => r.id === referenceRowId);\n\n        if (refIdx >= 0) {\n          insertAt = position === 'above' ? refIdx : refIdx + 1;\n        }\n      }\n\n      store.rows.splice(insertAt, 0, ...newRows);\n    },\n    async onRowsUpdate(rows: RowUpdatePayload[]) {\n      rows.forEach(({ id, changes }) => {\n        const row = store.rows.find((r) => r.id === id);\n\n        if (row) {\n          Object.assign(row, changes);\n        }\n      });\n    },\n    async onRowsRemove(rowIds: Array<number | string>) {\n      const idSet = new Set(rowIds);\n\n      store.rows = store.rows.filter((r) => !idSet.has(r.id));\n    },\n  };\n}\n\nconst server = createInventoryDemoServer();\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst status = ref('Initializing…');\n\n// hotSettings is a plain const (not reactive) to prevent updateSettings being triggered\n// when status changes — avoids re-fetching data on every status text update.\nconst hotSettings: GridSettings = {\n  dataProvider: {\n    rowId: 'id',\n    fetchRows: (queryParameters, options) => server.fetchRows(queryParameters, options),\n    onRowsCreate: server.onRowsCreate,\n    onRowsUpdate: server.onRowsUpdate,\n    onRowsRemove: server.onRowsRemove,\n  },\n  columns: [\n    { data: 'product' },\n    { data: 'sku', readOnly: true },\n    { data: 'category' },\n    { data: 'unitPrice', type: 'numeric', numericFormat: { pattern: '$0,0.00' } },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'SKU', 'Category', 'Unit price', 'In stock'],\n  rowHeaders: true,\n  width: '100%',\n  height: '300px',\n  licenseKey: 'non-commercial-and-evaluation',\n  columnSorting: true,\n  pagination: true,\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  emptyDataState: true,\n  notification: true,\n  beforeDataProviderFetch(params: DataProviderBeforeFetchParameters) {\n    status.value = params.skipLoading ? 'Updating after sort or edit…' : 'Loading data…';\n  },\n  afterDataProviderFetch() {\n    status.value = `Ready (simulated ${LATENCY_MS}ms request).`;\n  },\n  afterDataProviderFetchError(error: Error) {\n    status.value = `Could not load data: ${error.message}`;\n  },\n};\n\nfunction reloadData() {\n  server.clearFailNextFetch();\n  const p = hotRef.value?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n  if (p) {\n    void p.catch(() => {});\n  }\n}\n\nfunction simulateFailedFetch() {\n  server.setFailNextFetch();\n  const p = hotRef.value?.hotInstance?.getPlugin('dataProvider')?.fetchData();\n\n  if (p) {\n    void p.catch(() => {});\n  }\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" @click=\"reloadData\">Reload data</button>\n        <button type=\"button\" @click=\"simulateFailedFetch\">Simulate failed fetch</button>\n      </div>\n      <output id=\"example1-status\">{{ status }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/server-side-data/vue/example1.vue","breadcrumb":["Getting Started","Server-side data"],"guide":"guides/getting-started/server-side-data/server-side-data.md","guideTitle":"Server-side data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/server-side-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example1.vue.json
index 5517373e2..cca020045 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1'],\n    ['A2', 'B2'],\n    ['A3', 'B3'],\n    ['A4', 'B4'],\n    ['A5', 'B5'],\n    ['A6', 'B6'],\n    ['A7', 'B7'],\n    ['A8', 'B8'],\n    ['A9', 'B9'],\n    ['A10', 'B10'],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst secondColumnSettings = ref<GridSettings>({\n  title: 'Second column header',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\">\n      <HotColumn title=\"First column header\" />\n      <HotColumn :settings=\"secondColumnSettings\" read-only=\"true\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example1.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-hot-column","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['A1', 'B1'],\n    ['A2', 'B2'],\n    ['A3', 'B3'],\n    ['A4', 'B4'],\n    ['A5', 'B5'],\n    ['A6', 'B6'],\n    ['A7', 'B7'],\n    ['A8', 'B8'],\n    ['A9', 'B9'],\n    ['A10', 'B10'],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst secondColumnSettings = ref<GridSettings>({\n  title: 'Second column header',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\">\n      <HotColumn title=\"First column header\" />\n      <HotColumn :settings=\"secondColumnSettings\" read-only=\"true\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example1.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-hot-column","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example2.vue.json
index 88d1b5a66..3406688f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ProductRow = {\n  id: number;\n  name: string;\n  payment: { price: number; currency: string };\n};\n\nconst hotData = ref<ProductRow[]>([\n  { id: 1, name: 'Table tennis racket', payment: { price: 13, currency: 'PLN' } },\n  { id: 2, name: 'Outdoor game ball', payment: { price: 14, currency: 'USD' } },\n  { id: 3, name: 'Mountain bike', payment: { price: 300, currency: 'USD' } }\n]);\nconst secondColumnSettings = ref<GridSettings>({\n  title: 'Second column header'\n});\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation'\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"ID\" data=\"id\" />\n      <HotColumn :settings=\"secondColumnSettings\" read-only=\"true\" data=\"name\" />\n      <HotColumn title=\"Price\" data=\"payment.price\" />\n      <HotColumn title=\"Currency\" data=\"payment.currency\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example2.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/vue-hot-column","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype ProductRow = {\n  id: number;\n  name: string;\n  payment: { price: number; currency: string };\n};\n\nconst hotData = ref<ProductRow[]>([\n  { id: 1, name: 'Table tennis racket', payment: { price: 13, currency: 'PLN' } },\n  { id: 2, name: 'Outdoor game ball', payment: { price: 14, currency: 'USD' } },\n  { id: 3, name: 'Mountain bike', payment: { price: 300, currency: 'USD' } }\n]);\nconst secondColumnSettings = ref<GridSettings>({\n  title: 'Second column header'\n});\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation'\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"ID\" data=\"id\" />\n      <HotColumn :settings=\"secondColumnSettings\" read-only=\"true\" data=\"name\" />\n      <HotColumn title=\"Price\" data=\"payment.price\" />\n      <HotColumn title=\"Currency\" data=\"payment.currency\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example2.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/vue-hot-column","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example3.vue.json
index ef0c71bda..fd86963b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Declare a custom editor as a component · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', true);\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst customEditor = CustomEditor;\nconst hotData = ref<string[][]>([\n  ['SKU-4821', 'Stainless Steel Water Bottle'],\n  ['SKU-0093', 'Wireless Mouse'],\n  ['SKU-1170', 'Ergonomic Office Chair'],\n  ['SKU-2208', 'USB-C Charging Cable'],\n  ['SKU-3341', 'Aluminum Water Filter'],\n]);\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"Column A\" :editor=\"customEditor\" />\n      <HotColumn title=\"Column B\" :read-only=\"true\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example3.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example3","exampleTitle":"Declare a custom editor as a component","docPermalink":"/vue-hot-column","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Declare a custom editor as a component · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n  createElements() {\n    super.createElements();\n\n    this.TEXTAREA = document.createElement('input');\n    this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n    this.TEXTAREA.setAttribute('data-hot-input', true);\n    this.textareaStyle = this.TEXTAREA.style;\n    this.TEXTAREA_PARENT.innerText = '';\n    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n  }\n}\n\nconst customEditor = CustomEditor;\nconst hotData = ref<string[][]>([\n  ['SKU-4821', 'Stainless Steel Water Bottle'],\n  ['SKU-0093', 'Wireless Mouse'],\n  ['SKU-1170', 'Ergonomic Office Chair'],\n  ['SKU-2208', 'USB-C Charging Cable'],\n  ['SKU-3341', 'Aluminum Water Filter'],\n]);\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"Column A\" :editor=\"customEditor\" />\n      <HotColumn title=\"Column B\" :read-only=\"true\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example3.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example3","exampleTitle":"Declare a custom editor as a component","docPermalink":"/vue-hot-column","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example4.vue.json
index 8a4e002a5..e78bae7f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Declare a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\nconst scoreRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const score = Number(value);\n\n  td.innerHTML = String(value ?? '');\n  td.style.color = score >= 80 ? '#2d7d46' : score < 50 ? '#c0392b' : '';\n  td.style.fontWeight = score >= 80 ? 'bold' : '';\n\n  return td;\n};\n\nconst hotData = ref([\n  ['Ana García', 92],\n  ['James Okafor', 45],\n  ['Li Wei', 73],\n  ['Sara Müller', 88],\n  ['Tom Nakamura', 31],\n]);\n\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"Employee\" :read-only=\"true\" />\n      <HotColumn title=\"Score\" type=\"numeric\" :renderer=\"scoreRenderer\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example4.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example4","exampleTitle":"Declare a custom renderer","docPermalink":"/vue-hot-column","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Declare a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\nconst scoreRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n  const score = Number(value);\n\n  td.innerHTML = String(value ?? '');\n  td.style.color = score >= 80 ? '#2d7d46' : score < 50 ? '#c0392b' : '';\n  td.style.fontWeight = score >= 80 ? 'bold' : '';\n\n  return td;\n};\n\nconst hotData = ref([\n  ['Ana García', 92],\n  ['James Okafor', 45],\n  ['Li Wei', 73],\n  ['Sara Müller', 88],\n  ['Tom Nakamura', 31],\n]);\n\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :data=\"hotData\" :settings=\"settings\">\n      <HotColumn title=\"Employee\" :read-only=\"true\" />\n      <HotColumn title=\"Score\" type=\"numeric\" :renderer=\"scoreRenderer\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example4.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example4","exampleTitle":"Declare a custom renderer","docPermalink":"/vue-hot-column","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example5.vue.json
index 364fb2874..9a5484c41 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-column__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Render columns dynamically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  name: string;\n  assignee: string;\n  due: string;\n  status: string;\n};\n\nconst tasks = ref<TaskRow[]>([\n  { name: 'Update API docs', assignee: 'Ana García', due: '2025-06-30', status: 'In progress' },\n  { name: 'Deploy hotfix', assignee: 'James Okafor', due: '2025-06-18', status: 'Blocked' },\n  { name: 'Review pull request', assignee: 'Li Wei', due: '2025-06-21', status: 'In progress' },\n]);\n\nconst allColumns = [\n  { data: 'name', title: 'Task' },\n  { data: 'assignee', title: 'Assignee' },\n  { data: 'due', title: 'Due date' },\n  { data: 'status', title: 'Status' },\n];\n\nconst columns = ref([...allColumns.slice(0, 2)]);\n\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst addColumn = () => {\n  const next = allColumns[columns.value.length];\n\n  if (next) {\n    columns.value.push(next);\n  }\n};\n\nconst removeColumn = () => {\n  if (columns.value.length > 1) {\n    columns.value.pop();\n  }\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\"\n                :disabled=\"columns.length >= allColumns.length\" @click=\"addColumn\">\n          Add column\n        </button>\n        <button type=\"button\" class=\"button button--primary\"\n                :disabled=\"columns.length <= 1\" @click=\"removeColumn\">\n          Remove column\n        </button>\n      </div>\n    </div>\n    <HotTable :data=\"tasks\" :settings=\"settings\">\n      <HotColumn v-for=\"column in columns\" :key=\"column.data\" :data=\"column.data\" :title=\"column.title\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example5.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example5","exampleTitle":"Render columns dynamically","docPermalink":"/vue-hot-column","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Render columns dynamically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  name: string;\n  assignee: string;\n  due: string;\n  status: string;\n};\n\nconst tasks = ref<TaskRow[]>([\n  { name: 'Update API docs', assignee: 'Ana García', due: '2025-06-30', status: 'In progress' },\n  { name: 'Deploy hotfix', assignee: 'James Okafor', due: '2025-06-18', status: 'Blocked' },\n  { name: 'Review pull request', assignee: 'Li Wei', due: '2025-06-21', status: 'In progress' },\n]);\n\nconst allColumns = [\n  { data: 'name', title: 'Task' },\n  { data: 'assignee', title: 'Assignee' },\n  { data: 'due', title: 'Due date' },\n  { data: 'status', title: 'Status' },\n];\n\nconst columns = ref([...allColumns.slice(0, 2)]);\n\nconst settings = ref<GridSettings>({\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst addColumn = () => {\n  const next = allColumns[columns.value.length];\n\n  if (next) {\n    columns.value.push(next);\n  }\n};\n\nconst removeColumn = () => {\n  if (columns.value.length > 1) {\n    columns.value.pop();\n  }\n};\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" class=\"button button--primary\"\n                :disabled=\"columns.length >= allColumns.length\" @click=\"addColumn\">\n          Add column\n        </button>\n        <button type=\"button\" class=\"button button--primary\"\n                :disabled=\"columns.length <= 1\" @click=\"removeColumn\">\n          Remove column\n        </button>\n      </div>\n    </div>\n    <HotTable :data=\"tasks\" :settings=\"settings\">\n      <HotColumn v-for=\"column in columns\" :key=\"column.data\" :data=\"column.data\" :title=\"column.title\" />\n    </HotTable>\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example5.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example5","exampleTitle":"Render columns dynamically","docPermalink":"/vue-hot-column","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-reference__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-reference__vue__example1.vue.json
index 5bd4902c3..fd69ee569 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-reference__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-hot-reference__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Instance reference · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst selectCell = () => {\n  // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"selectCell\">Select cell B2</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-reference/vue/example1.vue","breadcrumb":["Getting Started","Instance reference"],"guide":"guides/getting-started/vue3-hot-reference/vue3-hot-reference.md","guideTitle":"Instance reference","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-instance-reference","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Instance reference · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotTableRef = useTemplateRef<InstanceType<typeof HotTable>>('hotTableRef');\n\nconst hotSettings = {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst selectCell = () => {\n  // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.\n  hotTableRef.value?.hotInstance?.selectCell(1, 1);\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"selectCell\">Select cell B2</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotTableRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/vue3-hot-reference/vue/example1.vue","breadcrumb":["Getting Started","Instance reference"],"guide":"guides/getting-started/vue3-hot-reference/vue3-hot-reference.md","guideTitle":"Instance reference","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-instance-reference","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-pinia__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-pinia__vue__example1.vue.json
index a87a0d1db..fb427b62d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-pinia__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-pinia__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Pinia state management · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"pinia\": \"4.0.3\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, watch, onMounted, useTemplateRef } from 'vue';\nimport { defineStore, createPinia, setActivePinia } from 'pinia';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// Activate Pinia without a Vue app instance (required in the docs example runner).\nsetActivePinia(createPinia());\n\ntype Employee = {\n  name: string;\n  department: string;\n  title: string;\n  salary: number;\n  startDate: string;\n};\n\nconst useEmployeeStore = defineStore('employees', {\n  state: () => ({\n    readOnly: false,\n    employees: [\n      { name: 'Ana García',    department: 'Engineering',  title: 'Senior Engineer',   salary: 95000, startDate: '2021-03-14' },\n      { name: 'James Okafor', department: 'Marketing',    title: 'Product Manager',   salary: 87000, startDate: '2019-07-22' },\n      { name: 'Li Wei',       department: 'Engineering',  title: 'Frontend Engineer', salary: 82000, startDate: '2022-01-10' },\n      { name: 'Sara Novak',   department: 'Design',       title: 'UX Designer',       salary: 78000, startDate: '2020-11-05' },\n      { name: 'Tom Eriksson', department: 'Sales',        title: 'Account Executive', salary: 74000, startDate: '2023-04-18' },\n    ] as Employee[],\n  }),\n  actions: {\n    toggleReadOnly() {\n      this.readOnly = !this.readOnly;\n    },\n    updateEmployee(row: number, col: number, value: string | number) {\n      const keys = Object.keys(this.employees[0]) as (keyof Employee)[];\n      const key = keys[col];\n\n      if (key && this.employees[row]) {\n        (this.employees[row] as Record<string, string | number>)[key] = value;\n      }\n    },\n    resetData() {\n      this.employees = [\n        { name: 'Ana García',    department: 'Engineering',  title: 'Senior Engineer',   salary: 95000, startDate: '2021-03-14' },\n        { name: 'James Okafor', department: 'Marketing',    title: 'Product Manager',   salary: 87000, startDate: '2019-07-22' },\n        { name: 'Li Wei',       department: 'Engineering',  title: 'Frontend Engineer', salary: 82000, startDate: '2022-01-10' },\n        { name: 'Sara Novak',   department: 'Design',       title: 'UX Designer',       salary: 78000, startDate: '2020-11-05' },\n        { name: 'Tom Eriksson', department: 'Sales',        title: 'Account Executive', salary: 74000, startDate: '2023-04-18' },\n      ];\n    },\n  },\n});\n\nconst store = useEmployeeStore();\nconst wrapper = useTemplateRef<InstanceType<typeof HotTable>>('wrapper');\n\nconst hotSettings = ref<GridSettings>({\n  data: store.employees.map(e => Object.values(e)),\n  colHeaders: ['Name', 'Department', 'Title', 'Salary', 'Start Date'],\n  rowHeaders: true,\n  height: 'auto',\n  readOnly: store.readOnly,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterChange(changes) {\n    if (!changes) return;\n\n    for (const [row, col, , newValue] of changes) {\n      store.updateEmployee(row as number, col as number, newValue as string | number);\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Store → grid: watch for store mutations and update the grid.\nwatch(\n  () => store.readOnly,\n  (val) => {\n    hotSettings.value = { ...hotSettings.value, readOnly: val };\n  }\n);\n\nwatch(\n  () => store.employees,\n  (val) => {\n    wrapper.value?.hotInstance?.loadData(val.map(e => Object.values(e)));\n  },\n  { deep: true }\n);\n\nfunction updateStorePreview() {\n  const pre = document.querySelector('#pinia-preview pre');\n\n  if (!pre) return;\n\n  pre.textContent = JSON.stringify({ readOnly: store.readOnly, employees: store.employees }, null, 2);\n}\n\nonMounted(() => {\n  store.$subscribe(() => updateStorePreview());\n  updateStorePreview();\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button v-on:click=\"store.toggleReadOnly()\">\n          Toggle <code>readOnly</code> (currently: {{ store.readOnly }})\n        </button>\n        <button v-on:click=\"store.resetData()\" style=\"margin-left: 0.5rem\">\n          Reset data\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"wrapper\" :settings=\"hotSettings\" />\n    <div id=\"pinia-preview\">\n      <strong>Pinia store dump:</strong>\n      <pre></pre>\n    </div>\n  </div>\n</template>\n\n<style>\n#pinia-preview {\n  margin-top: 0.75rem;\n}\n\n#pinia-preview strong {\n  display: block;\n  margin-bottom: 0.375rem;\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#pinia-preview pre {\n  height: 168px;\n  padding: 0.5rem 0.75rem;\n  overflow-y: auto;\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n  line-height: 1.6;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  color: var(--sl-color-gray-2, #555555);\n  margin: 0;\n  border-radius: 0;\n}\n</style>"},"docsPath":"guides/getting-started/vue3-pinia/vue/example1.vue","breadcrumb":["Getting Started","Pinia state management"],"guide":"guides/getting-started/vue3-pinia/vue3-pinia.md","guideTitle":"Pinia state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-pinia","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Pinia state management · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"pinia\": \"4.0.3\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, watch, onMounted, useTemplateRef } from 'vue';\nimport { defineStore, createPinia, setActivePinia } from 'pinia';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// Activate Pinia without a Vue app instance (required in the docs example runner).\nsetActivePinia(createPinia());\n\ntype Employee = {\n  name: string;\n  department: string;\n  title: string;\n  salary: number;\n  startDate: string;\n};\n\nconst useEmployeeStore = defineStore('employees', {\n  state: () => ({\n    readOnly: false,\n    employees: [\n      { name: 'Ana García',    department: 'Engineering',  title: 'Senior Engineer',   salary: 95000, startDate: '2021-03-14' },\n      { name: 'James Okafor', department: 'Marketing',    title: 'Product Manager',   salary: 87000, startDate: '2019-07-22' },\n      { name: 'Li Wei',       department: 'Engineering',  title: 'Frontend Engineer', salary: 82000, startDate: '2022-01-10' },\n      { name: 'Sara Novak',   department: 'Design',       title: 'UX Designer',       salary: 78000, startDate: '2020-11-05' },\n      { name: 'Tom Eriksson', department: 'Sales',        title: 'Account Executive', salary: 74000, startDate: '2023-04-18' },\n    ] as Employee[],\n  }),\n  actions: {\n    toggleReadOnly() {\n      this.readOnly = !this.readOnly;\n    },\n    updateEmployee(row: number, col: number, value: string | number) {\n      const keys = Object.keys(this.employees[0]) as (keyof Employee)[];\n      const key = keys[col];\n\n      if (key && this.employees[row]) {\n        (this.employees[row] as Record<string, string | number>)[key] = value;\n      }\n    },\n    resetData() {\n      this.employees = [\n        { name: 'Ana García',    department: 'Engineering',  title: 'Senior Engineer',   salary: 95000, startDate: '2021-03-14' },\n        { name: 'James Okafor', department: 'Marketing',    title: 'Product Manager',   salary: 87000, startDate: '2019-07-22' },\n        { name: 'Li Wei',       department: 'Engineering',  title: 'Frontend Engineer', salary: 82000, startDate: '2022-01-10' },\n        { name: 'Sara Novak',   department: 'Design',       title: 'UX Designer',       salary: 78000, startDate: '2020-11-05' },\n        { name: 'Tom Eriksson', department: 'Sales',        title: 'Account Executive', salary: 74000, startDate: '2023-04-18' },\n      ];\n    },\n  },\n});\n\nconst store = useEmployeeStore();\nconst wrapper = useTemplateRef<InstanceType<typeof HotTable>>('wrapper');\n\nconst hotSettings = ref<GridSettings>({\n  data: store.employees.map(e => Object.values(e)),\n  colHeaders: ['Name', 'Department', 'Title', 'Salary', 'Start Date'],\n  rowHeaders: true,\n  height: 'auto',\n  readOnly: store.readOnly,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterChange(changes) {\n    if (!changes) return;\n\n    for (const [row, col, , newValue] of changes) {\n      store.updateEmployee(row as number, col as number, newValue as string | number);\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Store → grid: watch for store mutations and update the grid.\nwatch(\n  () => store.readOnly,\n  (val) => {\n    hotSettings.value = { ...hotSettings.value, readOnly: val };\n  }\n);\n\nwatch(\n  () => store.employees,\n  (val) => {\n    wrapper.value?.hotInstance?.loadData(val.map(e => Object.values(e)));\n  },\n  { deep: true }\n);\n\nfunction updateStorePreview() {\n  const pre = document.querySelector('#pinia-preview pre');\n\n  if (!pre) return;\n\n  pre.textContent = JSON.stringify({ readOnly: store.readOnly, employees: store.employees }, null, 2);\n}\n\nonMounted(() => {\n  store.$subscribe(() => updateStorePreview());\n  updateStorePreview();\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button v-on:click=\"store.toggleReadOnly()\">\n          Toggle <code>readOnly</code> (currently: {{ store.readOnly }})\n        </button>\n        <button v-on:click=\"store.resetData()\" style=\"margin-left: 0.5rem\">\n          Reset data\n        </button>\n      </div>\n    </div>\n    <HotTable ref=\"wrapper\" :settings=\"hotSettings\" />\n    <div id=\"pinia-preview\">\n      <strong>Pinia store dump:</strong>\n      <pre></pre>\n    </div>\n  </div>\n</template>\n\n<style>\n#pinia-preview {\n  margin-top: 0.75rem;\n}\n\n#pinia-preview strong {\n  display: block;\n  margin-bottom: 0.375rem;\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#pinia-preview pre {\n  height: 168px;\n  padding: 0.5rem 0.75rem;\n  overflow-y: auto;\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n  line-height: 1.6;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  color: var(--sl-color-gray-2, #555555);\n  margin: 0;\n  border-radius: 0;\n}\n</style>"},"docsPath":"guides/getting-started/vue3-pinia/vue/example1.vue","breadcrumb":["Getting Started","Pinia state management"],"guide":"guides/getting-started/vue3-pinia/vue3-pinia.md","guideTitle":"Pinia state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-pinia","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-vuex__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-vuex__vue__example1.vue.json
index 6636af7eb..46ec77846 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-vuex__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__vue3-vuex__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Vuex state management · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"vuex\": \"4.1.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { createStore } from 'vuex';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype VuexState = {\n  hotData: string[][] | null;\n  hotSettings: {\n    readOnly: boolean;\n    autoWrapRow: boolean;\n    autoWrapCol: boolean;\n  };\n};\n\nconst store = createStore<VuexState>({\n  state() {\n    return {\n      hotData: null,\n      hotSettings: {\n        readOnly: false,\n        autoWrapRow: true,\n        autoWrapCol: true,\n      }\n    };\n  },\n  mutations: {\n    updateData(state, hotData: string[][]) {\n      state.hotData = hotData;\n    },\n    updateSettings(state, updateObj: { prop: keyof VuexState['hotSettings']; value: boolean }) {\n      state.hotSettings[updateObj.prop] = updateObj.value;\n    }\n  }\n});\n\nconst wrapper = useTemplateRef<InstanceType<typeof HotTable>>('wrapper');\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  readOnly: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterChange: () => {\n    if (wrapper.value?.hotInstance) {\n      store.commit('updateData', wrapper.value.hotInstance.getSourceData() as string[][]);\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation'\n});\n\nfunction toggleReadOnly(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value.readOnly = checked;\n  store.commit('updateSettings', { prop: 'readOnly', value: checked });\n}\n\nfunction updateVuexPreview() {\n  const previewTable = document.querySelector('#vuex-preview pre');\n\n  if (!previewTable) {\n    return;\n  }\n\n  let newInnerHtml = '<div>';\n\n  for (const [key, value] of Object.entries(store.state)) {\n    newInnerHtml += '<div><div class=\"table-container\">';\n\n    if (key === 'hotData' && Array.isArray(value)) {\n      newInnerHtml += '<strong>hotData:</strong> <br><table><tbody>';\n\n      for (const row of value) {\n        newInnerHtml += '<tr>';\n\n        for (const cell of row) {\n          newInnerHtml += `<td>${cell}</td>`;\n        }\n\n        newInnerHtml += '</tr>';\n      }\n      newInnerHtml += '</tbody></table>';\n\n    } else if (key === 'hotSettings') {\n      newInnerHtml += '<strong>hotSettings:</strong> <ul>';\n\n      for (const settingsKey of Object.keys(value as VuexState['hotSettings'])) {\n        newInnerHtml += `<li>${settingsKey}: ${store.state.hotSettings[settingsKey as keyof VuexState['hotSettings']]}</li>`;\n      }\n\n      newInnerHtml += '</ul>';\n    }\n\n    newInnerHtml += '</div></div>';\n  }\n  newInnerHtml += '</div>';\n\n  previewTable.innerHTML = newInnerHtml;\n}\n\nonMounted(() => {\n  store.subscribe(() => updateVuexPreview());\n  store.commit('updateData', wrapper.value?.hotInstance?.getSourceData() as string[][]);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label><input v-on:click=\"toggleReadOnly\" checked id=\"readOnlyCheck\" type=\"checkbox\" /> Toggle <code>readOnly</code> for the entire table</label>\n      </div>\n    </div>\n    <HotTable ref=\"wrapper\" :settings=\"hotSettings\" />\n    <div id=\"vuex-preview\">\n      <strong>Vuex store dump:</strong>\n      <pre></pre>\n    </div>\n  </div>\n</template>\n\n<style>\n#vuex-preview {\n  margin-top: 0.75rem;\n}\n\n#vuex-preview strong {\n  display: block;\n  margin-bottom: 0.375rem;\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#vuex-preview pre {\n  height: 168px;\n  padding: 0.5rem 0.75rem;\n  overflow-y: auto;\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n  line-height: 1.6;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  color: var(--sl-color-gray-2, #555555);\n  margin: 0;\n  border-radius: 0;\n}\n\n#vuex-preview pre .table-container {\n  margin-bottom: 0.375rem;\n}\n\n#vuex-preview pre table {\n  border-collapse: collapse;\n  margin: 0.25rem 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#vuex-preview pre td {\n  padding: 0.125rem 0.5rem 0.125rem 0;\n  color: var(--sl-color-gray-2, #555555);\n  border: none;\n}\n\n#vuex-preview pre ul {\n  margin: 0.125rem 0 0;\n  padding-left: 1.25rem;\n  list-style: disc;\n}\n\n#vuex-preview pre li {\n  padding: 0.0625rem 0;\n  color: var(--sl-color-gray-2, #555555);\n}\n</style>"},"docsPath":"guides/getting-started/vue3-vuex/vue/example1.vue","breadcrumb":["Getting Started","Vuex state management"],"guide":"guides/getting-started/vue3-vuex/vue3-vuex.md","guideTitle":"Vuex state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-vuex","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Vuex state management · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"vuex\": \"4.1.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { createStore } from 'vuex';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype VuexState = {\n  hotData: string[][] | null;\n  hotSettings: {\n    readOnly: boolean;\n    autoWrapRow: boolean;\n    autoWrapCol: boolean;\n  };\n};\n\nconst store = createStore<VuexState>({\n  state() {\n    return {\n      hotData: null,\n      hotSettings: {\n        readOnly: false,\n        autoWrapRow: true,\n        autoWrapCol: true,\n      }\n    };\n  },\n  mutations: {\n    updateData(state, hotData: string[][]) {\n      state.hotData = hotData;\n    },\n    updateSettings(state, updateObj: { prop: keyof VuexState['hotSettings']; value: boolean }) {\n      state.hotSettings[updateObj.prop] = updateObj.value;\n    }\n  }\n});\n\nconst wrapper = useTemplateRef<InstanceType<typeof HotTable>>('wrapper');\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  readOnly: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterChange: () => {\n    if (wrapper.value?.hotInstance) {\n      store.commit('updateData', wrapper.value.hotInstance.getSourceData() as string[][]);\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation'\n});\n\nfunction toggleReadOnly(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n\n  hotSettings.value.readOnly = checked;\n  store.commit('updateSettings', { prop: 'readOnly', value: checked });\n}\n\nfunction updateVuexPreview() {\n  const previewTable = document.querySelector('#vuex-preview pre');\n\n  if (!previewTable) {\n    return;\n  }\n\n  let newInnerHtml = '<div>';\n\n  for (const [key, value] of Object.entries(store.state)) {\n    newInnerHtml += '<div><div class=\"table-container\">';\n\n    if (key === 'hotData' && Array.isArray(value)) {\n      newInnerHtml += '<strong>hotData:</strong> <br><table><tbody>';\n\n      for (const row of value) {\n        newInnerHtml += '<tr>';\n\n        for (const cell of row) {\n          newInnerHtml += `<td>${cell}</td>`;\n        }\n\n        newInnerHtml += '</tr>';\n      }\n      newInnerHtml += '</tbody></table>';\n\n    } else if (key === 'hotSettings') {\n      newInnerHtml += '<strong>hotSettings:</strong> <ul>';\n\n      for (const settingsKey of Object.keys(value as VuexState['hotSettings'])) {\n        newInnerHtml += `<li>${settingsKey}: ${store.state.hotSettings[settingsKey as keyof VuexState['hotSettings']]}</li>`;\n      }\n\n      newInnerHtml += '</ul>';\n    }\n\n    newInnerHtml += '</div></div>';\n  }\n  newInnerHtml += '</div>';\n\n  previewTable.innerHTML = newInnerHtml;\n}\n\nonMounted(() => {\n  store.subscribe(() => updateVuexPreview());\n  store.commit('updateData', wrapper.value?.hotInstance?.getSourceData() as string[][]);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label><input v-on:click=\"toggleReadOnly\" checked id=\"readOnlyCheck\" type=\"checkbox\" /> Toggle <code>readOnly</code> for the entire table</label>\n      </div>\n    </div>\n    <HotTable ref=\"wrapper\" :settings=\"hotSettings\" />\n    <div id=\"vuex-preview\">\n      <strong>Vuex store dump:</strong>\n      <pre></pre>\n    </div>\n  </div>\n</template>\n\n<style>\n#vuex-preview {\n  margin-top: 0.75rem;\n}\n\n#vuex-preview strong {\n  display: block;\n  margin-bottom: 0.375rem;\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#vuex-preview pre {\n  height: 168px;\n  padding: 0.5rem 0.75rem;\n  overflow-y: auto;\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n  line-height: 1.6;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  color: var(--sl-color-gray-2, #555555);\n  margin: 0;\n  border-radius: 0;\n}\n\n#vuex-preview pre .table-container {\n  margin-bottom: 0.375rem;\n}\n\n#vuex-preview pre table {\n  border-collapse: collapse;\n  margin: 0.25rem 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n#vuex-preview pre td {\n  padding: 0.125rem 0.5rem 0.125rem 0;\n  color: var(--sl-color-gray-2, #555555);\n  border: none;\n}\n\n#vuex-preview pre ul {\n  margin: 0.125rem 0 0;\n  padding-left: 1.25rem;\n  list-style: disc;\n}\n\n#vuex-preview pre li {\n  padding: 0.0625rem 0;\n  color: var(--sl-color-gray-2, #555555);\n}\n</style>"},"docsPath":"guides/getting-started/vue3-vuex/vue/example1.vue","breadcrumb":["Getting Started","Vuex state management"],"guide":"guides/getting-started/vue3-vuex/vue3-vuex.md","guideTitle":"Vuex state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-vuex","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__angular__example1.ts.json
index 085b39aee..6c2008826 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Language · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-language></example1-language>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { deDE, registerLanguageDictionary } from 'handsontable/i18n';\n\nregisterLanguageDictionary(deDE);\n\n@Component({\n  selector: 'example1-language',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    contextMenu: true,\n    height: 'auto',\n    language: 'de-DE',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/language/angular/example1.ts","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Language · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-language></example1-language>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { deDE, registerLanguageDictionary } from 'handsontable/i18n';\n\nregisterLanguageDictionary(deDE);\n\n@Component({\n  selector: 'example1-language',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    contextMenu: true,\n    height: 'auto',\n    language: 'de-DE',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/language/angular/example1.ts","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.js.json
index a5c0303c4..1d4e29384 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Language · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nnew Handsontable(container, {\n  data,\n  contextMenu: true,\n  height: 'auto',\n  language: 'de-DE',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/language/javascript/example1.js","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Language · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nnew Handsontable(container, {\n  data,\n  contextMenu: true,\n  height: 'auto',\n  language: 'de-DE',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/language/javascript/example1.js","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.ts.json
index ba1900067..3dc92e45f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Language · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nregisterLanguageDictionary(deDE);\n\nconst container: Element = document.querySelector('#example1')!;\nconst data: [string, string, string, string, string, number][] = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nnew Handsontable(container, {\n  data,\n  contextMenu: true,\n  height: 'auto',\n  language: 'de-DE',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/language/javascript/example1.ts","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Language · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nregisterLanguageDictionary(deDE);\n\nconst container: Element = document.querySelector('#example1')!;\nconst data: [string, string, string, string, string, number][] = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nnew Handsontable(container, {\n  data,\n  contextMenu: true,\n  height: 'auto',\n  language: 'de-DE',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/language/javascript/example1.ts","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__react__example1.tsx.json
index b0c945311..81cb9f4dd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Language · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// register Handsontable's modules\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst data = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      contextMenu={true}\n      height=\"auto\"\n      language=\"de-DE\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/language/react/example1.tsx","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Language · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\n\n// register Handsontable's modules\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst data = [\n  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      contextMenu={true}\n      height=\"auto\"\n      language=\"de-DE\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/language/react/example1.tsx","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__vue__example1.vue.json
index 7d76c3be5..e6283d145 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__language__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Language · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n  ],\n  contextMenu: true,\n  height: 'auto',\n  language: deDE.languageCode,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/language/vue/example1.vue","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Language · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, deDE } from 'handsontable/i18n';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\nregisterLanguageDictionary(deDE);\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],\n    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],\n    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],\n    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],\n    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],\n  ],\n  contextMenu: true,\n  height: 'auto',\n  language: deDE.languageCode,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/language/vue/example1.vue","breadcrumb":["Internationalization","Language"],"guide":"guides/internationalization/language/language.md","guideTitle":"Language","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/language","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example1.ts.json
index 82c6b8a33..1a6b8880b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-layout-direction></example1-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n// @ts-ignore\nimport { arAR, registerLanguageDictionary } from 'handsontable/i18n';\n\nregisterLanguageDictionary(arAR);\n\n@Component({\n  selector: 'example1-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = this.generateArabicData();\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl',\n    language: 'ar-AR',\n    dropdownMenu: true,\n    filter: true,\n    contextMenu: true\n  };\n\n  //  generate random RTL data (e.g., Arabic)\n  private generateArabicData(): any[][] {\n    const randomName = () =>\n      ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n    const randomCountry = () =>\n      ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n    const randomDate = () =>\n      new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n    const randomBool = () => Math.random() > 0.5;\n    const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n    const randomPhrase = () =>\n      `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n    const arr = Array.from({ length: 10 }, () => [\n      randomBool(),\n      randomName(),\n      randomCountry(),\n      randomPhrase(),\n      randomDate(),\n      randomPhrase(),\n      randomBool(),\n      randomNumber(0, 200).toString(),\n      randomNumber(0, 10),\n      randomNumber(0, 5),\n    ]);\n\n    return arr;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example1.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-layout-direction></example1-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n// @ts-ignore\nimport { arAR, registerLanguageDictionary } from 'handsontable/i18n';\n\nregisterLanguageDictionary(arAR);\n\n@Component({\n  selector: 'example1-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data = this.generateArabicData();\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl',\n    language: 'ar-AR',\n    dropdownMenu: true,\n    filter: true,\n    contextMenu: true\n  };\n\n  //  generate random RTL data (e.g., Arabic)\n  private generateArabicData(): any[][] {\n    const randomName = () =>\n      ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n    const randomCountry = () =>\n      ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n    const randomDate = () =>\n      new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n    const randomBool = () => Math.random() > 0.5;\n    const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n    const randomPhrase = () =>\n      `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n    const arr = Array.from({ length: 10 }, () => [\n      randomBool(),\n      randomName(),\n      randomCountry(),\n      randomPhrase(),\n      randomDate(),\n      randomPhrase(),\n      randomBool(),\n      randomNumber(0, 200).toString(),\n      randomNumber(0, 10),\n      randomNumber(0, 5),\n    ]);\n\n    return arr;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example1.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example2.ts.json
index 041b9376c..7a245bdf6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-layout-direction></example2-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <section dir=\"rtl\">\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  </section>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'inherit'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example2.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-layout-direction></example2-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <section dir=\"rtl\">\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  </section>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'inherit'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example2.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example3.ts.json
index 5d7e9ea0a..6123dc468 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-layout-direction></example3-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example3.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-layout-direction></example3-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example3.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example4.ts.json
index 2e7dbc184..0c502c215 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-layout-direction></example4-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'ltr'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example4.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-layout-direction></example4-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example4-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'ltr'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example4.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example5.ts.json
index 0b0fc5847..9a80ada43 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-layout-direction></example5-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl',\n    columns: [\n      {},\n      // align this column's text to the left\n      { className: 'htLeft' },\n      // align this column's text to the center\n      { className: 'htCenter' },\n      // align this column's text to the right\n      { className: 'htRight' },\n      {},\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example5.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"Angular"}
+{"framework":"angular","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example5-layout-direction></example5-layout-direction>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example5-layout-direction',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    autoWrapRow: true,\n    autoWrapCol: true,\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n    rowHeaders: true,\n    height: 'auto',\n    layoutDirection: 'rtl',\n    columns: [\n      {},\n      // align this column's text to the left\n      { className: 'htLeft' },\n      // align this column's text to the center\n      { className: 'htCenter' },\n      // align this column's text to the right\n      { className: 'htRight' },\n      {},\n    ]\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/internationalization/layout-direction/angular/example5.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.js.json
index a0b01a6eb..013f060c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\n// generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  layoutDirection: 'rtl',\n  // load an RTL language (e.g., Arabic)\n  language: 'ar-AR',\n  // enable a few options that exemplify the layout direction\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example1.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\n// generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  layoutDirection: 'rtl',\n  // load an RTL language (e.g., Arabic)\n  language: 'ar-AR',\n  // enable a few options that exemplify the layout direction\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example1.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.ts.json
index 6cdb572f9..bfb7e2e62 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nregisterLanguageDictionary(arAR);\n\n// generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  layoutDirection: 'rtl',\n  // load an RTL language (e.g., Arabic)\n  language: 'ar-AR',\n  // enable a few options that exemplify the layout direction\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example1.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nregisterLanguageDictionary(arAR);\n\n// generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  layoutDirection: 'rtl',\n  // load an RTL language (e.g., Arabic)\n  language: 'ar-AR',\n  // enable a few options that exemplify the layout direction\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example1.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.js.json
index f410b4320..ee45d7118 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <section dir=\"rtl\">\n    <div id=\"example2\"></div>\n  </section>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // inherit Handsontable's layout direction\n  // from the value of your HTML document's `dir` attribute\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example2.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <section dir=\"rtl\">\n    <div id=\"example2\"></div>\n  </section>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // inherit Handsontable's layout direction\n  // from the value of your HTML document's `dir` attribute\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example2.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.ts.json
index dfafeece4..f000fb7ce 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <section dir=\"rtl\">\n    <div id=\"example2\"></div>\n  </section>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // inherit Handsontable's layout direction\n  // from the value of your HTML document's `dir` attribute\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example2.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <section dir=\"rtl\">\n    <div id=\"example2\"></div>\n  </section>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // inherit Handsontable's layout direction\n  // from the value of your HTML document's `dir` attribute\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example2.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.js.json
index 8ed496dc5..d200c983b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example3.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example3.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.ts.json
index 1d3a6dac8..c985a53c8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container: Element = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example3.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container: Element = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example3.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.js.json
index 73ad28b29..340b896d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the left to the right\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example4.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the left to the right\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example4.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.ts.json
index 0e3e575d1..80b870251 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the left to the right\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example4.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the left to the right\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example4.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.js.json
index 7fbf44ec6..43cfb409b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    // align this column's text to the left\n    { className: 'htLeft' },\n    // align this column's text to the center\n    { className: 'htCenter' },\n    // align this column's text to the right\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example5.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    // align this column's text to the left\n    { className: 'htLeft' },\n    // align this column's text to the center\n    { className: 'htCenter' },\n    // align this column's text to the right\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example5.js","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.ts.json
index d125b57b8..a0deeb79c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    // align this column's text to the left\n    { className: 'htLeft' },\n    // align this column's text to the center\n    { className: 'htCenter' },\n    // align this column's text to the right\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example5.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  // render Handsontable from the right to the left\n  // regardless of your HTML document's `dir`\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    // align this column's text to the left\n    { className: 'htLeft' },\n    // align this column's text to the center\n    { className: 'htCenter' },\n    // align this column's text to the right\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/internationalization/layout-direction/javascript/example5.ts","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example1.tsx.json
index 450745659..ac0252dc8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Layout direction · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// register Handsontable's modules\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\n//  generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst data = generateArabicData();\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n      language=\"ar-AR\"\n      dropdownMenu={true}\n      filters={true}\n      contextMenu={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example1.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Layout direction · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\n\n// register Handsontable's modules\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\n//  generate random RTL data (e.g., Arabic)\nfunction generateArabicData() {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 3)];\n\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 3)];\n\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  const arr = Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n\n  return arr;\n}\n\nconst data = generateArabicData();\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n      language=\"ar-AR\"\n      dropdownMenu={true}\n      filters={true}\n      contextMenu={true}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example1.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example2.tsx.json
index 7be27d6f2..dd96cb52d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <section dir=\"rtl\">\n      <HotTable\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n        rowHeaders={true}\n        height=\"auto\"\n        layoutDirection=\"inherit\"\n      />\n    </section>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example2.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <section dir=\"rtl\">\n      <HotTable\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n        rowHeaders={true}\n        height=\"auto\"\n        layoutDirection=\"inherit\"\n      />\n    </section>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example2.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example3.tsx.json
index be70b7c05..8af2a2b04 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example3.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example3.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example4.tsx.json
index 1718b0a4d..542bc735d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"ltr\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example4.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"ltr\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example4.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example5.tsx.json
index b53d2cb78..0cc3390d0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n      columns={[\n        {},\n        // align this column's text to the left\n        { className: 'htLeft' },\n        // align this column's text to the center\n        { className: 'htCenter' },\n        // align this column's text to the right\n        { className: 'htRight' },\n        {},\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example5.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"React (TS)"}
+{"framework":"react","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes']}\n      rowHeaders={true}\n      height=\"auto\"\n      layoutDirection=\"rtl\"\n      columns={[\n        {},\n        // align this column's text to the left\n        { className: 'htLeft' },\n        // align this column's text to the center\n        { className: 'htCenter' },\n        // align this column's text to the right\n        { className: 'htRight' },\n        {},\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/internationalization/layout-direction/react/example5.tsx","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example1.vue.json
index 3fef67cab..174158a65 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\nfunction generateArabicData(): (string | number | boolean)[][] {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 4)];\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 4)];\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  return Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  language: 'ar-AR',\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example1.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerLanguageDictionary, arAR } from 'handsontable/i18n';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\nregisterLanguageDictionary(arAR);\n\nfunction generateArabicData(): (string | number | boolean)[][] {\n  const randomName = () => ['عمر', 'علي', 'عبد الله', 'معتصم'][Math.floor(Math.random() * 4)];\n  const randomCountry = () => ['تركيا', 'مصر', 'لبنان', 'العراق'][Math.floor(Math.random() * 4)];\n  const randomDate = () => new Date(Math.floor(Math.random() * Date.now())).toLocaleDateString();\n  const randomBool = () => Math.random() > 0.5;\n  const randomNumber = (a = 0, b = 1000) => a + Math.floor(Math.random() * b);\n  const randomPhrase = () => `${randomCountry()} ${randomName()} ${randomNumber()}`;\n\n  return Array.from({ length: 10 }, () => [\n    randomBool(),\n    randomName(),\n    randomCountry(),\n    randomPhrase(),\n    randomDate(),\n    randomPhrase(),\n    randomBool(),\n    randomNumber(0, 200).toString(),\n    randomNumber(0, 10),\n    randomNumber(0, 5),\n  ]);\n}\n\nconst hotSettings = ref<GridSettings>({\n  data: generateArabicData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  language: 'ar-AR',\n  dropdownMenu: true,\n  filters: true,\n  contextMenu: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example1.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/layout-direction","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example2.vue.json
index bc60b3219..4d1a2b9db 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <section dir=\"rtl\">\n    <div id=\"example2\">\n      <HotTable :settings=\"hotSettings\" />\n    </div>\n  </section>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example2.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction automatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'inherit',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <section dir=\"rtl\">\n    <div id=\"example2\">\n      <HotTable :settings=\"hotSettings\" />\n    </div>\n  </section>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example2.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example2","exampleTitle":"Set the layout direction automatically","docPermalink":"/layout-direction","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example3.vue.json
index 826673a2a..949f6be7a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example3.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction to RTL · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example3.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example3","exampleTitle":"Set the layout direction to RTL","docPermalink":"/layout-direction","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example4.vue.json
index c7e745b69..648fbdde7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example4.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the layout direction to LTR · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'ltr',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example4.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example4","exampleTitle":"Set the layout direction to LTR","docPermalink":"/layout-direction","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example5.vue.json
index c05504090..c0cf397c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__internationalization__layout-direction__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    { className: 'htLeft' },\n    { className: 'htCenter' },\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example5.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"Vue 3"}
+{"framework":"vue","displayName":"Internationalization ▸ Layout direction · Set the horizontal text alignment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ],\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass', 'Known isotopes'],\n  rowHeaders: true,\n  height: 'auto',\n  layoutDirection: 'rtl',\n  columns: [\n    {},\n    { className: 'htLeft' },\n    { className: 'htCenter' },\n    { className: 'htRight' },\n    {},\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/internationalization/layout-direction/vue/example5.vue","breadcrumb":["Internationalization","Layout direction"],"guide":"guides/internationalization/layout-direction/layout-direction.md","guideTitle":"Layout direction","exampleId":"example5","exampleTitle":"Set the horizontal text alignment","docPermalink":"/layout-direction","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__angular__example1.ts.json
index 1eabd2c54..2c9e248e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Custom shortcuts · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <example1-custom-shortcuts></example1-custom-shortcuts>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-custom-shortcuts',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n    columns: [{}, {}, { type: 'numeric' }, {}],\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      // get the `grid` context from the `ShortcutManager` API\n      const gridContext = this.getShortcutManager().getContext('grid');\n\n      if (!gridContext) {\n        return;\n      }\n\n      // register a custom keyboard shortcut in the `grid` context:\n      // pressing Control/Meta+Enter inserts a new row below the selected cell\n      gridContext.addShortcut({\n        keys: [['control/meta', 'enter']],\n        group: 'insertRowBelow',\n        callback: () => {\n          const selected = this.getSelectedRangeLast();\n\n          if (!selected || selected.highlight.row === null) {\n            return;\n          }\n\n          this.alter('insert_row_below', selected.highlight.row);\n        },\n      });\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/custom-shortcuts/angular/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Custom shortcuts · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <example1-custom-shortcuts></example1-custom-shortcuts>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example1-custom-shortcuts',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n    columns: [{}, {}, { type: 'numeric' }, {}],\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      // get the `grid` context from the `ShortcutManager` API\n      const gridContext = this.getShortcutManager().getContext('grid');\n\n      if (!gridContext) {\n        return;\n      }\n\n      // register a custom keyboard shortcut in the `grid` context:\n      // pressing Control/Meta+Enter inserts a new row below the selected cell\n      gridContext.addShortcut({\n        keys: [['control/meta', 'enter']],\n        group: 'insertRowBelow',\n        callback: () => {\n          const selected = this.getSelectedRangeLast();\n\n          if (!selected || selected.highlight.row === null) {\n            return;\n          }\n\n          this.alter('insert_row_below', selected.highlight.row);\n        },\n      });\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/custom-shortcuts/angular/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.js.json
index 2313051b0..210984b23 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Custom shortcuts · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n    columns: [{}, {}, { type: 'numeric' }, {}],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\nif (gridContext) {\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n        keys: [['control/meta', 'enter']],\n        group: 'insertRowBelow',\n        callback: () => {\n            const selected = hot.getSelectedRangeLast();\n            if (!selected || selected.highlight.row === null) {\n                return;\n            }\n            hot.alter('insert_row_below', selected.highlight.row);\n        },\n    });\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.js","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Custom shortcuts · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n    columns: [{}, {}, { type: 'numeric' }, {}],\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\nif (gridContext) {\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n        keys: [['control/meta', 'enter']],\n        group: 'insertRowBelow',\n        callback: () => {\n            const selected = hot.getSelectedRangeLast();\n            if (!selected || selected.highlight.row === null) {\n                return;\n            }\n            hot.alter('insert_row_below', selected.highlight.row);\n        },\n    });\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.js","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.ts.json
index 1ee82cb6f..64d849aeb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Custom shortcuts · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n  ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n  ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n  ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n  ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\n\nconst container: Element = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n  columns: [{}, {}, { type: 'numeric' }, {}],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\n\nif (gridContext) {\n  // register a custom keyboard shortcut in the `grid` context:\n  // pressing Control/Meta+Enter inserts a new row below the selected cell\n  gridContext.addShortcut({\n    keys: [['control/meta', 'enter']],\n    group: 'insertRowBelow',\n    callback: () => {\n      const selected = hot.getSelectedRangeLast();\n\n      if (!selected || selected.highlight.row === null) {\n        return;\n      }\n\n      hot.alter('insert_row_below', selected.highlight.row);\n    },\n  });\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Custom shortcuts · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n  ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n  ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n  ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n  ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\n\nconst container: Element = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n  columns: [{}, {}, { type: 'numeric' }, {}],\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\n\nif (gridContext) {\n  // register a custom keyboard shortcut in the `grid` context:\n  // pressing Control/Meta+Enter inserts a new row below the selected cell\n  gridContext.addShortcut({\n    keys: [['control/meta', 'enter']],\n    group: 'insertRowBelow',\n    callback: () => {\n      const selected = hot.getSelectedRangeLast();\n\n      if (!selected || selected.highlight.row === null) {\n        return;\n      }\n\n      hot.alter('insert_row_below', selected.highlight.row);\n    },\n  });\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__react__example1.tsx.json
index 76f287a79..dabc73ce9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Custom shortcuts · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data: (string | number)[][] = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n  ];\n\n  const afterInitCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // get the `grid` context from the `ShortcutManager` API\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n      keys: [['control/meta', 'enter']],\n      group: 'insertRowBelow',\n      callback: () => {\n        const selected = hot.getSelectedRangeLast();\n\n        if (!selected || selected.highlight.row === null) {\n          return;\n        }\n\n        hot.alter('insert_row_below', selected.highlight.row);\n      },\n    });\n  };\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['SKU', 'Product', 'Quantity', 'Category']}\n      columns={[{}, {}, { type: 'numeric' }, {}]}\n      height=\"auto\"\n      afterInit={afterInitCallback}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/custom-shortcuts/react/example1.tsx","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Custom shortcuts · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data: (string | number)[][] = [\n    ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n    ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n    ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n    ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n    ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n  ];\n\n  const afterInitCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // get the `grid` context from the `ShortcutManager` API\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n      keys: [['control/meta', 'enter']],\n      group: 'insertRowBelow',\n      callback: () => {\n        const selected = hot.getSelectedRangeLast();\n\n        if (!selected || selected.highlight.row === null) {\n          return;\n        }\n\n        hot.alter('insert_row_below', selected.highlight.row);\n      },\n    });\n  };\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['SKU', 'Product', 'Quantity', 'Category']}\n      columns={[{}, {}, { type: 'numeric' }, {}]}\n      height=\"auto\"\n      afterInit={afterInitCallback}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/custom-shortcuts/react/example1.tsx","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__vue__example1.vue.json
index ed47f2dba..0ba20116f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__custom-shortcuts__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Custom shortcuts · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n  ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n  ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n  ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n  ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n  columns: [{}, {}, { type: 'numeric' }, {}],\n  height: 'auto',\n  afterInit(this: Handsontable) {\n    // get the `grid` context from the `ShortcutManager` API\n    const gridContext = this.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n      keys: [['control/meta', 'enter']],\n      group: 'insertRowBelow',\n      callback: () => {\n        const selected = this.getSelectedRangeLast();\n\n        if (!selected || selected.highlight.row === null) {\n          return;\n        }\n\n        this.alter('insert_row_below', selected.highlight.row);\n      },\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/custom-shortcuts/vue/example1.vue","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Custom shortcuts · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n  ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n  ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n  ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n  ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n  columns: [{}, {}, { type: 'numeric' }, {}],\n  height: 'auto',\n  afterInit(this: Handsontable) {\n    // get the `grid` context from the `ShortcutManager` API\n    const gridContext = this.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // register a custom keyboard shortcut in the `grid` context:\n    // pressing Control/Meta+Enter inserts a new row below the selected cell\n    gridContext.addShortcut({\n      keys: [['control/meta', 'enter']],\n      group: 'insertRowBelow',\n      callback: () => {\n        const selected = this.getSelectedRangeLast();\n\n        if (!selected || selected.highlight.row === null) {\n          return;\n        }\n\n        this.alter('insert_row_below', selected.highlight.row);\n      },\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/custom-shortcuts/vue/example1.vue","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example1.ts.json
index 18862f8f4..4ea65691e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Focus scopes · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-container\">\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <hot-table\n        #hotTable\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n      </hot-table>\n\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <div class=\"debug-info\">\n        <strong>Debug information:</strong>\n        <table class=\"debug-table\">\n          <colgroup>\n            <col>\n            <col style=\"width: 200px\">\n          </colgroup>\n          <tbody>\n            <tr>\n              <td>\n                <code>isListening()</code>\n              </td>\n              <td><code>{{ isListening }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getFocusScopeManager().getActiveScopeId()</code>\n              </td>\n              <td><code>{{ focusScope }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getShortcutManager().getActiveContextName()</code>\n              </td>\n              <td><code>{{ shortcutsContext }}</code></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  `,\n  styles: `\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n\n    strong:has(+ table.debug-table) {\n      display: block;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--sl-color-white, #333333);\n      margin: 0.75rem 0 0;\n      padding: 0.5rem 0 0.35rem;\n      border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    table.debug-table {\n      width: 100%;\n      border-collapse: collapse;\n      box-sizing: border-box;\n      font-size: 0.8125rem;\n      line-height: 1.6;\n      color: var(--sl-color-gray-2, #555555);\n      background: transparent;\n    }\n\n    table.debug-table td {\n      padding: 0.25rem 0.5rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n    }\n\n    table.debug-table td:last-child {\n      font-family: var(--sl-font-mono, ui-monospace, monospace);\n    }\n\n    table.debug-table td code {\n      font-size: var(--sl-text-xs, 0.75rem);\n    }\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private debugInterval?: number;\n  private cdr = inject(ChangeDetectorRef);\n\n  isListening = 'false';\n  focusScope = 'null';\n  shortcutsContext = 'null';\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    tabNavigation: false,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 131,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 81,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 250,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const focusScopeManager = hotInstance.getFocusScopeManager();\n      const shortcutManager = hotInstance.getShortcutManager();\n\n      this.debugInterval = window.setInterval(() => {\n        this.isListening = hotInstance.isListening() ? 'true' : 'false';\n        this.focusScope = `${focusScopeManager.getActiveScopeId()}`;\n        this.shortcutsContext = `${shortcutManager.getActiveContextName()}`;\n\n        this.cdr.detectChanges();\n      }, 200);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this.debugInterval) {\n      clearInterval(this.debugInterval);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/focus-scopes/angular/example1.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Focus scopes · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-container\">\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <hot-table\n        #hotTable\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n      </hot-table>\n\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <div class=\"debug-info\">\n        <strong>Debug information:</strong>\n        <table class=\"debug-table\">\n          <colgroup>\n            <col>\n            <col style=\"width: 200px\">\n          </colgroup>\n          <tbody>\n            <tr>\n              <td>\n                <code>isListening()</code>\n              </td>\n              <td><code>{{ isListening }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getFocusScopeManager().getActiveScopeId()</code>\n              </td>\n              <td><code>{{ focusScope }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getShortcutManager().getActiveContextName()</code>\n              </td>\n              <td><code>{{ shortcutsContext }}</code></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  `,\n  styles: `\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n\n    strong:has(+ table.debug-table) {\n      display: block;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--sl-color-white, #333333);\n      margin: 0.75rem 0 0;\n      padding: 0.5rem 0 0.35rem;\n      border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    table.debug-table {\n      width: 100%;\n      border-collapse: collapse;\n      box-sizing: border-box;\n      font-size: 0.8125rem;\n      line-height: 1.6;\n      color: var(--sl-color-gray-2, #555555);\n      background: transparent;\n    }\n\n    table.debug-table td {\n      padding: 0.25rem 0.5rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n    }\n\n    table.debug-table td:last-child {\n      font-family: var(--sl-font-mono, ui-monospace, monospace);\n    }\n\n    table.debug-table td code {\n      font-size: var(--sl-text-xs, 0.75rem);\n    }\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private debugInterval?: number;\n  private cdr = inject(ChangeDetectorRef);\n\n  isListening = 'false';\n  focusScope = 'null';\n  shortcutsContext = 'null';\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    tabNavigation: false,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 131,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 81,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 250,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const focusScopeManager = hotInstance.getFocusScopeManager();\n      const shortcutManager = hotInstance.getShortcutManager();\n\n      this.debugInterval = window.setInterval(() => {\n        this.isListening = hotInstance.isListening() ? 'true' : 'false';\n        this.focusScope = `${focusScopeManager.getActiveScopeId()}`;\n        this.shortcutsContext = `${shortcutManager.getActiveContextName()}`;\n\n        this.cdr.detectChanges();\n      }, 200);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this.debugInterval) {\n      clearInterval(this.debugInterval);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/focus-scopes/angular/example1.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example2.ts.json
index bf7e09e64..e1c25a875 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Focus scopes · Modal scopes · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-container\">\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <hot-table\n        #hotTable\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n      </hot-table>\n\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <div class=\"debug-info\">\n        <strong>Debug information:</strong>\n        <table class=\"debug-table\">\n          <colgroup>\n            <col>\n            <col style=\"width: 200px\">\n          </colgroup>\n          <tbody>\n            <tr>\n              <td>\n                <code>isListening()</code>\n              </td>\n              <td><code>{{ isListening }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getFocusScopeManager().getActiveScopeId()</code>\n              </td>\n              <td><code>{{ focusScope }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getShortcutManager().getActiveContextName()</code>\n              </td>\n              <td><code>{{ shortcutsContext }}</code></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  `,\n  styles: `\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n\n    strong:has(+ table.debug-table) {\n      display: block;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--sl-color-white, #333333);\n      margin: 0.75rem 0 0;\n      padding: 0.5rem 0 0.35rem;\n      border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    table.debug-table {\n      width: 100%;\n      border-collapse: collapse;\n      box-sizing: border-box;\n      font-size: 0.8125rem;\n      line-height: 1.6;\n      color: var(--sl-color-gray-2, #555555);\n      background: transparent;\n    }\n\n    table.debug-table td {\n      padding: 0.25rem 0.5rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n    }\n\n    table.debug-table td:last-child {\n      font-family: var(--sl-font-mono, ui-monospace, monospace);\n    }\n\n    table.debug-table td code {\n      font-size: var(--sl-text-xs, 0.75rem);\n    }\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private debugInterval?: number;\n  private cdr = inject(ChangeDetectorRef);\n\n  isListening = 'false';\n  focusScope = 'null';\n  shortcutsContext = 'null';\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    dialog: true,\n    autoRowSize: true,\n    tabNavigation: false,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 131,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 81,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 250,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n\n      dialogPlugin.show({\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n        background: 'semi-transparent',\n      });\n\n      const focusScopeManager = hotInstance.getFocusScopeManager();\n      const shortcutManager = hotInstance.getShortcutManager();\n\n      this.debugInterval = window.setInterval(() => {\n        this.isListening = hotInstance.isListening() ? 'true' : 'false';\n        this.focusScope = `${focusScopeManager.getActiveScopeId()}`;\n        this.shortcutsContext = `${shortcutManager.getActiveContextName()}`;\n\n        this.cdr.detectChanges();\n      }, 200);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this.debugInterval) {\n      clearInterval(this.debugInterval);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/focus-scopes/angular/example2.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Focus scopes · Modal scopes · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-container\">\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <hot-table\n        #hotTable\n        [settings]=\"hotSettings!\" [data]=\"hotData\">\n      </hot-table>\n\n      <input\n        class=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <div class=\"debug-info\">\n        <strong>Debug information:</strong>\n        <table class=\"debug-table\">\n          <colgroup>\n            <col>\n            <col style=\"width: 200px\">\n          </colgroup>\n          <tbody>\n            <tr>\n              <td>\n                <code>isListening()</code>\n              </td>\n              <td><code>{{ isListening }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getFocusScopeManager().getActiveScopeId()</code>\n              </td>\n              <td><code>{{ focusScope }}</code></td>\n            </tr>\n            <tr>\n              <td>\n                <code>getShortcutManager().getActiveContextName()</code>\n              </td>\n              <td><code>{{ shortcutsContext }}</code></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  `,\n  styles: `\n    .placeholder-input {\n      max-width: 20rem;\n      padding: 0.4rem 0.625rem;\n      font-size: var(--sl-text-sm, 0.875rem);\n      line-height: 1.25rem;\n      color: var(--sl-color-text, #333333);\n      background: none;\n      border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      border-radius: 0;\n      outline: none;\n    }\n\n    .placeholder-input::placeholder {\n      color: var(--sl-color-gray-3, #777777);\n    }\n\n    .placeholder-input:focus {\n      border-color: var(--sl-color-accent, #1A42E8);\n    }\n\n    .example-container {\n      gap: 1rem;\n      display: flex;\n      flex-direction: column;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    }\n\n    strong:has(+ table.debug-table) {\n      display: block;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--sl-color-white, #333333);\n      margin: 0.75rem 0 0;\n      padding: 0.5rem 0 0.35rem;\n      border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n    }\n\n    table.debug-table {\n      width: 100%;\n      border-collapse: collapse;\n      box-sizing: border-box;\n      font-size: 0.8125rem;\n      line-height: 1.6;\n      color: var(--sl-color-gray-2, #555555);\n      background: transparent;\n    }\n\n    table.debug-table td {\n      padding: 0.25rem 0.5rem;\n      border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n      color: var(--sl-color-gray-2, #555555);\n    }\n\n    table.debug-table td:last-child {\n      font-family: var(--sl-font-mono, ui-monospace, monospace);\n    }\n\n    table.debug-table td code {\n      font-size: var(--sl-text-xs, 0.75rem);\n    }\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private debugInterval?: number;\n  private cdr = inject(ChangeDetectorRef);\n\n  isListening = 'false';\n  focusScope = 'null';\n  shortcutsContext = 'null';\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    dialog: true,\n    autoRowSize: true,\n    tabNavigation: false,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 131,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 81,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 250,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      const dialogPlugin = hotInstance.getPlugin('dialog');\n\n      dialogPlugin.show({\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n        background: 'semi-transparent',\n      });\n\n      const focusScopeManager = hotInstance.getFocusScopeManager();\n      const shortcutManager = hotInstance.getShortcutManager();\n\n      this.debugInterval = window.setInterval(() => {\n        this.isListening = hotInstance.isListening() ? 'true' : 'false';\n        this.focusScope = `${focusScopeManager.getActiveScopeId()}`;\n        this.shortcutsContext = `${shortcutManager.getActiveContextName()}`;\n\n        this.cdr.detectChanges();\n      }, 200);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this.debugInterval) {\n      clearInterval(this.debugInterval);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/focus-scopes/angular/example2.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.js.json
index 42bd63660..dd4b2f1cb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Focus scopes · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example1container');\n\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n\n    return;\n  }\n\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example1.js","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Focus scopes · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example1container');\n\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n\n    return;\n  }\n\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example1.js","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.ts.json
index d957b9464..8a8aab401 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Focus scopes · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example1container');\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n    return;\n  }\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example1.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Focus scopes · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example1\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example1container');\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n    return;\n  }\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example1.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.js.json
index 850619302..ac1503c56 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Focus scopes · Modal scopes · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example2\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  },\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example2container');\n\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n\n    return;\n  }\n\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example2.js","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Focus scopes · Modal scopes · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example2\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  },\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example2container');\n\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n\n    return;\n  }\n\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example2.js","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.ts.json
index f8e245ee3..7cadfb113 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Focus scopes · Modal scopes · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example2\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  },\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example2container');\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n    return;\n  }\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example2.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Focus scopes · Modal scopes · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2container\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    />\n  \n    <div id=\"example2\"></div>\n  \n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    />\n  \n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td><code class=\"isListening\">false</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td><code class=\"focusScope\">null</code></td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td><code class=\"shortcutsContext\">null</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  dialog: {\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  },\n  autoRowSize: true,\n  tabNavigation: false,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 131,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 81,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dialogPlugin = hot.getPlugin('dialog');\n\ndialogPlugin.show();\n\nconst debugIntervalId = setInterval(function updateDebugInformation() {\n  const examplesContainer = document.getElementById('example2container');\n  if (!examplesContainer || hot.isDestroyed) {\n    clearInterval(debugIntervalId);\n    return;\n  }\n  const isListeningElement = examplesContainer.querySelector('.isListening');\n  const focusScopeElement = examplesContainer.querySelector('.focusScope');\n  const shortcutsContextElement = examplesContainer.querySelector('.shortcutsContext');\n\n  if (isListeningElement && focusScopeElement && shortcutsContextElement) {\n    isListeningElement.textContent = `${hot.isListening()}`;\n    focusScopeElement.textContent = `${hot.getFocusScopeManager().getActiveScopeId()}`;\n    shortcutsContextElement.textContent = `${hot.getShortcutManager().getActiveContextName()}`;\n  }\n}, 200);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/javascript/example2.ts","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example1.tsx.json
index cc82c4008..ab172003c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Focus scopes · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst Table = memo(({ hotTableRef, data }) => {\n  return (\n    <HotTable\n      ref={hotTableRef}\n      pagination={true}\n      autoRowSize={true}\n      tabNavigation={false}\n      data={data}\n      width=\"100%\"\n      height={250}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={81}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n});\n\nconst DebugInfo = memo(({ debugInfo }) => (\n  <>\n    <strong>Debug information:</strong>\n    <table className=\"debug-table\">\n      <colgroup>\n        <col />\n        <col style={{ width: '200px' }} />\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td>\n            <code className=\"isListening\">{String(debugInfo.isListening)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td>\n            <code className=\"focusScope\">{String(debugInfo.focusScope)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td>\n            <code className=\"shortcutsContext\">{String(debugInfo.shortcutsContext)}</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </>\n));\n\nconst ExampleComponent = () => {\n  const [debugInfo, setDebugInfo] = useState({\n    isListening: false,\n    focusScope: null,\n    shortcutsContext: null,\n  });\n\n  const hotRef = useRef(null);\n  const updateDebugInfo = useCallback(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      setDebugInfo({\n        isListening: hotInstance.isListening(),\n        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),\n        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(updateDebugInfo, 200);\n\n    return () => clearInterval(interval);\n  }, [updateDebugInfo]);\n\n  return (\n    <div className=\"example-container\">\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <Table hotTableRef={hotRef} data={data} />\n\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <DebugInfo debugInfo={debugInfo} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/react/example1.tsx","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Focus scopes · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst Table = memo(({ hotTableRef, data }) => {\n  return (\n    <HotTable\n      ref={hotTableRef}\n      pagination={true}\n      autoRowSize={true}\n      tabNavigation={false}\n      data={data}\n      width=\"100%\"\n      height={250}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={81}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n});\n\nconst DebugInfo = memo(({ debugInfo }) => (\n  <>\n    <strong>Debug information:</strong>\n    <table className=\"debug-table\">\n      <colgroup>\n        <col />\n        <col style={{ width: '200px' }} />\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td>\n            <code className=\"isListening\">{String(debugInfo.isListening)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td>\n            <code className=\"focusScope\">{String(debugInfo.focusScope)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td>\n            <code className=\"shortcutsContext\">{String(debugInfo.shortcutsContext)}</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </>\n));\n\nconst ExampleComponent = () => {\n  const [debugInfo, setDebugInfo] = useState({\n    isListening: false,\n    focusScope: null,\n    shortcutsContext: null,\n  });\n\n  const hotRef = useRef(null);\n  const updateDebugInfo = useCallback(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      setDebugInfo({\n        isListening: hotInstance.isListening(),\n        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),\n        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(updateDebugInfo, 200);\n\n    return () => clearInterval(interval);\n  }, [updateDebugInfo]);\n\n  return (\n    <div className=\"example-container\">\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <Table hotTableRef={hotRef} data={data} />\n\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <DebugInfo debugInfo={debugInfo} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/react/example1.tsx","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example2.tsx.json
index 55026de6c..87623b10e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Focus scopes · Modal scopes · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst Table = memo(({ hotTableRef, data }) => {\n  return (\n    <HotTable\n      ref={hotTableRef}\n      pagination={true}\n      dialog={true}\n      autoRowSize={true}\n      tabNavigation={false}\n      data={data}\n      width=\"100%\"\n      height={250}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={81}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n});\n\nconst DebugInfo = memo(({ debugInfo }) => (\n  <>\n    <strong>Debug information:</strong>\n    <table className=\"debug-table\">\n      <colgroup>\n        <col />\n        <col style={{ width: '200px' }} />\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td>\n            <code className=\"isListening\">{String(debugInfo.isListening)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td>\n            <code className=\"focusScope\">{String(debugInfo.focusScope)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td>\n            <code className=\"shortcutsContext\">{String(debugInfo.shortcutsContext)}</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </>\n));\n\nconst ExampleComponent = () => {\n  const [debugInfo, setDebugInfo] = useState({\n    isListening: false,\n    focusScope: null,\n    shortcutsContext: null,\n  });\n\n  const hotRef = useRef(null);\n  const updateDebugInfo = useCallback(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      setDebugInfo({\n        isListening: hotInstance.isListening(),\n        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),\n        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show({\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n        background: 'semi-transparent',\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(updateDebugInfo, 200);\n\n    return () => clearInterval(interval);\n  }, [updateDebugInfo]);\n\n  return (\n    <div className=\"example-container\">\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <Table hotTableRef={hotRef} data={data} />\n\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <DebugInfo debugInfo={debugInfo} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/react/example2.tsx","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Focus scopes · Modal scopes · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst Table = memo(({ hotTableRef, data }) => {\n  return (\n    <HotTable\n      ref={hotTableRef}\n      pagination={true}\n      dialog={true}\n      autoRowSize={true}\n      tabNavigation={false}\n      data={data}\n      width=\"100%\"\n      height={250}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={131}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={81}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n});\n\nconst DebugInfo = memo(({ debugInfo }) => (\n  <>\n    <strong>Debug information:</strong>\n    <table className=\"debug-table\">\n      <colgroup>\n        <col />\n        <col style={{ width: '200px' }} />\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>\n            <code>isListening()</code>\n          </td>\n          <td>\n            <code className=\"isListening\">{String(debugInfo.isListening)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getFocusScopeManager().getActiveScopeId()</code>\n          </td>\n          <td>\n            <code className=\"focusScope\">{String(debugInfo.focusScope)}</code>\n          </td>\n        </tr>\n        <tr>\n          <td>\n            <code>getShortcutManager().getActiveContextName()</code>\n          </td>\n          <td>\n            <code className=\"shortcutsContext\">{String(debugInfo.shortcutsContext)}</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </>\n));\n\nconst ExampleComponent = () => {\n  const [debugInfo, setDebugInfo] = useState({\n    isListening: false,\n    focusScope: null,\n    shortcutsContext: null,\n  });\n\n  const hotRef = useRef(null);\n  const updateDebugInfo = useCallback(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      setDebugInfo({\n        isListening: hotInstance.isListening(),\n        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),\n        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const hotInstance = hotRef.current?.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.getPlugin('dialog').show({\n        content: 'This is a simple text message displayed in the dialog.',\n        closable: true,\n        background: 'semi-transparent',\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(updateDebugInfo, 200);\n\n    return () => clearInterval(interval);\n  }, [updateDebugInfo]);\n\n  return (\n    <div className=\"example-container\">\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable top text input\"\n      />\n\n      <Table hotTableRef={hotRef} data={data} />\n\n      <input\n        className=\"placeholder-input\"\n        type=\"text\"\n        name=\"focusable-text-input\"\n        placeholder=\"Focusable bottom text input\"\n      />\n\n      <DebugInfo debugInfo={debugInfo} />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}\n\nstrong:has(+ table.debug-table) {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--sl-color-white, #333333);\n  margin: 0.75rem 0 0;\n  padding: 0.5rem 0 0.35rem;\n  border-top: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\ntable.debug-table {\n  width: 100%;\n  border-collapse: collapse;\n  box-sizing: border-box;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--sl-color-gray-2, #555555);\n  background: transparent;\n}\n\ntable.debug-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n}\n\ntable.debug-table td:last-child {\n  font-family: var(--sl-font-mono, ui-monospace, monospace);\n}\n\ntable.debug-table td code {\n  font-size: var(--sl-text-xs, 0.75rem);\n}"},"docsPath":"guides/navigation/focus-scopes/react/example2.tsx","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example1.vue.json
index 4444c0367..48be000f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Focus scopes · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n\nconst tableData = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isListening = ref(false);\nconst focusScope = ref<string | null>(null);\nconst shortcutsContext = ref<string | null>(null);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction updateDebugInfo(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (hotInstance) {\n    isListening.value = hotInstance.isListening();\n    focusScope.value = hotInstance.getFocusScopeManager().getActiveScopeId();\n    shortcutsContext.value = hotInstance.getShortcutManager().getActiveContextName();\n  }\n}\n\nlet debugInterval: ReturnType<typeof setInterval> | undefined;\n\nonMounted(() => {\n  debugInterval = setInterval(updateDebugInfo, 200);\n});\n\nonUnmounted(() => {\n  if (debugInterval) {\n    clearInterval(debugInterval);\n  }\n});\n</script>\n\n<template>\n  <div id=\"example1\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    >\n\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"81\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    >\n\n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td><code>isListening()</code></td>\n          <td><code class=\"isListening\">{{ String(isListening) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getFocusScopeManager().getActiveScopeId()</code></td>\n          <td><code class=\"focusScope\">{{ String(focusScope) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getShortcutManager().getActiveContextName()</code></td>\n          <td><code class=\"shortcutsContext\">{{ String(shortcutsContext) }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/navigation/focus-scopes/vue/example1.vue","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Focus scopes · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n\nconst tableData = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isListening = ref(false);\nconst focusScope = ref<string | null>(null);\nconst shortcutsContext = ref<string | null>(null);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  pagination: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction updateDebugInfo(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (hotInstance) {\n    isListening.value = hotInstance.isListening();\n    focusScope.value = hotInstance.getFocusScopeManager().getActiveScopeId();\n    shortcutsContext.value = hotInstance.getShortcutManager().getActiveContextName();\n  }\n}\n\nlet debugInterval: ReturnType<typeof setInterval> | undefined;\n\nonMounted(() => {\n  debugInterval = setInterval(updateDebugInfo, 200);\n});\n\nonUnmounted(() => {\n  if (debugInterval) {\n    clearInterval(debugInterval);\n  }\n});\n</script>\n\n<template>\n  <div id=\"example1\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    >\n\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"81\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    >\n\n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td><code>isListening()</code></td>\n          <td><code class=\"isListening\">{{ String(isListening) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getFocusScopeManager().getActiveScopeId()</code></td>\n          <td><code class=\"focusScope\">{{ String(focusScope) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getShortcutManager().getActiveContextName()</code></td>\n          <td><code class=\"shortcutsContext\">{{ String(shortcutsContext) }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/navigation/focus-scopes/vue/example1.vue","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/focus-scopes","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example2.vue.json
index ae9441b11..593eac482 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__focus-scopes__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Focus scopes · Modal scopes · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, nextTick, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n\nconst tableData = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isListening = ref(false);\nconst focusScope = ref<string | null>(null);\nconst shortcutsContext = ref<string | null>(null);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  pagination: true,\n  dialog: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction updateDebugInfo(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (hotInstance) {\n    isListening.value = hotInstance.isListening();\n    focusScope.value = hotInstance.getFocusScopeManager().getActiveScopeId();\n    shortcutsContext.value = hotInstance.getShortcutManager().getActiveContextName();\n  }\n}\n\nlet debugInterval: ReturnType<typeof setInterval> | undefined;\n\nonMounted(async () => {\n  await nextTick();\n\n  const hotInstance = hotRef.value?.hotInstance;\n\n  hotInstance?.getPlugin('dialog').show({\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  });\n\n  debugInterval = setInterval(updateDebugInfo, 200);\n});\n\nonUnmounted(() => {\n  if (debugInterval) {\n    clearInterval(debugInterval);\n  }\n});\n</script>\n\n<template>\n  <div id=\"example2\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    >\n\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"81\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    >\n\n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td><code>isListening()</code></td>\n          <td><code class=\"isListening\">{{ String(isListening) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getFocusScopeManager().getActiveScopeId()</code></td>\n          <td><code class=\"focusScope\">{{ String(focusScope) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getShortcutManager().getActiveContextName()</code></td>\n          <td><code class=\"shortcutsContext\">{{ String(shortcutsContext) }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/navigation/focus-scopes/vue/example2.vue","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Focus scopes · Modal scopes · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, nextTick, useTemplateRef } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n\nconst tableData = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst isListening = ref(false);\nconst focusScope = ref<string | null>(null);\nconst shortcutsContext = ref<string | null>(null);\n\nconst hotSettings = ref<GridSettings>({\n  data: tableData,\n  pagination: true,\n  dialog: true,\n  autoRowSize: true,\n  tabNavigation: false,\n  width: '100%',\n  height: 250,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction updateDebugInfo(): void {\n  const hotInstance = hotRef.value?.hotInstance;\n\n  if (hotInstance) {\n    isListening.value = hotInstance.isListening();\n    focusScope.value = hotInstance.getFocusScopeManager().getActiveScopeId();\n    shortcutsContext.value = hotInstance.getShortcutManager().getActiveContextName();\n  }\n}\n\nlet debugInterval: ReturnType<typeof setInterval> | undefined;\n\nonMounted(async () => {\n  await nextTick();\n\n  const hotInstance = hotRef.value?.hotInstance;\n\n  hotInstance?.getPlugin('dialog').show({\n    content: 'This is a simple text message displayed in the dialog.',\n    closable: true,\n    background: 'semi-transparent',\n  });\n\n  debugInterval = setInterval(updateDebugInfo, 200);\n});\n\nonUnmounted(() => {\n  if (debugInterval) {\n    clearInterval(debugInterval);\n  }\n});\n</script>\n\n<template>\n  <div id=\"example2\" class=\"example-container\">\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable top text input\"\n    >\n\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\">\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" :width=\"150\" header-class-name=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        :width=\"80\"\n        locale=\"en-US\"\n        :numeric-format=\"{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        :width=\"131\"\n        locale=\"en-US\"\n        :date-format=\"{ month: 'short', day: 'numeric', year: 'numeric' }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        :width=\"81\"\n        :time-format=\"{ hour: '2-digit', minute: '2-digit', hour12: true }\"\n        class-name=\"htRight\"\n        header-class-name=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" class-name=\"htCenter\" header-class-name=\"htCenter\" />\n    </HotTable>\n\n    <input\n      class=\"placeholder-input\"\n      type=\"text\"\n      name=\"focusable-text-input\"\n      placeholder=\"Focusable bottom text input\"\n    >\n\n    <strong>Debug information:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col>\n        <col style=\"width: 200px\">\n      </colgroup>\n      <tbody>\n        <tr>\n          <td><code>isListening()</code></td>\n          <td><code class=\"isListening\">{{ String(isListening) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getFocusScopeManager().getActiveScopeId()</code></td>\n          <td><code class=\"focusScope\">{{ String(focusScope) }}</code></td>\n        </tr>\n        <tr>\n          <td><code>getShortcutManager().getActiveContextName()</code></td>\n          <td><code class=\"shortcutsContext\">{{ String(shortcutsContext) }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>","/src/styles.css":".placeholder-input {\n  max-width: 20rem;\n  padding: 0.4rem 0.625rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.25rem;\n  color: var(--sl-color-text, #333333);\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  outline: none;\n}\n\n.placeholder-input::placeholder {\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n  border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.example-container {\n  gap: 1rem;\n  display: flex;\n  flex-direction: column;\n}"},"docsPath":"guides/navigation/focus-scopes/vue/example2.vue","breadcrumb":["Navigation","Focus scopes"],"guide":"guides/navigation/focus-scopes/focus-scopes.md","guideTitle":"Focus scopes","exampleId":"example2","exampleTitle":"Modal scopes","docPermalink":"/focus-scopes","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example1.ts.json
index 8ae696ef9..4e27128bc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Searching values · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-searching-values></example1-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example1.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Searching values · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-searching-values></example1-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example1.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example2.ts.json
index 6b91c3275..7cc364d87 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom search result class · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-searching-values></example2-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field2\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  styles: `.ht-theme-main .handsontable .my-class {\n      background: pink;\n      color: red;\n    }`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      searchResultClass: 'my-class',\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example2.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom search result class · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-searching-values></example2-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field2\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n  styles: `.ht-theme-main .handsontable .my-class {\n      background: pink;\n      color: red;\n    }`,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      searchResultClass: 'my-class',\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example2.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example3.ts.json
index 7ecabe3bb..7a9152d9c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom query method · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-searching-values></example3-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      // add your custom query method\n      queryMethod: this.onlyExactMatch,\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n\n  //  define your custom query method\n  onlyExactMatch(\n    queryStr: { toString: () => any },\n    value: { toString: () => any }\n  ): boolean {\n    return queryStr.toString() === value.toString();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example3.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom query method · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example3-searching-values></example3-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example3-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n    </div>\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      // add your custom query method\n      queryMethod: this.onlyExactMatch,\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    const hot = this.hotTable?.hotInstance;\n    // get the `Search` plugin's instance\n    const search = hot?.getPlugin('search');\n    // use the `Search` plugin's `query()` method\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    hot?.render();\n  }\n\n  //  define your custom query method\n  onlyExactMatch(\n    queryStr: { toString: () => any },\n    value: { toString: () => any }\n  ): boolean {\n    return queryStr.toString() === value.toString();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example3.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example4.ts.json
index e59f8178a..43985eb2b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-searching-values></example4-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example4-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n      <output class=\"console\" id=\"output\"> {{ resultCount }} results </output>\n    </div>\n\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      // add your custom callback function\n      callback: (\n        _instance: Handsontable,\n        _row: number,\n        _col: number,\n        _value: Handsontable.CellValue,\n        result: boolean\n      ) => this.searchResultCounter(_instance, _row, _col, _value, result),\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  resultCount = 0;\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    this.setResultCounter(0);\n\n    const search = this.hotTable?.hotInstance?.getPlugin('search');\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    this.hotTable?.hotInstance?.render();\n  }\n\n  //  define your custom callback function\n  searchResultCounter(\n    _instance: Handsontable,\n    _row: number,\n    _col: number,\n    _value: Handsontable.CellValue,\n    result: boolean\n  ): void {\n    _instance.getCellMeta(_row, _col)['isSearchResult'] = result;\n    if (result) {\n      this.setResultCounter(this.resultCount + 1);\n    }\n  }\n\n  private setResultCounter(count: number): void {\n    this.resultCount = count;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example4.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"Angular"}
+{"framework":"angular","displayName":"Navigation ▸ Searching values · Custom callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example4-searching-values></example4-searching-values>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  selector: 'example4-searching-values',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          (keyup)=\"searchFieldKeyup($event)\"\n        />\n      </div>\n      <output class=\"console\" id=\"output\"> {{ resultCount }} results </output>\n    </div>\n\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n    search: {\n      // add your custom callback function\n      callback: (\n        _instance: Handsontable,\n        _row: number,\n        _col: number,\n        _value: Handsontable.CellValue,\n        result: boolean\n      ) => this.searchResultCounter(_instance, _row, _col, _value, result),\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  resultCount = 0;\n\n  searchFieldKeyup(event: KeyboardEvent): void {\n    this.setResultCounter(0);\n\n    const search = this.hotTable?.hotInstance?.getPlugin('search');\n    const queryResult = search?.query((event.target as any).value);\n\n    console.log(queryResult);\n\n    this.hotTable?.hotInstance?.render();\n  }\n\n  //  define your custom callback function\n  searchResultCounter(\n    _instance: Handsontable,\n    _row: number,\n    _col: number,\n    _value: Handsontable.CellValue,\n    result: boolean\n  ): void {\n    _instance.getCellMeta(_row, _col)['isSearchResult'] = result;\n    if (result) {\n      this.setResultCounter(this.resultCount + 1);\n    }\n  }\n\n  private setResultCounter(count: number): void {\n    this.resultCount = count;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/navigation/searching-values/angular/example4.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.js.json
index 65373315f..85b57447c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Searching values · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field');\n\n// add a search input listener\nsearchField.addEventListener('keyup', (event) => {\n  // get the `Search` plugin's instance\n  const search = hot.getPlugin('search');\n  // use the `Search` plugin's `query()` method\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example1.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Searching values · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field');\n\n// add a search input listener\nsearchField.addEventListener('keyup', (event) => {\n  // get the `Search` plugin's instance\n  const search = hot.getPlugin('search');\n  // use the `Search` plugin's `query()` method\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example1.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.ts.json
index 5955841f3..e50fc280e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Searching values · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field')!;\n\n// add a search input listener\nsearchField.addEventListener('keyup', (event) => {\n  // get the `Search` plugin's instance\n  const search: Search = hot.getPlugin('search');\n  // use the `Search` plugin's `query()` method\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example1.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Searching values · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field')!;\n\n// add a search input listener\nsearchField.addEventListener('keyup', (event) => {\n  // get the `Search` plugin's instance\n  const search: Search = hot.getPlugin('search');\n  // use the `Search` plugin's `query()` method\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example1.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.js.json
index d2c34a511..e7e800b97 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom search result class · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field2\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom CSS class\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field2');\n\nsearchField.addEventListener('keyup', (event) => {\n  const search = hot.getPlugin('search');\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n  hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/javascript/example2.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom search result class · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field2\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom CSS class\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field2');\n\nsearchField.addEventListener('keyup', (event) => {\n  const search = hot.getPlugin('search');\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n  hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/javascript/example2.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.ts.json
index 9794f7d63..e61e9bc8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom search result class · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field2\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom CSS class\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field2')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  const search: Search = hot.getPlugin('search');\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n  hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/javascript/example2.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom search result class · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field2\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom CSS class\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field2')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  const search: Search = hot.getPlugin('search');\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n  hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/javascript/example2.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.js.json
index d9420c8c6..6d061ecf6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom query method · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field3\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom query method\nfunction onlyExactMatch(queryStr, value) {\n  return queryStr.toString() === value.toString();\n}\n\nconst container = document.querySelector('#example3');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom query method\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field3');\n\nsearchField.addEventListener('keyup', (event) => {\n  const search = hot.getPlugin('search');\n  // use the `Search`'s `query()` method\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example3.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom query method · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field3\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom query method\nfunction onlyExactMatch(queryStr, value) {\n  return queryStr.toString() === value.toString();\n}\n\nconst container = document.querySelector('#example3');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom query method\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field3');\n\nsearchField.addEventListener('keyup', (event) => {\n  const search = hot.getPlugin('search');\n  // use the `Search`'s `query()` method\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example3.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.ts.json
index ffe8f158a..2973de4f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom query method · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field3\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom query method\nfunction onlyExactMatch(queryStr, value) {\n  return queryStr.toString() === value.toString();\n}\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom query method\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field3')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  const search: Search = hot.getPlugin('search');\n  // use the `Search`'s `query()` method\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example3.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom query method · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field3\" type=\"search\" placeholder=\"Search\">\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom query method\nfunction onlyExactMatch(queryStr, value) {\n  return queryStr.toString() === value.toString();\n}\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom query method\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field3')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  const search: Search = hot.getPlugin('search');\n  // use the `Search`'s `query()` method\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example3.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.js.json
index af06d7e10..808e6e41a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n      <div class=\"controls\">\n      <input id=\"search_field4\" type=\"search\" placeholder=\"Search\">\n    </div>\n    <output class=\"console\" id=\"output\">0 results</output>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet searchResultCount = 0;\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom callback function\nfunction searchResultCounter(instance, row, column, value, result) {\n  const DEFAULT_CALLBACK = function (instance, row, col, _data, testResult) {\n    instance.getCellMeta(row, col).isSearchResult = testResult;\n  };\n\n  DEFAULT_CALLBACK.apply(this, [instance, row, column, value, result]);\n\n  if (result) {\n    searchResultCount++;\n  }\n}\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom callback function\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field4');\nconst output = document.querySelector('#output');\n\nsearchField.addEventListener('keyup', (event) => {\n  searchResultCount = 0;\n\n  const search = hot.getPlugin('search');\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n  output.innerText = `${searchResultCount} results`;\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example4.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Navigation ▸ Searching values · Custom callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n      <div class=\"controls\">\n      <input id=\"search_field4\" type=\"search\" placeholder=\"Search\">\n    </div>\n    <output class=\"console\" id=\"output\">0 results</output>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet searchResultCount = 0;\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom callback function\nfunction searchResultCounter(instance, row, column, value, result) {\n  const DEFAULT_CALLBACK = function (instance, row, col, _data, testResult) {\n    instance.getCellMeta(row, col).isSearchResult = testResult;\n  };\n\n  DEFAULT_CALLBACK.apply(this, [instance, row, column, value, result]);\n\n  if (result) {\n    searchResultCount++;\n  }\n}\n\nconst container = document.querySelector('#example4');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom callback function\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field4');\nconst output = document.querySelector('#output');\n\nsearchField.addEventListener('keyup', (event) => {\n  searchResultCount = 0;\n\n  const search = hot.getPlugin('search');\n  const queryResult = search.query(event.target.value);\n\n  console.log(queryResult);\n  output.innerText = `${searchResultCount} results`;\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/searching-values/javascript/example4.js","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.ts.json
index 2df94a074..dd3688184 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n      <div class=\"controls\">\n      <input id=\"search_field4\" type=\"search\" placeholder=\"Search\">\n    </div>\n    <output class=\"console\" id=\"output\">0 results</output>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet searchResultCount = 0;\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom callback function\nfunction searchResultCounter(\n  instance: Handsontable.Core,\n  row: number,\n  column: number,\n  value: Handsontable.CellValue,\n  result: boolean\n): void {\n  const DEFAULT_CALLBACK = function (instance, row, col, _data, testResult) {\n    instance.getCellMeta(row, col).isSearchResult = testResult;\n  };\n\n  DEFAULT_CALLBACK.apply(this, [instance, row, column, value, result]);\n\n  if (result) {\n    searchResultCount++;\n  }\n}\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom callback function\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field4')!;\nconst output = document.querySelector('#output')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  searchResultCount = 0;\n\n  const search: Search = hot.getPlugin('search');\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n  (output as HTMLElement).innerText = `${searchResultCount} results`;\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example4.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Navigation ▸ Searching values · Custom callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n      <div class=\"controls\">\n      <input id=\"search_field4\" type=\"search\" placeholder=\"Search\">\n    </div>\n    <output class=\"console\" id=\"output\">0 results</output>\n  </div>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet searchResultCount = 0;\n\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\n// define your custom callback function\nfunction searchResultCounter(\n  instance: Handsontable.Core,\n  row: number,\n  column: number,\n  value: Handsontable.CellValue,\n  result: boolean\n): void {\n  const DEFAULT_CALLBACK = function (instance, row, col, _data, testResult) {\n    instance.getCellMeta(row, col).isSearchResult = testResult;\n  };\n\n  DEFAULT_CALLBACK.apply(this, [instance, row, column, value, result]);\n\n  if (result) {\n    searchResultCount++;\n  }\n}\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  // enable the `Search` plugin\n  search: {\n    // add your custom callback function\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchField = document.querySelector('#search_field4')!;\nconst output = document.querySelector('#output')!;\n\nsearchField.addEventListener('keyup', (event) => {\n  searchResultCount = 0;\n\n  const search: Search = hot.getPlugin('search');\n  const queryResult = search.query((event.target as HTMLInputElement).value);\n\n  console.log(queryResult);\n  (output as HTMLElement).innerText = `${searchResultCount} results`;\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/searching-values/javascript/example4.ts","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example1.tsx.json
index c3d0a3621..c6b2b1f46 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Searching values · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      // get the `Search` plugin's instance\n      const search = hot?.getPlugin('search');\n      // use the `Search` plugin's `query()` method\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(event) => searchFieldKeyupCallback(event)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        search={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example1.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Searching values · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      // get the `Search` plugin's instance\n      const search = hot?.getPlugin('search');\n      // use the `Search` plugin's `query()` method\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(event) => searchFieldKeyupCallback(event)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        search={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example1.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example2.tsx.json
index 545c50813..62208e591 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Searching values · Custom search result class · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      const search = hot?.getPlugin('search');\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field2\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(...args) => searchFieldKeyupCallback(...args)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom CSS class\n          searchResultClass: 'my-class',\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/react/example2.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Searching values · Custom search result class · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      const search = hot?.getPlugin('search');\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field2\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(...args) => searchFieldKeyupCallback(...args)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom CSS class\n          searchResultClass: 'my-class',\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/react/example2.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example3.tsx.json
index 427d9ecd8..9ff0e2717 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Searching values · Custom query method · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      const search = hot?.getPlugin('search');\n      // use the `Search`'s `query()` method\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  //  define your custom query method\n  function onlyExactMatch(queryStr: { toString: () => any }, value: { toString: () => any }) {\n    return queryStr.toString() === value.toString();\n  }\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field3\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(...args) => searchFieldKeyupCallback(...args)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom query method\n          queryMethod: onlyExactMatch,\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example3.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Searching values · Custom query method · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  const searchFieldKeyupCallback = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      const hot = hotRef.current?.hotInstance;\n      const search = hot?.getPlugin('search');\n      // use the `Search`'s `query()` method\n      const queryResult = search?.query(event.currentTarget.value);\n\n      console.log(queryResult);\n\n      hot?.render();\n    },\n    [hotRef.current]\n  );\n\n  //  define your custom query method\n  function onlyExactMatch(queryStr: { toString: () => any }, value: { toString: () => any }) {\n    return queryStr.toString() === value.toString();\n  }\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            id=\"search_field3\"\n            type=\"search\"\n            placeholder=\"Search\"\n            onKeyUp={(...args) => searchFieldKeyupCallback(...args)}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom query method\n          queryMethod: onlyExactMatch,\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example3.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example4.tsx.json
index d3edee698..a35789d23 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Navigation ▸ Searching values · Custom callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hot4Ref = useRef<HotTableRef>(null);\n  const [resultCount, setResultCounter] = useState(0);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  //  define your custom callback function\n  function searchResultCounter(\n    this: Handsontable,\n    _instance: Handsontable,\n    _row: number,\n    _col: number,\n    _value: any,\n    result: any\n  ) {\n    const DEFAULT_CALLBACK = function (instance: Handsontable, row: number, col: number, _data: any, testResult: any) {\n      instance.getCellMeta(row, col).isSearchResult = testResult;\n    };\n\n    DEFAULT_CALLBACK.apply(this, arguments as any);\n\n    if (result) {\n      setResultCounter((count) => count + 1);\n    }\n  }\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    setResultCounter(0);\n\n    const search = hot4Ref.current?.hotInstance?.getPlugin('search');\n    const queryResult = search?.query(event.currentTarget.value);\n\n    console.log(queryResult);\n\n    hot4Ref.current?.hotInstance?.render();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input id=\"search_field4\" type=\"search\" placeholder=\"Search\" onKeyUp={handleKeyUp} />\n        </div>\n        <output className=\"console\" id=\"output\">\n          {resultCount} results\n        </output>\n      </div>\n      <HotTable\n        ref={hot4Ref}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom callback function\n          callback: searchResultCounter,\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example4.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"React (TS)"}
+{"framework":"react","displayName":"Navigation ▸ Searching values · Custom callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hot4Ref = useRef<HotTableRef>(null);\n  const [resultCount, setResultCounter] = useState(0);\n\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008],\n    ['Helium', 'He', 2, 4.003],\n    ['Lithium', 'Li', 3, 6.94],\n    ['Beryllium', 'Be', 4, 9.012],\n    ['Boron', 'B', 5, 10.81],\n  ];\n\n  //  define your custom callback function\n  function searchResultCounter(\n    this: Handsontable,\n    _instance: Handsontable,\n    _row: number,\n    _col: number,\n    _value: any,\n    result: any\n  ) {\n    const DEFAULT_CALLBACK = function (instance: Handsontable, row: number, col: number, _data: any, testResult: any) {\n      instance.getCellMeta(row, col).isSearchResult = testResult;\n    };\n\n    DEFAULT_CALLBACK.apply(this, arguments as any);\n\n    if (result) {\n      setResultCounter((count) => count + 1);\n    }\n  }\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    setResultCounter(0);\n\n    const search = hot4Ref.current?.hotInstance?.getPlugin('search');\n    const queryResult = search?.query(event.currentTarget.value);\n\n    console.log(queryResult);\n\n    hot4Ref.current?.hotInstance?.render();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input id=\"search_field4\" type=\"search\" placeholder=\"Search\" onKeyUp={handleKeyUp} />\n        </div>\n        <output className=\"console\" id=\"output\">\n          {resultCount} results\n        </output>\n      </div>\n      <HotTable\n        ref={hot4Ref}\n        data={data}\n        colHeaders={['Name', 'Symbol', 'Atomic number', 'Atomic mass']}\n        // enable the `Search` plugin\n        search={{\n          // add your custom callback function\n          callback: searchResultCounter,\n        }}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/searching-values/react/example4.tsx","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example1.vue.json
index 0a6fe7058..99204e6e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Searching values · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example1.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Searching values · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example1.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/searching-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example2.vue.json
index d5e053a17..7e242681d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom search result class · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field2\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/vue/example2.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom search result class · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    searchResultClass: 'my-class',\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field2\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".ht-theme-main .handsontable .my-class {\n  background: pink;\n  color: red;\n}"},"docsPath":"guides/navigation/searching-values/vue/example2.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example2","exampleTitle":"Custom search result class","docPermalink":"/searching-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example3.vue.json
index cbaaf2975..60eb3e2f8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom query method · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nfunction onlyExactMatch(\n  queryStr: string | number | null | undefined,\n  value: string | number | null | undefined\n): boolean {\n  return queryStr?.toString() === value?.toString();\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example3.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom query method · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nfunction onlyExactMatch(\n  queryStr: string | number | null | undefined,\n  value: string | number | null | undefined\n): boolean {\n  return queryStr?.toString() === value?.toString();\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    queryMethod: onlyExactMatch,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field3\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example3.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example3","exampleTitle":"Custom query method","docPermalink":"/searching-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example4.vue.json
index 07524096c..52798cc67 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__navigation__searching-values__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst resultCount = ref(0);\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nfunction searchResultCounter(\n  instance: Handsontable,\n  row: number,\n  col: number,\n  _value: string | number | null,\n  testResult: boolean\n): void {\n  instance.getCellMeta(row, col).isSearchResult = testResult;\n\n  if (testResult) {\n    resultCount.value += 1;\n  }\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n\n  resultCount.value = 0;\n\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field4\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ resultCount }} results\n      </output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example4.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"Vue 3"}
+{"framework":"vue","displayName":"Navigation ▸ Searching values · Custom callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst resultCount = ref(0);\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008],\n  ['Helium', 'He', 2, 4.003],\n  ['Lithium', 'Li', 3, 6.94],\n  ['Beryllium', 'Be', 4, 9.012],\n  ['Boron', 'B', 5, 10.81],\n];\n\nfunction searchResultCounter(\n  instance: Handsontable,\n  row: number,\n  col: number,\n  _value: string | number | null,\n  testResult: boolean\n): void {\n  instance.getCellMeta(row, col).isSearchResult = testResult;\n\n  if (testResult) {\n    resultCount.value += 1;\n  }\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic number', 'Atomic mass'],\n  search: {\n    callback: searchResultCounter,\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction onSearchKeyUp(event: KeyboardEvent): void {\n  const target = event.currentTarget as HTMLInputElement;\n  const hot = hotRef.value?.hotInstance;\n\n  resultCount.value = 0;\n\n  const search = hot?.getPlugin('search');\n  const queryResult = search?.query(target.value);\n\n  console.log(queryResult);\n\n  hot?.render();\n}\n</script>\n\n<template>\n  <div id=\"example4\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field4\"\n          type=\"search\"\n          placeholder=\"Search\"\n          @keyup=\"onSearchKeyUp\"\n        >\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ resultCount }} results\n      </output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/navigation/searching-values/vue/example4.vue","breadcrumb":["Navigation","Searching values"],"guide":"guides/navigation/searching-values/searching-values.md","guideTitle":"Searching values","exampleId":"example4","exampleTitle":"Custom callback","docPermalink":"/searching-values","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__angular__example1.ts.json
index c54e1c6e1..a1326ec41 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Optimization ▸ Batch operations · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-batch-operation></example1-batch-operation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-batch-operation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"buttonWithout\"\n          class=\"button button--primary\"\n          (click)=\"buttonWithoutClick()\"\n        >\n          Run without batch method\n        </button>\n        <button\n          id=\"buttonWith\"\n          class=\"button button--primary\"\n          (click)=\"buttonWithClick()\"\n        >\n          Run with batch method\n        </button>\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ output || 'Here you will see the log' }}\n      </output>\n    </div>\n    <div>\n      <hot-table [data]=\"dataInit\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  dataInit = [\n    [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n    [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n    [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n    [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n    [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n    [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n    [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n    [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n    [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n    [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n  ];\n  data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n  data3 = [\n    [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n    [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n    [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    width: 'auto',\n    colHeaders: [\n      'ID',\n      'Customer name',\n      'Product name',\n      'Size',\n      'qty',\n      'Return',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output!: string;\n  counter = 0;\n\n  buttonWithoutClick(): void {\n    const t1 = performance.now();\n\n    this.alterTable();\n\n    const t2 = performance.now();\n\n    this.logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n  }\n\n  buttonWithClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const t1 = performance.now();\n\n    hot?.batch(() => this.alterTable());\n\n    const t2 = performance.now();\n\n    this.logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n  }\n\n  private alterTable(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.alter('insert_row_above', 10, 10);\n    hot?.alter('insert_col_start', 6, 1);\n    hot?.populateFromArray(10, 0, this.data2);\n    hot?.populateFromArray(11, 0, this.data3);\n    hot?.setCellMeta(2, 2, 'className', 'green-bg');\n    hot?.setCellMeta(4, 2, 'className', 'green-bg');\n    hot?.setCellMeta(5, 2, 'className', 'green-bg');\n    hot?.setCellMeta(6, 2, 'className', 'green-bg');\n    hot?.setCellMeta(8, 2, 'className', 'green-bg');\n    hot?.setCellMeta(9, 2, 'className', 'green-bg');\n    hot?.setCellMeta(10, 2, 'className', 'green-bg');\n    hot?.alter('remove_col', 6, 1);\n    hot?.alter('remove_row', 10, 10);\n    hot?.setCellMeta(0, 5, 'className', 'red-bg');\n    hot?.setCellMeta(10, 5, 'className', 'red-bg');\n    hot?.render(); // Render is needed here to populate the new \"className\"s\n  }\n\n  private logOutput(output: string): void {\n    this.output = `[${this.counter}] ${output}\\n${this.output ?? ''}`;\n    this.counter = this.counter + 1;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/optimization/batch-operations/angular/example1.ts","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"Angular"}
+{"framework":"angular","displayName":"Optimization ▸ Batch operations · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-batch-operation></example1-batch-operation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-batch-operation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button\n          id=\"buttonWithout\"\n          class=\"button button--primary\"\n          (click)=\"buttonWithoutClick()\"\n        >\n          Run without batch method\n        </button>\n        <button\n          id=\"buttonWith\"\n          class=\"button button--primary\"\n          (click)=\"buttonWithClick()\"\n        >\n          Run with batch method\n        </button>\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ output || 'Here you will see the log' }}\n      </output>\n    </div>\n    <div>\n      <hot-table [data]=\"dataInit\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  dataInit = [\n    [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n    [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n    [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n    [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n    [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n    [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n    [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n    [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n    [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n    [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n  ];\n  data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n  data3 = [\n    [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n    [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n    [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    width: 'auto',\n    colHeaders: [\n      'ID',\n      'Customer name',\n      'Product name',\n      'Size',\n      'qty',\n      'Return',\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  output!: string;\n  counter = 0;\n\n  buttonWithoutClick(): void {\n    const t1 = performance.now();\n\n    this.alterTable();\n\n    const t2 = performance.now();\n\n    this.logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n  }\n\n  buttonWithClick(): void {\n    const hot = this.hotTable?.hotInstance;\n    const t1 = performance.now();\n\n    hot?.batch(() => this.alterTable());\n\n    const t2 = performance.now();\n\n    this.logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n  }\n\n  private alterTable(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.alter('insert_row_above', 10, 10);\n    hot?.alter('insert_col_start', 6, 1);\n    hot?.populateFromArray(10, 0, this.data2);\n    hot?.populateFromArray(11, 0, this.data3);\n    hot?.setCellMeta(2, 2, 'className', 'green-bg');\n    hot?.setCellMeta(4, 2, 'className', 'green-bg');\n    hot?.setCellMeta(5, 2, 'className', 'green-bg');\n    hot?.setCellMeta(6, 2, 'className', 'green-bg');\n    hot?.setCellMeta(8, 2, 'className', 'green-bg');\n    hot?.setCellMeta(9, 2, 'className', 'green-bg');\n    hot?.setCellMeta(10, 2, 'className', 'green-bg');\n    hot?.alter('remove_col', 6, 1);\n    hot?.alter('remove_row', 10, 10);\n    hot?.setCellMeta(0, 5, 'className', 'red-bg');\n    hot?.setCellMeta(10, 5, 'className', 'red-bg');\n    hot?.render(); // Render is needed here to populate the new \"className\"s\n  }\n\n  private logOutput(output: string): void {\n    this.output = `[${this.counter}] ${output}\\n${this.output ?? ''}`;\n    this.counter = this.counter + 1;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/optimization/batch-operations/angular/example1.ts","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.js.json
index ebfc32ade..1597caab7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Optimization ▸ Batch operations · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"buttonWithout\" class=\"button button--primary\">Run without batch method</button>\n      <button id=\"buttonWith\" class=\"button button--primary\">Run with batch method</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst buttonWithout = document.querySelector('#buttonWithout');\nconst buttonWith = document.querySelector('#buttonWith');\nconst output = document.querySelector('#output');\nconst data1 = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\nconst data3 = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hot = new Handsontable(container, {\n  data: data1,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst alterTable = () => {\n  hot.alter('insert_row_above', 10, 10);\n  hot.alter('insert_col_start', 6, 1);\n  hot.populateFromArray(10, 0, data2);\n  hot.populateFromArray(11, 0, data3);\n  hot.setCellMeta(2, 2, 'className', 'green-bg');\n  hot.setCellMeta(4, 2, 'className', 'green-bg');\n  hot.setCellMeta(5, 2, 'className', 'green-bg');\n  hot.setCellMeta(6, 2, 'className', 'green-bg');\n  hot.setCellMeta(8, 2, 'className', 'green-bg');\n  hot.setCellMeta(9, 2, 'className', 'green-bg');\n  hot.setCellMeta(10, 2, 'className', 'green-bg');\n  hot.alter('remove_col', 6, 1);\n  hot.alter('remove_row', 10, 10);\n  hot.setCellMeta(0, 5, 'className', 'red-bg');\n  hot.setCellMeta(10, 5, 'className', 'red-bg');\n  hot.render(); // Render is needed here to populate the new \"className\"s\n};\n\nlet loggedText = '';\nlet counter = 0;\nconst logOutput = (msg) => {\n  counter++;\n  loggedText = `[${counter}] ${msg}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nbuttonWithout.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n});\nbuttonWith.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  hot.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/optimization/batch-operations/javascript/example1.js","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Optimization ▸ Batch operations · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"buttonWithout\" class=\"button button--primary\">Run without batch method</button>\n      <button id=\"buttonWith\" class=\"button button--primary\">Run with batch method</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst buttonWithout = document.querySelector('#buttonWithout');\nconst buttonWith = document.querySelector('#buttonWith');\nconst output = document.querySelector('#output');\nconst data1 = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\nconst data3 = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hot = new Handsontable(container, {\n  data: data1,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst alterTable = () => {\n  hot.alter('insert_row_above', 10, 10);\n  hot.alter('insert_col_start', 6, 1);\n  hot.populateFromArray(10, 0, data2);\n  hot.populateFromArray(11, 0, data3);\n  hot.setCellMeta(2, 2, 'className', 'green-bg');\n  hot.setCellMeta(4, 2, 'className', 'green-bg');\n  hot.setCellMeta(5, 2, 'className', 'green-bg');\n  hot.setCellMeta(6, 2, 'className', 'green-bg');\n  hot.setCellMeta(8, 2, 'className', 'green-bg');\n  hot.setCellMeta(9, 2, 'className', 'green-bg');\n  hot.setCellMeta(10, 2, 'className', 'green-bg');\n  hot.alter('remove_col', 6, 1);\n  hot.alter('remove_row', 10, 10);\n  hot.setCellMeta(0, 5, 'className', 'red-bg');\n  hot.setCellMeta(10, 5, 'className', 'red-bg');\n  hot.render(); // Render is needed here to populate the new \"className\"s\n};\n\nlet loggedText = '';\nlet counter = 0;\nconst logOutput = (msg) => {\n  counter++;\n  loggedText = `[${counter}] ${msg}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nbuttonWithout.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n});\nbuttonWith.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  hot.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/optimization/batch-operations/javascript/example1.js","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.ts.json
index a203aca68..4acfd7f24 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Optimization ▸ Batch operations · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"buttonWithout\" class=\"button button--primary\">Run without batch method</button>\n      <button id=\"buttonWith\" class=\"button button--primary\">Run with batch method</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst buttonWithout = document.querySelector('#buttonWithout')!;\nconst buttonWith = document.querySelector('#buttonWith')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst data1: (string | number)[][] = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2: (string | number)[][] = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n\nconst data3: (string | number)[][] = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hot = new Handsontable(container, {\n  data: data1,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst alterTable = () => {\n  hot.alter('insert_row_above', 10, 10);\n  hot.alter('insert_col_start', 6, 1);\n  hot.populateFromArray(10, 0, data2);\n  hot.populateFromArray(11, 0, data3);\n  hot.setCellMeta(2, 2, 'className', 'green-bg');\n  hot.setCellMeta(4, 2, 'className', 'green-bg');\n  hot.setCellMeta(5, 2, 'className', 'green-bg');\n  hot.setCellMeta(6, 2, 'className', 'green-bg');\n  hot.setCellMeta(8, 2, 'className', 'green-bg');\n  hot.setCellMeta(9, 2, 'className', 'green-bg');\n  hot.setCellMeta(10, 2, 'className', 'green-bg');\n  hot.alter('remove_col', 6, 1);\n  hot.alter('remove_row', 10, 10);\n  hot.setCellMeta(0, 5, 'className', 'red-bg');\n  hot.setCellMeta(10, 5, 'className', 'red-bg');\n  hot.render(); // Render is needed here to populate the new \"className\"s\n};\n\nlet loggedText = '';\nlet counter = 0;\n\nconst logOutput = (msg: string) => {\n  counter++;\n  loggedText = `[${counter}] ${msg}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nbuttonWithout.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n});\n\nbuttonWith.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  hot.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/optimization/batch-operations/javascript/example1.ts","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Optimization ▸ Batch operations · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"buttonWithout\" class=\"button button--primary\">Run without batch method</button>\n      <button id=\"buttonWith\" class=\"button button--primary\">Run with batch method</button>\n    </div>\n    <output class=\"console\" id=\"output\">Here you will see the log</output>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst buttonWithout = document.querySelector('#buttonWithout')!;\nconst buttonWith = document.querySelector('#buttonWith')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst data1: (string | number)[][] = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2: (string | number)[][] = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n\nconst data3: (string | number)[][] = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hot = new Handsontable(container, {\n  data: data1,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst alterTable = () => {\n  hot.alter('insert_row_above', 10, 10);\n  hot.alter('insert_col_start', 6, 1);\n  hot.populateFromArray(10, 0, data2);\n  hot.populateFromArray(11, 0, data3);\n  hot.setCellMeta(2, 2, 'className', 'green-bg');\n  hot.setCellMeta(4, 2, 'className', 'green-bg');\n  hot.setCellMeta(5, 2, 'className', 'green-bg');\n  hot.setCellMeta(6, 2, 'className', 'green-bg');\n  hot.setCellMeta(8, 2, 'className', 'green-bg');\n  hot.setCellMeta(9, 2, 'className', 'green-bg');\n  hot.setCellMeta(10, 2, 'className', 'green-bg');\n  hot.alter('remove_col', 6, 1);\n  hot.alter('remove_row', 10, 10);\n  hot.setCellMeta(0, 5, 'className', 'red-bg');\n  hot.setCellMeta(10, 5, 'className', 'red-bg');\n  hot.render(); // Render is needed here to populate the new \"className\"s\n};\n\nlet loggedText = '';\nlet counter = 0;\n\nconst logOutput = (msg: string) => {\n  counter++;\n  loggedText = `[${counter}] ${msg}\\n${loggedText}`;\n  output.innerText = loggedText;\n};\n\nbuttonWithout.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n});\n\nbuttonWith.addEventListener('click', () => {\n  const t1 = performance.now();\n\n  hot.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/optimization/batch-operations/javascript/example1.ts","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__react__example1.tsx.json
index de1e78678..0fbcca7b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Optimization ▸ Batch operations · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [counter, setCounter] = useState(0);\n  const [output, setOutput] = useState('');\n\n  const data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n  const data3 = [\n    [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n    [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n    [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n  ];\n\n  const logOutput = (msg: string) => {\n    setCounter(counter + 1);\n    setOutput(`[${counter}] ${msg}\\n${output}`);\n  };\n\n  const alterTable = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.alter('insert_row_above', 10, 10);\n    hot?.alter('insert_col_start', 6, 1);\n    hot?.populateFromArray(10, 0, data2);\n    hot?.populateFromArray(11, 0, data3);\n    hot?.setCellMeta(2, 2, 'className', 'green-bg');\n    hot?.setCellMeta(4, 2, 'className', 'green-bg');\n    hot?.setCellMeta(5, 2, 'className', 'green-bg');\n    hot?.setCellMeta(6, 2, 'className', 'green-bg');\n    hot?.setCellMeta(8, 2, 'className', 'green-bg');\n    hot?.setCellMeta(9, 2, 'className', 'green-bg');\n    hot?.setCellMeta(10, 2, 'className', 'green-bg');\n    hot?.alter('remove_col', 6, 1);\n    hot?.alter('remove_row', 10, 10);\n    hot?.setCellMeta(0, 5, 'className', 'red-bg');\n    hot?.setCellMeta(10, 5, 'className', 'red-bg');\n    hot?.render(); // Render is needed here to populate the new \"className\"s\n  };\n\n  const buttonWithoutClickCallback = () => {\n    const t1 = performance.now();\n\n    alterTable();\n\n    const t2 = performance.now();\n\n    logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n  };\n\n  const buttonWithClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const t1 = performance.now();\n\n    hot?.batch(alterTable);\n\n    const t2 = performance.now();\n\n    logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"buttonWithout\" className=\"button button--primary\" onClick={() => buttonWithoutClickCallback()}>\n            Run without batch method\n          </button>\n          <button id=\"buttonWith\" className=\"button button--primary\" onClick={() => buttonWithClickCallback()}>\n            Run with batch method\n          </button>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output || 'Here you will see the log'}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colHeaders={['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return']}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/optimization/batch-operations/react/example1.tsx","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"React (TS)"}
+{"framework":"react","displayName":"Optimization ▸ Batch operations · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [counter, setCounter] = useState(0);\n  const [output, setOutput] = useState('');\n\n  const data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\n  const data3 = [\n    [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n    [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n    [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n  ];\n\n  const logOutput = (msg: string) => {\n    setCounter(counter + 1);\n    setOutput(`[${counter}] ${msg}\\n${output}`);\n  };\n\n  const alterTable = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.alter('insert_row_above', 10, 10);\n    hot?.alter('insert_col_start', 6, 1);\n    hot?.populateFromArray(10, 0, data2);\n    hot?.populateFromArray(11, 0, data3);\n    hot?.setCellMeta(2, 2, 'className', 'green-bg');\n    hot?.setCellMeta(4, 2, 'className', 'green-bg');\n    hot?.setCellMeta(5, 2, 'className', 'green-bg');\n    hot?.setCellMeta(6, 2, 'className', 'green-bg');\n    hot?.setCellMeta(8, 2, 'className', 'green-bg');\n    hot?.setCellMeta(9, 2, 'className', 'green-bg');\n    hot?.setCellMeta(10, 2, 'className', 'green-bg');\n    hot?.alter('remove_col', 6, 1);\n    hot?.alter('remove_row', 10, 10);\n    hot?.setCellMeta(0, 5, 'className', 'red-bg');\n    hot?.setCellMeta(10, 5, 'className', 'red-bg');\n    hot?.render(); // Render is needed here to populate the new \"className\"s\n  };\n\n  const buttonWithoutClickCallback = () => {\n    const t1 = performance.now();\n\n    alterTable();\n\n    const t2 = performance.now();\n\n    logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n  };\n\n  const buttonWithClickCallback = () => {\n    const hot = hotRef.current?.hotInstance;\n    const t1 = performance.now();\n\n    hot?.batch(alterTable);\n\n    const t2 = performance.now();\n\n    logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button id=\"buttonWithout\" className=\"button button--primary\" onClick={() => buttonWithoutClickCallback()}>\n            Run without batch method\n          </button>\n          <button id=\"buttonWith\" className=\"button button--primary\" onClick={() => buttonWithClickCallback()}>\n            Run with batch method\n          </button>\n        </div>\n        <output className=\"console\" id=\"output\">\n          {output || 'Here you will see the log'}\n        </output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        width=\"auto\"\n        height=\"auto\"\n        colHeaders={['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return']}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/optimization/batch-operations/react/example1.tsx","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__vue__example1.vue.json
index fc2d1e8ef..46b1b4ce4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__optimization__batch-operations__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Optimization ▸ Batch operations · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst counter = ref(0);\nconst output = ref('');\n\nconst dataInit: GridSettings['data'] = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\nconst data3 = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: dataInit,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction logOutput(msg: string) {\n  counter.value += 1;\n  output.value = `[${counter.value}] ${msg}\\n${output.value}`;\n}\n\nfunction alterTable() {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.alter('insert_row_above', 10, 10);\n  hot?.alter('insert_col_start', 6, 1);\n  hot?.populateFromArray(10, 0, data2);\n  hot?.populateFromArray(11, 0, data3);\n  hot?.setCellMeta(2, 2, 'className', 'green-bg');\n  hot?.setCellMeta(4, 2, 'className', 'green-bg');\n  hot?.setCellMeta(5, 2, 'className', 'green-bg');\n  hot?.setCellMeta(6, 2, 'className', 'green-bg');\n  hot?.setCellMeta(8, 2, 'className', 'green-bg');\n  hot?.setCellMeta(9, 2, 'className', 'green-bg');\n  hot?.setCellMeta(10, 2, 'className', 'green-bg');\n  hot?.alter('remove_col', 6, 1);\n  hot?.alter('remove_row', 10, 10);\n  hot?.setCellMeta(0, 5, 'className', 'red-bg');\n  hot?.setCellMeta(10, 5, 'className', 'red-bg');\n  hot?.render();\n}\n\nfunction buttonWithoutClick() {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n}\n\nfunction buttonWithClick() {\n  const hot = hotRef.value?.hotInstance;\n  const t1 = performance.now();\n\n  hot?.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"buttonWithout\" class=\"button button--primary\" @click=\"buttonWithoutClick\">\n          Run without batch method\n        </button>\n        <button id=\"buttonWith\" class=\"button button--primary\" @click=\"buttonWithClick\">\n          Run with batch method\n        </button>\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ output || 'Here you will see the log' }}\n      </output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/optimization/batch-operations/vue/example1.vue","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"Vue 3"}
+{"framework":"vue","displayName":"Optimization ▸ Batch operations · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst counter = ref(0);\nconst output = ref('');\n\nconst dataInit: GridSettings['data'] = [\n  [1, 'Gary Nash', 'Speckled trousers', 'S', 1, 'yes'],\n  [2, 'Gloria Brown', '100% Stainless sweater', 'M', 2, 'no'],\n  [3, 'Ronald Carver', 'Sunny T-shirt', 'S', 1, 'no'],\n  [4, 'Samuel Watkins', 'Floppy socks', 'S', 3, 'no'],\n  [5, 'Stephanie Huddart', 'Bushy-bush cap', 'XXL', 1, 'no'],\n  [6, 'Madeline McGillivray', 'Long skirt', 'L', 1, 'no'],\n  [7, 'Jai Moor', 'Happy dress', 'XS', 1, 'no'],\n  [8, 'Ben Lower', 'Speckled trousers', 'M', 1, 'no'],\n  [9, 'Ali Tunbridge', 'Speckled trousers', 'M', 2, 'no'],\n  [10, 'Archie Galvin', 'Regular shades', 'uni', 10, 'no'],\n];\n\nconst data2 = [[11, 'Gavin Elle', 'Floppy socks', 'XS', 3, 'yes']];\nconst data3 = [\n  [12, 'Gary Erre', 'Happy dress', 'M', 1, 'no'],\n  [13, 'Anna Moon', 'Unicorn shades', 'uni', 200, 'no'],\n  [14, 'Elise Eli', 'Regular shades', 'uni', 1, 'no'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: dataInit,\n  width: 'auto',\n  height: 'auto',\n  colHeaders: ['ID', 'Customer name', 'Product name', 'Size', 'qty', 'Return'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction logOutput(msg: string) {\n  counter.value += 1;\n  output.value = `[${counter.value}] ${msg}\\n${output.value}`;\n}\n\nfunction alterTable() {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.alter('insert_row_above', 10, 10);\n  hot?.alter('insert_col_start', 6, 1);\n  hot?.populateFromArray(10, 0, data2);\n  hot?.populateFromArray(11, 0, data3);\n  hot?.setCellMeta(2, 2, 'className', 'green-bg');\n  hot?.setCellMeta(4, 2, 'className', 'green-bg');\n  hot?.setCellMeta(5, 2, 'className', 'green-bg');\n  hot?.setCellMeta(6, 2, 'className', 'green-bg');\n  hot?.setCellMeta(8, 2, 'className', 'green-bg');\n  hot?.setCellMeta(9, 2, 'className', 'green-bg');\n  hot?.setCellMeta(10, 2, 'className', 'green-bg');\n  hot?.alter('remove_col', 6, 1);\n  hot?.alter('remove_row', 10, 10);\n  hot?.setCellMeta(0, 5, 'className', 'red-bg');\n  hot?.setCellMeta(10, 5, 'className', 'red-bg');\n  hot?.render();\n}\n\nfunction buttonWithoutClick() {\n  const t1 = performance.now();\n\n  alterTable();\n\n  const t2 = performance.now();\n\n  logOutput(`Time without batch ${(t2 - t1).toFixed(2)}ms`);\n}\n\nfunction buttonWithClick() {\n  const hot = hotRef.value?.hotInstance;\n  const t1 = performance.now();\n\n  hot?.batch(alterTable);\n\n  const t2 = performance.now();\n\n  logOutput(`Time with batch ${(t2 - t1).toFixed(2)}ms`);\n}\n</script>\n\n<template>\n  <div id=\"example1\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button id=\"buttonWithout\" class=\"button button--primary\" @click=\"buttonWithoutClick\">\n          Run without batch method\n        </button>\n        <button id=\"buttonWith\" class=\"button button--primary\" @click=\"buttonWithClick\">\n          Run with batch method\n        </button>\n      </div>\n      <output class=\"console\" id=\"output\">\n        {{ output || 'Here you will see the log' }}\n      </output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/optimization/batch-operations/vue/example1.vue","breadcrumb":["Optimization","Batch operations"],"guide":"guides/optimization/batch-operations/batch-operations.md","guideTitle":"Batch operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/batch-operations","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__angular__example1.ts.json
index 5925df2b1..beb4133bb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedRowsTop: 2,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-freezing/angular/example1.ts","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = new Array(100) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(50) // number of columns\n        .fill(null)\n        .map((_, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    fixedRowsTop: 2,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-freezing/angular/example1.ts","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.js.json
index 946da1958..4f669b92b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-freezing/javascript/example1.js","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-freezing/javascript/example1.js","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.ts.json
index f893d977c..5c4374418 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-freezing/javascript/example1.ts","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-freezing/javascript/example1.ts","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__react__example1.tsx.json
index ac16657aa..23d594ffd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(0)\n  .map((_item, row) =>\n    new Array(50) // number of columns\n      .fill(0)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedRowsTop={2}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-freezing/react/example1.tsx","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n  .fill(0)\n  .map((_item, row) =>\n    new Array(50) // number of columns\n      .fill(0)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      fixedRowsTop={2}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-freezing/react/example1.tsx","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__vue__example1.vue.json
index 03b7811d1..a1e5d6aad 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-freezing__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-freezing/vue/example1.vue","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(50) // number of columns\n      .fill(null)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  fixedRowsTop: 2,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-freezing/vue/example1.vue","breadcrumb":["Rows","Row freezing"],"guide":"guides/rows/row-freezing/row-freezing.md","guideTitle":"Row freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-freezing","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example1.ts.json
index 24fdc9898..bf437eac8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    manualRowMove: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    this.hotData = this.generateData();\n  }\n\n  // Generate an array of arrays with a dummy data\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    if (additionalRows) {\n      array2d.push([]);\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example1.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n\n  hotData: number[][] = [];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    contextMenu: true,\n    manualRowMove: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngOnInit() {\n    this.hotData = this.generateData();\n  }\n\n  // Generate an array of arrays with a dummy data\n  private generateData = (rows = 3, columns = 7, additionalRows = true) => {\n    let counter = 0;\n    const array2d = [...new Array(rows)].map((_) =>\n      [...new Array(columns)].map((_) => counter++)\n    );\n\n    if (additionalRows) {\n      array2d.push([]);\n      array2d.push([]);\n    }\n\n    return array2d;\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example1.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example2.ts.json
index 9ad0717c5..7315c65ea 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n    rowHeaderWidth: 80,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n    rowHeaderWidth: 80,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example3.ts.json
index be726b941..5fde0be3d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders(index: number) {\n      return `Row ${index + 1}`;\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders(index: number) {\n      return `Row ${index + 1}`;\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example4.ts.json
index 5578e8928..a1faf16e7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row headers · Size the header to its content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: [\n      'Revenue',\n      'Cost of goods sold',\n      'Gross profit',\n      'Operating expenses',\n      'Operating income',\n      'Net income',\n    ],\n    // Size the row header column to its longest label.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example4.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row headers · Size the header to its content · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: [\n      'Revenue',\n      'Cost of goods sold',\n      'Gross profit',\n      'Operating expenses',\n      'Operating income',\n      'Net income',\n    ],\n    // Size the row header column to its longest label.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example4.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example5.ts.json
index bb635c096..b345dce67 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row headers · Add more row header columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ];\n\n  readonly groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\n\n  readonly lineItems = [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: true,\n    // Add two more row header columns next to the numbering.\n    afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n      // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n      renderers.push((renderableRowIndex, TH) => {\n        TH.innerText = this.groups[renderableRowIndex];\n      });\n      renderers.push((renderableRowIndex, TH) => {\n        TH.innerText = this.lineItems[renderableRowIndex];\n      });\n    },\n    // Measure each of the three row header columns on its own.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example5.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row headers · Add more row header columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ];\n\n  readonly groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\n\n  readonly lineItems = [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: true,\n    // Add two more row header columns next to the numbering.\n    afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n      // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n      renderers.push((renderableRowIndex, TH) => {\n        TH.innerText = this.groups[renderableRowIndex];\n      });\n      renderers.push((renderableRowIndex, TH) => {\n        TH.innerText = this.lineItems[renderableRowIndex];\n      });\n    },\n    // Measure each of the three row header columns on its own.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-header/angular/example5.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.js.json
index a8d8c0be3..90b356e59 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row headers · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example1.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row headers · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example1.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.ts.json
index ac9a4bd7b..e1934d929 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row headers · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example1.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row headers · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example1.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.js.json
index bc806b606..0d99eb487 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        [42000, 31000, 11000],\n        [45500, 33200, 12300],\n        [48700, 35100, 13600],\n        [51200, 36800, 14400],\n        [54800, 38900, 15900],\n        [57300, 40100, 17200],\n    ],\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n    rowHeaderWidth: 80,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example2.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        [42000, 31000, 11000],\n        [45500, 33200, 12300],\n        [48700, 35100, 13600],\n        [51200, 36800, 14400],\n        [54800, 38900, 15900],\n        [57300, 40100, 17200],\n    ],\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n    rowHeaderWidth: 80,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example2.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.ts.json
index 7ce813e5b..f4f0ed1d7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n  rowHeaderWidth: 80,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n  rowHeaderWidth: 80,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.js.json
index 2e77744b3..f935e2605 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        [42000, 31000, 11000],\n        [45500, 33200, 12300],\n        [48700, 35100, 13600],\n        [51200, 36800, 14400],\n        [54800, 38900, 15900],\n        [57300, 40100, 17200],\n    ],\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders(index) {\n        return `Row ${index + 1}`;\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example3.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        [42000, 31000, 11000],\n        [45500, 33200, 12300],\n        [48700, 35100, 13600],\n        [51200, 36800, 14400],\n        [54800, 38900, 15900],\n        [57300, 40100, 17200],\n    ],\n    colHeaders: ['Revenue', 'Expenses', 'Profit'],\n    rowHeaders(index) {\n        return `Row ${index + 1}`;\n    },\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example3.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.ts.json
index 91659fe35..0b25dabf2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders(index) {\n    return `Row ${index + 1}`;\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders(index) {\n    return `Row ${index + 1}`;\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.js.json
index b9a6ab4cd..ef7e72216 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row headers · Size the header to its content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        [42000, 45500, 48700, 51200],\n        [18300, 19100, 20400, 21600],\n        [23700, 26400, 28300, 29600],\n        [9800, 10200, 11100, 11700],\n        [13900, 16200, 17200, 17900],\n        [11200, 13100, 13900, 14500],\n    ],\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: [\n        'Revenue',\n        'Cost of goods sold',\n        'Gross profit',\n        'Operating expenses',\n        'Operating income',\n        'Net income',\n    ],\n    // Size the row header column to its longest label.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example4.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row headers · Size the header to its content · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        [42000, 45500, 48700, 51200],\n        [18300, 19100, 20400, 21600],\n        [23700, 26400, 28300, 29600],\n        [9800, 10200, 11100, 11700],\n        [13900, 16200, 17200, 17900],\n        [11200, 13100, 13900, 14500],\n    ],\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: [\n        'Revenue',\n        'Cost of goods sold',\n        'Gross profit',\n        'Operating expenses',\n        'Operating income',\n        'Net income',\n    ],\n    // Size the row header column to its longest label.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example4.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.ts.json
index ca89d5b3a..12fba4e56 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row headers · Size the header to its content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ],\n  // Size the row header column to its longest label.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example4.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row headers · Size the header to its content · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ],\n  // Size the row header column to its longest label.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example4.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.js.json
index 3c60fb75b..1323f1499 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row headers · Add more row header columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n];\nnew Handsontable(container, {\n    data: [\n        [42000, 45500, 48700, 51200],\n        [18300, 19100, 20400, 21600],\n        [23700, 26400, 28300, 29600],\n        [9800, 10200, 11100, 11700],\n        [13900, 16200, 17200, 17900],\n        [11200, 13100, 13900, 14500],\n    ],\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: true,\n    // Add two more row header columns next to the numbering.\n    afterGetRowHeaderRenderers: (renderers) => {\n        // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n        renderers.push((renderableRowIndex, TH) => {\n            TH.innerText = groups[renderableRowIndex];\n        });\n        renderers.push((renderableRowIndex, TH) => {\n            TH.innerText = lineItems[renderableRowIndex];\n        });\n    },\n    // Measure each of the three row header columns on its own.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example5.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row headers · Add more row header columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n];\nnew Handsontable(container, {\n    data: [\n        [42000, 45500, 48700, 51200],\n        [18300, 19100, 20400, 21600],\n        [23700, 26400, 28300, 29600],\n        [9800, 10200, 11100, 11700],\n        [13900, 16200, 17200, 17900],\n        [11200, 13100, 13900, 14500],\n    ],\n    colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n    rowHeaders: true,\n    // Add two more row header columns next to the numbering.\n    afterGetRowHeaderRenderers: (renderers) => {\n        // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n        renderers.push((renderableRowIndex, TH) => {\n            TH.innerText = groups[renderableRowIndex];\n        });\n        renderers.push((renderableRowIndex, TH) => {\n            TH.innerText = lineItems[renderableRowIndex];\n        });\n    },\n    // Measure each of the three row header columns on its own.\n    autoRowHeaderSize: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example5.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.ts.json
index 5a661eddc..68f7f14ca 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row headers · Add more row header columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nnew Handsontable(container, {\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: true,\n  // Add two more row header columns next to the numbering.\n  afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n    // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = groups[renderableRowIndex];\n    });\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = lineItems[renderableRowIndex];\n    });\n  },\n  // Measure each of the three row header columns on its own.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example5.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row headers · Add more row header columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nnew Handsontable(container, {\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: true,\n  // Add two more row header columns next to the numbering.\n  afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n    // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = groups[renderableRowIndex];\n    });\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = lineItems[renderableRowIndex];\n    });\n  },\n  // Measure each of the three row header columns on its own.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example5.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example1.tsx.json
index f4c55af2b..16905b3c0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row headers · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData();\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      contextMenu={true}\n      manualRowMove={true}\n      bindRowsWithHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example1.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row headers · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n//  Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst data = generateData();\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      contextMenu={true}\n      manualRowMove={true}\n      bindRowsWithHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example1.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example2.tsx.json
index e5d846663..eec31d6d3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 31000, 11000],\n  [45500, 33200, 12300],\n  [48700, 35100, 13600],\n  [51200, 36800, 14400],\n  [54800, 38900, 15900],\n  [57300, 40100, 17200],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Revenue', 'Expenses', 'Profit']}\n      rowHeaders={['January', 'February', 'March', 'April', 'May', 'June']}\n      rowHeaderWidth={80}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example2.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 31000, 11000],\n  [45500, 33200, 12300],\n  [48700, 35100, 13600],\n  [51200, 36800, 14400],\n  [54800, 38900, 15900],\n  [57300, 40100, 17200],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Revenue', 'Expenses', 'Profit']}\n      rowHeaders={['January', 'February', 'March', 'April', 'May', 'June']}\n      rowHeaderWidth={80}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example2.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example3.tsx.json
index 1bd1051d9..d0604cc2d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 31000, 11000],\n  [45500, 33200, 12300],\n  [48700, 35100, 13600],\n  [51200, 36800, 14400],\n  [54800, 38900, 15900],\n  [57300, 40100, 17200],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Revenue', 'Expenses', 'Profit']}\n      rowHeaders={(index) => {\n        return `Row ${index + 1}`;\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example3.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 31000, 11000],\n  [45500, 33200, 12300],\n  [48700, 35100, 13600],\n  [51200, 36800, 14400],\n  [54800, 38900, 15900],\n  [57300, 40100, 17200],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Revenue', 'Expenses', 'Profit']}\n      rowHeaders={(index) => {\n        return `Row ${index + 1}`;\n      }}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example3.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example4.tsx.json
index c30eb4b94..cdaeca4bd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row headers · Size the header to its content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 45500, 48700, 51200],\n  [18300, 19100, 20400, 21600],\n  [23700, 26400, 28300, 29600],\n  [9800, 10200, 11100, 11700],\n  [13900, 16200, 17200, 17900],\n  [11200, 13100, 13900, 14500],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Q1', 'Q2', 'Q3', 'Q4']}\n      rowHeaders={[\n        'Revenue',\n        'Cost of goods sold',\n        'Gross profit',\n        'Operating expenses',\n        'Operating income',\n        'Net income',\n      ]}\n      // Size the row header column to its longest label.\n      autoRowHeaderSize={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example4.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row headers · Size the header to its content · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  [42000, 45500, 48700, 51200],\n  [18300, 19100, 20400, 21600],\n  [23700, 26400, 28300, 29600],\n  [9800, 10200, 11100, 11700],\n  [13900, 16200, 17200, 17900],\n  [11200, 13100, 13900, 14500],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Q1', 'Q2', 'Q3', 'Q4']}\n      rowHeaders={[\n        'Revenue',\n        'Cost of goods sold',\n        'Gross profit',\n        'Operating expenses',\n        'Operating income',\n        'Net income',\n      ]}\n      // Size the row header column to its longest label.\n      autoRowHeaderSize={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example4.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example5.tsx.json
index b9211cb9a..02501b9ac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row headers · Add more row header columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nconst data = [\n  [42000, 45500, 48700, 51200],\n  [18300, 19100, 20400, 21600],\n  [23700, 26400, 28300, 29600],\n  [9800, 10200, 11100, 11700],\n  [13900, 16200, 17200, 17900],\n  [11200, 13100, 13900, 14500],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Q1', 'Q2', 'Q3', 'Q4']}\n      rowHeaders={true}\n      // Add two more row header columns next to the numbering.\n      afterGetRowHeaderRenderers={(renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n        // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n        renderers.push((renderableRowIndex, TH) => {\n          TH.innerText = groups[renderableRowIndex];\n        });\n        renderers.push((renderableRowIndex, TH) => {\n          TH.innerText = lineItems[renderableRowIndex];\n        });\n      }}\n      // Measure each of the three row header columns on its own.\n      autoRowHeaderSize={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example5.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row headers · Add more row header columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nconst data = [\n  [42000, 45500, 48700, 51200],\n  [18300, 19100, 20400, 21600],\n  [23700, 26400, 28300, 29600],\n  [9800, 10200, 11100, 11700],\n  [13900, 16200, 17200, 17900],\n  [11200, 13100, 13900, 14500],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Q1', 'Q2', 'Q3', 'Q4']}\n      rowHeaders={true}\n      // Add two more row header columns next to the numbering.\n      afterGetRowHeaderRenderers={(renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n        // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n        renderers.push((renderableRowIndex, TH) => {\n          TH.innerText = groups[renderableRowIndex];\n        });\n        renderers.push((renderableRowIndex, TH) => {\n          TH.innerText = lineItems[renderableRowIndex];\n        });\n      }}\n      // Measure each of the three row header columns on its own.\n      autoRowHeaderSize={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example5.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example1.vue.json
index 2674cd913..f3de426e6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row headers · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example1.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row headers · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// Generate an array of arrays with a dummy data\nconst generateData = (rows = 3, columns = 7, additionalRows = true) => {\n  let counter = 0;\n\n  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));\n\n  if (additionalRows) {\n    array2d.push([]);\n    array2d.push([]);\n  }\n\n  return array2d;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: generateData(),\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  contextMenu: true,\n  manualRowMove: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example1.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example2.vue.json
index 57f780bbc..37d97bf6c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n  rowHeaderWidth: 80,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example2.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n  rowHeaderWidth: 80,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example2.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example3.vue.json
index 976c4ab9e..9fae8a90b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: (index) => {\n    return `Row ${index + 1}`;\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example3.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 31000, 11000],\n    [45500, 33200, 12300],\n    [48700, 35100, 13600],\n    [51200, 36800, 14400],\n    [54800, 38900, 15900],\n    [57300, 40100, 17200],\n  ],\n  colHeaders: ['Revenue', 'Expenses', 'Profit'],\n  rowHeaders: (index) => {\n    return `Row ${index + 1}`;\n  },\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example3.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example4.vue.json
index 1087bd5fd..fe73ece50 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row headers · Size the header to its content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ],\n  // Size the row header column to its longest label.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example4.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row headers · Size the header to its content · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: [\n    'Revenue',\n    'Cost of goods sold',\n    'Gross profit',\n    'Operating expenses',\n    'Operating income',\n    'Net income',\n  ],\n  // Size the row header column to its longest label.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example4.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example4","exampleTitle":"Size the header to its content","docPermalink":"/row-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example5.vue.json
index 7f21cd5af..7735abc9f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-header__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row headers · Add more row header columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: true,\n  // Add two more row header columns next to the numbering.\n  afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n    // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = groups[renderableRowIndex];\n    });\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = lineItems[renderableRowIndex];\n    });\n  },\n  // Measure each of the three row header columns on its own.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example5.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row headers · Add more row header columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst groups = ['Top line', 'Direct costs', 'Margin', 'Overhead', 'Margin', 'Bottom line'];\nconst lineItems = [\n  'Revenue',\n  'Cost of goods sold',\n  'Gross profit',\n  'Operating expenses',\n  'Operating income',\n  'Net income',\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    [42000, 45500, 48700, 51200],\n    [18300, 19100, 20400, 21600],\n    [23700, 26400, 28300, 29600],\n    [9800, 10200, 11100, 11700],\n    [13900, 16200, 17200, 17900],\n    [11200, 13100, 13900, 14500],\n  ],\n  colHeaders: ['Q1', 'Q2', 'Q3', 'Q4'],\n  rowHeaders: true,\n  // Add two more row header columns next to the numbering.\n  afterGetRowHeaderRenderers: (renderers: Array<(renderableRowIndex: number, TH: HTMLElement) => void>) => {\n    // A renderer gets the renderable row index. It matches the visual index when no rows are hidden.\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = groups[renderableRowIndex];\n    });\n    renderers.push((renderableRowIndex, TH) => {\n      TH.innerText = lineItems[renderableRowIndex];\n    });\n  },\n  // Measure each of the three row header columns on its own.\n  autoRowHeaderSize: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-header/vue/example5.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example5","exampleTitle":"Add more row header columns","docPermalink":"/row-header","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example1.ts.json
index 136e566ca..7de61c039 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row heights · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example1.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row heights · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example1.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example2.ts.json
index aa7c304b8..8f2ad691d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row heights · Set row heights with an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: [40, 40, 40, 40],\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example2.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row heights · Set row heights with an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: [40, 40, 40, 40],\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example2.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example3.ts.json
index fec61f0b5..800a67ffe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row heights · Set row heights with a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights(index: number) {\n      return (index + 1) * 20;\n    },\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example3.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row heights · Set row heights with a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights(index: number) {\n      return (index + 1) * 20;\n    },\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example3.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example4.ts.json
index 7b0303708..0090e065e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row heights · Adjust row heights manually · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example4.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row heights · Adjust row heights manually · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example4.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example5.ts.json
new file mode 100644
index 000000000..38580b939
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__angular__example5.ts.json
@@ -0,0 +1 @@
+{"framework":"angular","displayName":"Rows ▸ Row heights · Limit the number of lines in a cell · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Ships in recyclable packaging. Harbor Goods needs ten days to restock this item, so order early.'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Available in black and silver. The silver version is on backorder until the end of the month.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Assembly required. Cascade Distributors includes a hex key and a printed guide in the box.'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'In stock.'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Note'],\n    colWidths: [100, 190, 170, 220],\n    columns: [\n      {},\n      {},\n      {},\n      // show two lines of the note and end the second one with an ellipsis\n      { textEllipsis: 2 },\n    ],\n    width: '100%',\n    height: 'auto',\n    rowHeaders: true,\n    autoRowSize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-height/angular/example5.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example5","exampleTitle":"Limit the number of lines in a cell","docPermalink":"/row-height","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.js.json
index 349f87536..8909b8fbd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row heights · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example1.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row heights · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example1.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.ts.json
index 6d115742e..a0c23ad35 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row heights · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example1.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row heights · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example1.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.js.json
index d790e0980..ae1b5dd0c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row heights · Set row heights with an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ],\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: [40, 40, 40, 40],\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example2.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row heights · Set row heights with an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ],\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: [40, 40, 40, 40],\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example2.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.ts.json
index fffa60522..4f8183407 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row heights · Set row heights with an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: [40, 40, 40, 40],\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example2.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row heights · Set row heights with an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: [40, 40, 40, 40],\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example2.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.js.json
index 7af0f1f80..173321e26 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row heights · Set row heights with a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ],\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights(index) {\n        return (index + 1) * 20;\n    },\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example3.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row heights · Set row heights with a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ],\n    width: '100%',\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights(index) {\n        return (index + 1) * 20;\n    },\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example3.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.ts.json
index ca4f81e63..f98763ede 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row heights · Set row heights with a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container!, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights(index) {\n    return (index + 1) * 20;\n  },\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example3.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row heights · Set row heights with a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container!, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights(index) {\n    return (index + 1) * 20;\n  },\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example3.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.js.json
index 339edff87..191baa2c2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row heights · Adjust row heights manually · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example4.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row heights · Adjust row heights manually · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    minRowHeights: 40,\n    manualRowResize: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example4.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.ts.json
index 01b82eeea..e1ddca689 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row heights · Adjust row heights manually · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example4.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row heights · Adjust row heights manually · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example4.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.js.json
new file mode 100644
index 000000000..9c260f86d
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.js.json
@@ -0,0 +1 @@
+{"framework":"javascript","displayName":"Rows ▸ Row heights · Limit the number of lines in a cell · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n  data: [\n    [\n      'SKU-4821',\n      'Stainless Steel Water Bottle',\n      'Harbor Goods',\n      'Ships in recyclable packaging. Harbor Goods needs ten days to restock this item, so order early.',\n    ],\n    [\n      'SKU-0093',\n      'Wireless Mouse',\n      'Alpine Supply Co.',\n      'Available in black and silver. The silver version is on backorder until the end of the month.',\n    ],\n    [\n      'SKU-1170',\n      'Ergonomic Office Chair',\n      'Cascade Distributors',\n      'Assembly required. Cascade Distributors includes a hex key and a printed guide in the box.',\n    ],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'In stock.'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Note'],\n  colWidths: [100, 190, 170, 220],\n  columns: [\n    {},\n    {},\n    {},\n    // show two lines of the note and end the second one with an ellipsis\n    { textEllipsis: 2 },\n  ],\n  width: '100%',\n  height: 'auto',\n  rowHeaders: true,\n  autoRowSize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-height/javascript/example5.js","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example5","exampleTitle":"Limit the number of lines in a cell","docPermalink":"/row-height","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.ts.json
new file mode 100644
index 000000000..d15987db3
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__javascript__example5.ts.json
@@ -0,0 +1 @@
+{"framework":"typescript","displayName":"Rows ▸ Row heights · Limit the number of lines in a cell · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Ships in recyclable packaging. Harbor Goods needs ten days to restock this item, so order early.'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Available in black and silver. The silver version is on backorder until the end of the month.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Assembly required. Cascade Distributors includes a hex key and a printed guide in the box.'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'In stock.'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Note'],\n  colWidths: [100, 190, 170, 220],\n  columns: [\n    {},\n    {},\n    {},\n    // show two lines of the note and end the second one with an ellipsis\n    { textEllipsis: 2 },\n  ],\n  width: '100%',\n  height: 'auto',\n  rowHeaders: true,\n  autoRowSize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-height/javascript/example5.ts","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example5","exampleTitle":"Limit the number of lines in a cell","docPermalink":"/row-height","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example1.tsx.json
index e8837ab0d..fcaa5e696 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row heights · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={40}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example1.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row heights · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={40}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example1.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example2.tsx.json
index fd2bc17d9..145d2650a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row heights · Set row heights with an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={[40, 40, 40, 40]}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example2.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row heights · Set row heights with an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={[40, 40, 40, 40]}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example2.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example3.tsx.json
index 94b430dbc..b7948a845 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row heights · Set row heights with a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={function (index: number) {\n        return (index + 1) * 20;\n      }}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example3.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row heights · Set row heights with a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={function (index: number) {\n        return (index + 1) * 20;\n      }}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example3.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example4.tsx.json
index b56dffc02..f59c1c432 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row heights · Adjust row heights manually · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={40}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example4.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row heights · Adjust row heights manually · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      minRowHeights={40}\n      manualRowResize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example4.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example5.tsx.json
new file mode 100644
index 000000000..1617d6639
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__react__example5.tsx.json
@@ -0,0 +1 @@
+{"framework":"react","displayName":"Rows ▸ Row heights · Limit the number of lines in a cell · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Ships in recyclable packaging. Harbor Goods needs ten days to restock this item, so order early.'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Available in black and silver. The silver version is on backorder until the end of the month.'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Assembly required. Cascade Distributors includes a hex key and a printed guide in the box.'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'In stock.'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Product', 'Supplier', 'Note']}\n      colWidths={[100, 190, 170, 220]}\n      columns={[\n        {},\n        {},\n        {},\n        // show two lines of the note and end the second one with an ellipsis\n        { textEllipsis: 2 },\n      ]}\n      width=\"100%\"\n      height=\"auto\"\n      rowHeaders={true}\n      autoRowSize={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-height/react/example5.tsx","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example5","exampleTitle":"Limit the number of lines in a cell","docPermalink":"/row-height","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example1.vue.json
index 2a4628c90..6b7e309ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row heights · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example1.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row heights · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example1.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-height","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example2.vue.json
index f58a646bc..aa7b8d0da 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row heights · Set row heights with an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: [40, 40, 40, 40],\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example2.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row heights · Set row heights with an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: [40, 40, 40, 40],\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example2.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example2","exampleTitle":"Set row heights with an array","docPermalink":"/row-height","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example3.vue.json
index 0d5af93ce..dc06eced0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row heights · Set row heights with a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights(index: number) {\n    return (index + 1) * 20;\n  },\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example3.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row heights · Set row heights with a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ],\n  width: '100%',\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights(index: number) {\n    return (index + 1) * 20;\n  },\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example3.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example3","exampleTitle":"Set row heights with a function","docPermalink":"/row-height","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example4.vue.json
index 19ba8719c..e3ff82e46 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row heights · Adjust row heights manually · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example4.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row heights · Adjust row heights manually · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  minRowHeights: 40,\n  manualRowResize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example4.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example4","exampleTitle":"Adjust row heights manually","docPermalink":"/row-height","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example5.vue.json
new file mode 100644
index 000000000..877c460e0
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-height__vue__example5.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Rows ▸ Row heights · Limit the number of lines in a cell · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Ships in recyclable packaging. Harbor Goods needs ten days to restock this item, so order early.'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Available in black and silver. The silver version is on backorder until the end of the month.'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Assembly required. Cascade Distributors includes a hex key and a printed guide in the box.'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'In stock.'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Note'],\n  colWidths: [100, 190, 170, 220],\n  columns: [\n    {},\n    {},\n    {},\n    // show two lines of the note and end the second one with an ellipsis\n    { textEllipsis: 2 },\n  ],\n  width: '100%',\n  height: 'auto',\n  rowHeaders: true,\n  autoRowSize: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-height/vue/example5.vue","breadcrumb":["Rows","Row heights"],"guide":"guides/rows/row-height/row-height.md","guideTitle":"Row heights","exampleId":"example5","exampleTitle":"Limit the number of lines in a cell","docPermalink":"/row-height","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example1.ts.json
index 79db3e68c..5b765f381 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n      rows: [3, 5, 9],\n      // show UI indicators to mark hidden rows\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example1.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n      rows: [3, 5, 9],\n      // show UI indicators to mark hidden rows\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example1.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example2.ts.json
index e7694f6d3..a185ee7d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n      // specify rows hidden by default\n      rows: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example2.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n      // specify rows hidden by default\n      rows: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example2.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example3.ts.json
index 87fa65162..05e70148d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: {\n      rows: [3, 5, 9],\n      // show UI indicators to mark hidden rows\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example3.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: {\n      rows: [3, 5, 9],\n      // show UI indicators to mark hidden rows\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example3.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example4.ts.json
index 5fbda6153..a31af3249 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenRows` plugin\n    // automatically adds the context menu's row hiding items\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example4.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenRows` plugin\n    // automatically adds the context menu's row hiding items\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example4.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example5.ts.json
index efdae8992..a9b0b162e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add row hiding context menu items\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example5.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add row hiding context menu items\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example5.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example6.ts.json
index b9bd7b892..4639575cd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n      // exclude hidden rows from copying and pasting\n      copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example6.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n      rows: [3, 5, 9],\n      indicators: true,\n      // exclude hidden rows from copying and pasting\n      copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-hiding/angular/example6.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.js.json
index 357eee256..7b21c80b8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example1.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example1.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.ts.json
index f575202c6..a7274d059 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example1.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example1.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.js.json
index 1abdccbba..99b699f10 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n        // specify rows hidden by default\n        rows: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example2.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the `HiddenRows` plugin\n    hiddenRows: {\n        // specify rows hidden by default\n        rows: [3, 5, 9],\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example2.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.ts.json
index 681ddcd33..d07e79a84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    // specify rows hidden by default\n    rows: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example2.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    // specify rows hidden by default\n    rows: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example2.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.js.json
index 1be912f13..9fbee4b4e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: {\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example3.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    hiddenRows: {\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example3.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.ts.json
index ac2ef1e96..584a13cb6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example3.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example3.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.js.json
index d620ea8dc..c4109a055 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenRows` plugin\n    // automatically adds the context menu's row hiding items\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example4.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // enable the context menu\n    contextMenu: true,\n    // enable the `HiddenRows` plugin\n    // automatically adds the context menu's row hiding items\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example4.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.ts.json
index 679f9844a..eb0e97716 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenRows` plugin\n  // automatically adds the context menu's row hiding items\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example4.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenRows` plugin\n  // automatically adds the context menu's row hiding items\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example4.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.js.json
index 8c1d66217..448ad7bc0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add row hiding context menu items\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example5.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    // individually add row hiding context menu items\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example5.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.ts.json
index 4e522b551..ab2f316c1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add row hiding context menu items\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example5.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add row hiding context menu items\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example5.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.js.json
index 939a76aeb..a4318c81a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n        // exclude hidden rows from copying and pasting\n        copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example6.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n    licenseKey: 'non-commercial-and-evaluation',\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n        ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n        ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n        ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n        ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n    ],\n    height: 'auto',\n    colHeaders: true,\n    rowHeaders: true,\n    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n    hiddenRows: {\n        rows: [3, 5, 9],\n        indicators: true,\n        // exclude hidden rows from copying and pasting\n        copyPasteEnabled: false,\n    },\n    autoWrapRow: true,\n    autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-hiding/javascript/example6.js","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.ts.json
index f3bddf4c4..c3667882e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n    // exclude hidden rows from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example6.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n    // exclude hidden rows from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-hiding/javascript/example6.ts","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example1.tsx.json
index a93a2f279..3b3f42daa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example1.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example1.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example2.tsx.json
index 688d8aafa..82ce777a8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        // specify rows hidden by default\n        rows: [3, 5, 9],\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example2.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        // specify rows hidden by default\n        rows: [3, 5, 9],\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example2.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example3.tsx.json
index 29d2681ad..70cf62944 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example3.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        // show UI indicators to mark hidden rows\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example3.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example4.tsx.json
index aaad82a00..0104cba89 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example4.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={true}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example4.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example5.tsx.json
index bbe43065f..b6289bd30 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_rows_show', 'hidden_rows_hide']}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example5.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_rows_show', 'hidden_rows_hide']}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example5.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example6.tsx.json
index a5d9d54ee..c048360ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_rows_show', 'hidden_rows_hide']}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n        // exclude hidden rows from copying and pasting\n        copyPasteEnabled: false,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example6.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      data={data}\n      height=\"auto\"\n      colHeaders={true}\n      rowHeaders={true}\n      contextMenu={['hidden_rows_show', 'hidden_rows_hide']}\n      hiddenRows={{\n        rows: [3, 5, 9],\n        indicators: true,\n        // exclude hidden rows from copying and pasting\n        copyPasteEnabled: false,\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-hiding/react/example6.tsx","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example1.vue.json
index be600e36c..d9596face 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example1.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example1.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example2.vue.json
index f8758f6bd..ee8579d87 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    // specify rows hidden by default\n    rows: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example2.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 1: Specify rows hidden by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the `HiddenRows` plugin\n  hiddenRows: {\n    // specify rows hidden by default\n    rows: [3, 5, 9],\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example2.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example2","exampleTitle":"Step 1: Specify rows hidden by default","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example3.vue.json
index b057c4743..1012d4996 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example3.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 2: Show UI indicators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: {\n    rows: [3, 5, 9],\n    // show UI indicators to mark hidden rows\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example3.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example4.vue.json
index 46c328796..b8200ec43 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenRows` plugin\n  // automatically adds the context menu's row hiding items\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example4.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // enable the context menu\n  contextMenu: true,\n  // enable the `HiddenRows` plugin\n  // automatically adds the context menu's row hiding items\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example4.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example5.vue.json
index 1fa30c4e1..a3478c3f9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add row hiding context menu items\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example5.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 3: Set up context menu items (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  // individually add row hiding context menu items\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example5\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example5.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example6.vue.json
index bc4970214..41db204b6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-hiding__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n    // exclude hidden rows from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example6.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row hiding · Step 4: Set up copy and paste behavior · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  licenseKey: 'non-commercial-and-evaluation',\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ],\n  height: 'auto',\n  colHeaders: true,\n  rowHeaders: true,\n  contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],\n  hiddenRows: {\n    rows: [3, 5, 9],\n    indicators: true,\n    // exclude hidden rows from copying and pasting\n    copyPasteEnabled: false,\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-hiding/vue/example6.vue","breadcrumb":["Rows","Row hiding"],"guide":"guides/rows/row-hiding/row-hiding.md","guideTitle":"Row hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/row-hiding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__angular__example1.ts.json
index dd697b9e4..87ad48bfd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row moving · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-moving/angular/example1.ts","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row moving · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-moving/angular/example1.ts","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.js.json
index e4a3f0bf6..f4294498c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row moving · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-moving/javascript/example1.js","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row moving · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n    ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n    ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n    ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n    ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    colWidths: 100,\n    manualRowMove: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-moving/javascript/example1.js","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.ts.json
index 45fa16c40..ff0472cc3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row moving · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-moving/javascript/example1.ts","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row moving · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-moving/javascript/example1.ts","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__react__example1.tsx.json
index 3796ff5d0..7a2eefc53 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row moving · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      colWidths={100}\n      manualRowMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-moving/react/example1.tsx","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row moving · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      colWidths={100}\n      manualRowMove={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-moving/react/example1.tsx","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__vue__example1.vue.json
index 769a141b4..995b1d935 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-moving__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row moving · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-moving/vue/example1.vue","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row moving · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', 'Apparel', 'Boston'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', 'Electronics', 'Chicago'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', 'Drinkware', 'Phoenix'],\n  ['SKU-7294', 'Desk Lamp', 'Cascade Distributors', 'Furniture', 'Atlanta'],\n  ['SKU-8015', 'Laptop Stand', 'Summit Trading', 'Furniture', 'Dallas'],\n  ['SKU-9166', 'Bluetooth Speaker', 'Northgate Wholesale', 'Electronics', 'San Jose'],\n  ['SKU-1042', 'Standing Desk', 'Nordic Traders', 'Furniture', 'Columbus'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  colWidths: 100,\n  manualRowMove: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-moving/vue/example1.vue","breadcrumb":["Rows","Row moving"],"guide":"guides/rows/row-moving/row-moving.md","guideTitle":"Row moving","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-moving","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example1.ts.json
index 7a33157d6..1e4b6feac 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row parent-child · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      category: 'Best Rock Performance',\n      artist: null,\n      title: null,\n      label: null,\n      __children: [\n        {\n          category: 'Major label releases',\n          artist: null,\n          title: null,\n          label: null,\n          __children: [\n            {\n              title: \"Don't Wanna Fight\",\n              artist: 'Alabama Shakes',\n              label: 'ATO Records',\n            },\n            {\n              title: 'What Kind Of Man',\n              artist: 'Florence & The Machine',\n              label: 'Republic',\n            },\n            {\n              title: 'Something From Nothing',\n              artist: 'Foo Fighters',\n              label: 'RCA Records',\n            },\n          ],\n        },\n        {\n          category: 'Independent releases',\n          artist: null,\n          title: null,\n          label: null,\n          __children: [\n            {\n              title: 'Moaning Lisa Smile',\n              artist: 'Wolf Alice',\n              label: 'RCA Records/Dirty Hit',\n            },\n            {\n              title: \"Ex's & Oh's\",\n              artist: 'Elle King',\n              label: 'RCA Records',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      category: 'Best Metal Performance',\n      __children: [\n        {\n          title: 'Cirice',\n          artist: 'Ghost',\n          label: 'Loma Vista Recordings',\n        },\n        {\n          title: 'Identity',\n          artist: 'August Burns Red',\n          label: 'Fearless Records',\n        },\n        {\n          title: '512',\n          artist: 'Lamb Of God',\n          label: 'Epic Records',\n        },\n        {\n          title: 'Thank You',\n          artist: 'Sevendust',\n          label: '7Bros Records',\n        },\n        {\n          title: 'Custer',\n          artist: 'Slipknot',\n          label: 'Roadrunner Records',\n        },\n      ],\n    },\n    {\n      category: 'Best Rock Song',\n      __children: [\n        {\n          title: \"Don't Wanna Fight\",\n          artist: 'Alabama Shakes',\n          label: 'ATO Records',\n        },\n        {\n          title: \"Ex's & Oh's\",\n          artist: 'Elle King',\n          label: 'RCA Records',\n        },\n        {\n          title: 'Hold Back The River',\n          artist: 'James Bay',\n          label: 'Republic',\n        },\n        {\n          title: 'Lydia',\n          artist: 'Highly Suspect',\n          label: '300 Entertainment',\n        },\n        {\n          title: 'What Kind Of Man',\n          artist: 'Florence & The Machine',\n          label: 'Republic',\n        },\n      ],\n    },\n    {\n      category: 'Best Rock Album',\n      __children: [\n        {\n          title: 'Drones',\n          artist: 'Muse',\n          label: 'Warner Bros. Records',\n        },\n        {\n          title: 'Chaos And The Calm',\n          artist: 'James Bay',\n          label: 'Republic',\n        },\n        {\n          title: 'Kintsugi',\n          artist: 'Death Cab For Cutie',\n          label: 'Atlantic',\n        },\n        {\n          title: 'Mister Asylum',\n          artist: 'Highly Suspect',\n          label: '300 Entertainment',\n        },\n        {\n          title: '.5: The Gray Chapter',\n          artist: 'Slipknot',\n          label: 'Roadrunner Records',\n        },\n      ],\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    preventOverflow: 'horizontal',\n    rowHeaders: true,\n    colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n    nestedRows: true,\n    contextMenu: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      this.getPlugin('nestedRows').collapseParent(8);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row parent-child · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      category: 'Best Rock Performance',\n      artist: null,\n      title: null,\n      label: null,\n      __children: [\n        {\n          category: 'Major label releases',\n          artist: null,\n          title: null,\n          label: null,\n          __children: [\n            {\n              title: \"Don't Wanna Fight\",\n              artist: 'Alabama Shakes',\n              label: 'ATO Records',\n            },\n            {\n              title: 'What Kind Of Man',\n              artist: 'Florence & The Machine',\n              label: 'Republic',\n            },\n            {\n              title: 'Something From Nothing',\n              artist: 'Foo Fighters',\n              label: 'RCA Records',\n            },\n          ],\n        },\n        {\n          category: 'Independent releases',\n          artist: null,\n          title: null,\n          label: null,\n          __children: [\n            {\n              title: 'Moaning Lisa Smile',\n              artist: 'Wolf Alice',\n              label: 'RCA Records/Dirty Hit',\n            },\n            {\n              title: \"Ex's & Oh's\",\n              artist: 'Elle King',\n              label: 'RCA Records',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      category: 'Best Metal Performance',\n      __children: [\n        {\n          title: 'Cirice',\n          artist: 'Ghost',\n          label: 'Loma Vista Recordings',\n        },\n        {\n          title: 'Identity',\n          artist: 'August Burns Red',\n          label: 'Fearless Records',\n        },\n        {\n          title: '512',\n          artist: 'Lamb Of God',\n          label: 'Epic Records',\n        },\n        {\n          title: 'Thank You',\n          artist: 'Sevendust',\n          label: '7Bros Records',\n        },\n        {\n          title: 'Custer',\n          artist: 'Slipknot',\n          label: 'Roadrunner Records',\n        },\n      ],\n    },\n    {\n      category: 'Best Rock Song',\n      __children: [\n        {\n          title: \"Don't Wanna Fight\",\n          artist: 'Alabama Shakes',\n          label: 'ATO Records',\n        },\n        {\n          title: \"Ex's & Oh's\",\n          artist: 'Elle King',\n          label: 'RCA Records',\n        },\n        {\n          title: 'Hold Back The River',\n          artist: 'James Bay',\n          label: 'Republic',\n        },\n        {\n          title: 'Lydia',\n          artist: 'Highly Suspect',\n          label: '300 Entertainment',\n        },\n        {\n          title: 'What Kind Of Man',\n          artist: 'Florence & The Machine',\n          label: 'Republic',\n        },\n      ],\n    },\n    {\n      category: 'Best Rock Album',\n      __children: [\n        {\n          title: 'Drones',\n          artist: 'Muse',\n          label: 'Warner Bros. Records',\n        },\n        {\n          title: 'Chaos And The Calm',\n          artist: 'James Bay',\n          label: 'Republic',\n        },\n        {\n          title: 'Kintsugi',\n          artist: 'Death Cab For Cutie',\n          label: 'Atlantic',\n        },\n        {\n          title: 'Mister Asylum',\n          artist: 'Highly Suspect',\n          label: '300 Entertainment',\n        },\n        {\n          title: '.5: The Gray Chapter',\n          artist: 'Slipknot',\n          label: 'Roadrunner Records',\n        },\n      ],\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    preventOverflow: 'horizontal',\n    rowHeaders: true,\n    colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n    nestedRows: true,\n    contextMenu: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      this.getPlugin('nestedRows').collapseParent(8);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example2.ts.json
index 8ff60026f..84047483c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row parent-child · Methods · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"collapseAll()\">collapseAll()</button>\n        <button class=\"button button--primary\" (click)=\"expandAll()\">expandAll()</button>\n        <button class=\"button button--primary\" (click)=\"toggleFirst()\">toggleParent(0)</button>\n        <button class=\"button button--primary\" (click)=\"readState()\">Read the state</button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\" [data]=\"projectPlan\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  output = 'Click a button to call a method.';\n\n  readonly projectPlan: TaskRow[] = [\n    {\n      task: 'Marketing',\n      owner: 'Dana',\n      status: 'In progress',\n      __children: [\n        {\n          task: 'Website refresh',\n          owner: 'Ivy',\n          status: 'In progress',\n          __children: [\n            { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n            { task: 'Visual design', owner: 'Mia', status: 'In review' },\n          ],\n        },\n        { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n      ],\n    },\n    {\n      task: 'Engineering',\n      owner: 'Sam',\n      status: 'In progress',\n      __children: [\n        {\n          task: 'API v2',\n          owner: 'Ravi',\n          status: 'In progress',\n          __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n        },\n        { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n      ],\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n    colHeaders: ['Task', 'Owner', 'Status'],\n    rowHeaders: true,\n    nestedRows: true,\n    contextMenu: true,\n    height: 'auto',\n  };\n\n  collapseAll(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').collapseAll();\n    this.output = `collapseAll() -> ${hot.countRows()} rows are visible now`;\n  }\n\n  expandAll(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').expandAll();\n    this.output = `expandAll() -> ${hot.countRows()} rows are visible now`;\n  }\n\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  toggleFirst(): void {\n    const plugin = this.hotTable.hotInstance!.getPlugin('nestedRows');\n    const changed = plugin.toggleParent(0);\n\n    this.output = `toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`;\n  }\n\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside another\n  // collapsed parent has no visual index at all.\n  readState(): void {\n    const plugin = this.hotTable.hotInstance!.getPlugin('nestedRows');\n\n    this.output =\n      `getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n      `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n      `countChildren(0) -> ${plugin.countChildren(0)}`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example2.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row parent-child · Methods · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"collapseAll()\">collapseAll()</button>\n        <button class=\"button button--primary\" (click)=\"expandAll()\">expandAll()</button>\n        <button class=\"button button--primary\" (click)=\"toggleFirst()\">toggleParent(0)</button>\n        <button class=\"button button--primary\" (click)=\"readState()\">Read the state</button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\" [data]=\"projectPlan\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  output = 'Click a button to call a method.';\n\n  readonly projectPlan: TaskRow[] = [\n    {\n      task: 'Marketing',\n      owner: 'Dana',\n      status: 'In progress',\n      __children: [\n        {\n          task: 'Website refresh',\n          owner: 'Ivy',\n          status: 'In progress',\n          __children: [\n            { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n            { task: 'Visual design', owner: 'Mia', status: 'In review' },\n          ],\n        },\n        { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n      ],\n    },\n    {\n      task: 'Engineering',\n      owner: 'Sam',\n      status: 'In progress',\n      __children: [\n        {\n          task: 'API v2',\n          owner: 'Ravi',\n          status: 'In progress',\n          __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n        },\n        { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n      ],\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n    colHeaders: ['Task', 'Owner', 'Status'],\n    rowHeaders: true,\n    nestedRows: true,\n    contextMenu: true,\n    height: 'auto',\n  };\n\n  collapseAll(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').collapseAll();\n    this.output = `collapseAll() -> ${hot.countRows()} rows are visible now`;\n  }\n\n  expandAll(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').expandAll();\n    this.output = `expandAll() -> ${hot.countRows()} rows are visible now`;\n  }\n\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  toggleFirst(): void {\n    const plugin = this.hotTable.hotInstance!.getPlugin('nestedRows');\n    const changed = plugin.toggleParent(0);\n\n    this.output = `toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`;\n  }\n\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside another\n  // collapsed parent has no visual index at all.\n  readState(): void {\n    const plugin = this.hotTable.hotInstance!.getPlugin('nestedRows');\n\n    this.output =\n      `getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n      `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n      `countChildren(0) -> ${plugin.countChildren(0)}`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example2.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example3.ts.json
index 455de5a17..a018ffb65 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"revealTask('Auth endpoints')\">\n          Find \"Auth endpoints\"\n        </button>\n        <button class=\"button button--primary\" (click)=\"revealTask('Visual design')\">\n          Find \"Visual design\"\n        </button>\n        <button class=\"button button--primary\" (click)=\"collapseEverything()\">\n          Collapse everything\n        </button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\" [data]=\"projectPlan\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  output = 'Everything starts collapsed. Pick a task to jump to.';\n\n  readonly projectPlan = projectPlan;\n\n  readonly gridSettings: GridSettings = {\n    columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n    colHeaders: ['Task', 'Owner', 'Status'],\n    rowHeaders: true,\n    nestedRows: true,\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      this.getPlugin('nestedRows').collapseAll();\n    },\n  };\n\n  // Reveals a task that is currently hidden inside collapsed parents, then selects it.\n  revealTask(taskName: string): void {\n    const hot = this.hotTable.hotInstance!;\n    const plugin = hot.getPlugin('nestedRows');\n    const row = physicalRowOf.get(taskName)!;\n    const wasHidden = hot.toVisualRow(row) === null;\n\n    // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n    plugin.expandToRow(row);\n\n    const visualRow = hot.toVisualRow(row)!;\n\n    hot.selectCell(visualRow, 0);\n\n    this.output =\n      `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n      `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n  }\n\n  collapseEverything(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').collapseAll();\n    this.output = `Collapsed again - ${hot.countRows()} rows are visible.`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example3.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" (click)=\"revealTask('Auth endpoints')\">\n          Find \"Auth endpoints\"\n        </button>\n        <button class=\"button button--primary\" (click)=\"revealTask('Visual design')\">\n          Find \"Visual design\"\n        </button>\n        <button class=\"button button--primary\" (click)=\"collapseEverything()\">\n          Collapse everything\n        </button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\" [data]=\"projectPlan\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n  output = 'Everything starts collapsed. Pick a task to jump to.';\n\n  readonly projectPlan = projectPlan;\n\n  readonly gridSettings: GridSettings = {\n    columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n    colHeaders: ['Task', 'Owner', 'Status'],\n    rowHeaders: true,\n    nestedRows: true,\n    height: 'auto',\n    afterInit(this: Handsontable) {\n      this.getPlugin('nestedRows').collapseAll();\n    },\n  };\n\n  // Reveals a task that is currently hidden inside collapsed parents, then selects it.\n  revealTask(taskName: string): void {\n    const hot = this.hotTable.hotInstance!;\n    const plugin = hot.getPlugin('nestedRows');\n    const row = physicalRowOf.get(taskName)!;\n    const wasHidden = hot.toVisualRow(row) === null;\n\n    // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n    plugin.expandToRow(row);\n\n    const visualRow = hot.toVisualRow(row)!;\n\n    hot.selectCell(visualRow, 0);\n\n    this.output =\n      `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n      `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n  }\n\n  collapseEverything(): void {\n    const hot = this.hotTable.hotInstance!;\n\n    hot.getPlugin('nestedRows').collapseAll();\n    this.output = `Collapsed again - ${hot.countRows()} rows are visible.`;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example3.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.js.json
index c93f898bd..051fd7989 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst sourceDataObject = [\n    {\n        category: 'Best Rock Performance',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n            {\n                category: 'Major label releases',\n                artist: null,\n                title: null,\n                label: null,\n                __children: [\n                    {\n                        title: \"Don't Wanna Fight\",\n                        artist: 'Alabama Shakes',\n                        label: 'ATO Records',\n                    },\n                    {\n                        title: 'What Kind Of Man',\n                        artist: 'Florence & The Machine',\n                        label: 'Republic',\n                    },\n                    {\n                        title: 'Something From Nothing',\n                        artist: 'Foo Fighters',\n                        label: 'RCA Records',\n                    },\n                ],\n            },\n            {\n                category: 'Independent releases',\n                artist: null,\n                title: null,\n                label: null,\n                __children: [\n                    {\n                        title: 'Moaning Lisa Smile',\n                        artist: 'Wolf Alice',\n                        label: 'RCA Records/Dirty Hit',\n                    },\n                    {\n                        title: \"Ex's & Oh's\",\n                        artist: 'Elle King',\n                        label: 'RCA Records',\n                    },\n                ],\n            },\n        ],\n    },\n    {\n        category: 'Best Metal Performance',\n        __children: [\n            {\n                title: 'Cirice',\n                artist: 'Ghost',\n                label: 'Loma Vista Recordings',\n            },\n            {\n                title: 'Identity',\n                artist: 'August Burns Red',\n                label: 'Fearless Records',\n            },\n            {\n                title: '512',\n                artist: 'Lamb Of God',\n                label: 'Epic Records',\n            },\n            {\n                title: 'Thank You',\n                artist: 'Sevendust',\n                label: '7Bros Records',\n            },\n            {\n                title: 'Custer',\n                artist: 'Slipknot',\n                label: 'Roadrunner Records',\n            },\n        ],\n    },\n    {\n        category: 'Best Rock Song',\n        __children: [\n            {\n                title: \"Don't Wanna Fight\",\n                artist: 'Alabama Shakes',\n                label: 'ATO Records',\n            },\n            {\n                title: \"Ex's & Oh's\",\n                artist: 'Elle King',\n                label: 'RCA Records',\n            },\n            {\n                title: 'Hold Back The River',\n                artist: 'James Bay',\n                label: 'Republic',\n            },\n            {\n                title: 'Lydia',\n                artist: 'Highly Suspect',\n                label: '300 Entertainment',\n            },\n            {\n                title: 'What Kind Of Man',\n                artist: 'Florence & The Machine',\n                label: 'Republic',\n            },\n        ],\n    },\n    {\n        category: 'Best Rock Album',\n        __children: [\n            {\n                title: 'Drones',\n                artist: 'Muse',\n                label: 'Warner Bros. Records',\n            },\n            {\n                title: 'Chaos And The Calm',\n                artist: 'James Bay',\n                label: 'Republic',\n            },\n            {\n                title: 'Kintsugi',\n                artist: 'Death Cab For Cutie',\n                label: 'Atlantic',\n            },\n            {\n                title: 'Mister Asylum',\n                artist: 'Highly Suspect',\n                label: '300 Entertainment',\n            },\n            {\n                title: '.5: The Gray Chapter',\n                artist: 'Slipknot',\n                label: 'Roadrunner Records',\n            },\n        ],\n    },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: sourceDataObject,\n    preventOverflow: 'horizontal',\n    rowHeaders: true,\n    colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n    nestedRows: true,\n    contextMenu: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n    afterInit() {\n        this.getPlugin('nestedRows').collapseParent(8);\n    },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst sourceDataObject = [\n    {\n        category: 'Best Rock Performance',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n            {\n                category: 'Major label releases',\n                artist: null,\n                title: null,\n                label: null,\n                __children: [\n                    {\n                        title: \"Don't Wanna Fight\",\n                        artist: 'Alabama Shakes',\n                        label: 'ATO Records',\n                    },\n                    {\n                        title: 'What Kind Of Man',\n                        artist: 'Florence & The Machine',\n                        label: 'Republic',\n                    },\n                    {\n                        title: 'Something From Nothing',\n                        artist: 'Foo Fighters',\n                        label: 'RCA Records',\n                    },\n                ],\n            },\n            {\n                category: 'Independent releases',\n                artist: null,\n                title: null,\n                label: null,\n                __children: [\n                    {\n                        title: 'Moaning Lisa Smile',\n                        artist: 'Wolf Alice',\n                        label: 'RCA Records/Dirty Hit',\n                    },\n                    {\n                        title: \"Ex's & Oh's\",\n                        artist: 'Elle King',\n                        label: 'RCA Records',\n                    },\n                ],\n            },\n        ],\n    },\n    {\n        category: 'Best Metal Performance',\n        __children: [\n            {\n                title: 'Cirice',\n                artist: 'Ghost',\n                label: 'Loma Vista Recordings',\n            },\n            {\n                title: 'Identity',\n                artist: 'August Burns Red',\n                label: 'Fearless Records',\n            },\n            {\n                title: '512',\n                artist: 'Lamb Of God',\n                label: 'Epic Records',\n            },\n            {\n                title: 'Thank You',\n                artist: 'Sevendust',\n                label: '7Bros Records',\n            },\n            {\n                title: 'Custer',\n                artist: 'Slipknot',\n                label: 'Roadrunner Records',\n            },\n        ],\n    },\n    {\n        category: 'Best Rock Song',\n        __children: [\n            {\n                title: \"Don't Wanna Fight\",\n                artist: 'Alabama Shakes',\n                label: 'ATO Records',\n            },\n            {\n                title: \"Ex's & Oh's\",\n                artist: 'Elle King',\n                label: 'RCA Records',\n            },\n            {\n                title: 'Hold Back The River',\n                artist: 'James Bay',\n                label: 'Republic',\n            },\n            {\n                title: 'Lydia',\n                artist: 'Highly Suspect',\n                label: '300 Entertainment',\n            },\n            {\n                title: 'What Kind Of Man',\n                artist: 'Florence & The Machine',\n                label: 'Republic',\n            },\n        ],\n    },\n    {\n        category: 'Best Rock Album',\n        __children: [\n            {\n                title: 'Drones',\n                artist: 'Muse',\n                label: 'Warner Bros. Records',\n            },\n            {\n                title: 'Chaos And The Calm',\n                artist: 'James Bay',\n                label: 'Republic',\n            },\n            {\n                title: 'Kintsugi',\n                artist: 'Death Cab For Cutie',\n                label: 'Atlantic',\n            },\n            {\n                title: 'Mister Asylum',\n                artist: 'Highly Suspect',\n                label: '300 Entertainment',\n            },\n            {\n                title: '.5: The Gray Chapter',\n                artist: 'Slipknot',\n                label: 'Roadrunner Records',\n            },\n        ],\n    },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: sourceDataObject,\n    preventOverflow: 'horizontal',\n    rowHeaders: true,\n    colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n    nestedRows: true,\n    contextMenu: true,\n    bindRowsWithHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n    afterInit() {\n        this.getPlugin('nestedRows').collapseParent(8);\n    },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.ts.json
index c68d0eb49..235dd73b8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface MusicRow {\n  category?: string;\n  artist?: string | null;\n  title?: string | null;\n  label?: string | null;\n  __children?: MusicRow[];\n}\n\nconst sourceDataObject: MusicRow[] = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: sourceDataObject,\n  preventOverflow: 'horizontal',\n  rowHeaders: true,\n  colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n  nestedRows: true,\n  contextMenu: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n  afterInit() {\n    this.getPlugin('nestedRows').collapseParent(8);\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface MusicRow {\n  category?: string;\n  artist?: string | null;\n  title?: string | null;\n  label?: string | null;\n  __children?: MusicRow[];\n}\n\nconst sourceDataObject: MusicRow[] = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: sourceDataObject,\n  preventOverflow: 'horizontal',\n  rowHeaders: true,\n  colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n  nestedRows: true,\n  contextMenu: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n  afterInit() {\n    this.getPlugin('nestedRows').collapseParent(8);\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.js.json
index 7cabbeb0f..54cadd4ce 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Methods · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"collapseAll\" class=\"button button--primary\">collapseAll()</button>\n      <button id=\"expandAll\" class=\"button button--primary\">expandAll()</button>\n      <button id=\"toggleFirst\" class=\"button button--primary\">toggleParent(0)</button>\n      <button id=\"readState\" class=\"button button--primary\">Read the state</button>\n    </div>\n    <output class=\"console\" id=\"output\">Click a button to call a method.</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst projectPlan = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\nconst container = document.querySelector('#example2');\nconst output = document.querySelector('#output');\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst plugin = hot.getPlugin('nestedRows');\nconst log = (message) => {\n  output.innerText = message;\n};\ndocument.querySelector('#collapseAll').addEventListener('click', () => {\n  plugin.collapseAll();\n  log(`collapseAll() -> ${hot.countRows()} rows are visible now`);\n});\ndocument.querySelector('#expandAll').addEventListener('click', () => {\n  plugin.expandAll();\n  log(`expandAll() -> ${hot.countRows()} rows are visible now`);\n});\ndocument.querySelector('#toggleFirst').addEventListener('click', () => {\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  const changed = plugin.toggleParent(0);\n  log(`toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`);\n});\ndocument.querySelector('#readState').addEventListener('click', () => {\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside\n  // another collapsed parent has no visual index at all.\n  log(`getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n    `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n    `countChildren(0) -> ${plugin.countChildren(0)}`);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example2.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Methods · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"collapseAll\" class=\"button button--primary\">collapseAll()</button>\n      <button id=\"expandAll\" class=\"button button--primary\">expandAll()</button>\n      <button id=\"toggleFirst\" class=\"button button--primary\">toggleParent(0)</button>\n      <button id=\"readState\" class=\"button button--primary\">Read the state</button>\n    </div>\n    <output class=\"console\" id=\"output\">Click a button to call a method.</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst projectPlan = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\nconst container = document.querySelector('#example2');\nconst output = document.querySelector('#output');\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\nconst plugin = hot.getPlugin('nestedRows');\nconst log = (message) => {\n  output.innerText = message;\n};\ndocument.querySelector('#collapseAll').addEventListener('click', () => {\n  plugin.collapseAll();\n  log(`collapseAll() -> ${hot.countRows()} rows are visible now`);\n});\ndocument.querySelector('#expandAll').addEventListener('click', () => {\n  plugin.expandAll();\n  log(`expandAll() -> ${hot.countRows()} rows are visible now`);\n});\ndocument.querySelector('#toggleFirst').addEventListener('click', () => {\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  const changed = plugin.toggleParent(0);\n  log(`toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`);\n});\ndocument.querySelector('#readState').addEventListener('click', () => {\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside\n  // another collapsed parent has no visual index at all.\n  log(`getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n    `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n    `countChildren(0) -> ${plugin.countChildren(0)}`);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example2.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.ts.json
index dc865afc9..cda31f5a5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Methods · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"collapseAll\" class=\"button button--primary\">collapseAll()</button>\n      <button id=\"expandAll\" class=\"button button--primary\">expandAll()</button>\n      <button id=\"toggleFirst\" class=\"button button--primary\">toggleParent(0)</button>\n      <button id=\"readState\" class=\"button button--primary\">Read the state</button>\n    </div>\n    <output class=\"console\" id=\"output\">Click a button to call a method.</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example2')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('nestedRows');\nconst log = (message: string) => {\n  output.innerText = message;\n};\n\ndocument.querySelector('#collapseAll')!.addEventListener('click', () => {\n  plugin.collapseAll();\n  log(`collapseAll() -> ${hot.countRows()} rows are visible now`);\n});\n\ndocument.querySelector('#expandAll')!.addEventListener('click', () => {\n  plugin.expandAll();\n  log(`expandAll() -> ${hot.countRows()} rows are visible now`);\n});\n\ndocument.querySelector('#toggleFirst')!.addEventListener('click', () => {\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  const changed = plugin.toggleParent(0);\n\n  log(`toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`);\n});\n\ndocument.querySelector('#readState')!.addEventListener('click', () => {\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside\n  // another collapsed parent has no visual index at all.\n  log(\n    `getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n      `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n      `countChildren(0) -> ${plugin.countChildren(0)}`\n  );\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example2.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Methods · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"collapseAll\" class=\"button button--primary\">collapseAll()</button>\n      <button id=\"expandAll\" class=\"button button--primary\">expandAll()</button>\n      <button id=\"toggleFirst\" class=\"button button--primary\">toggleParent(0)</button>\n      <button id=\"readState\" class=\"button button--primary\">Read the state</button>\n    </div>\n    <output class=\"console\" id=\"output\">Click a button to call a method.</output>\n  </div>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example2')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst plugin = hot.getPlugin('nestedRows');\nconst log = (message: string) => {\n  output.innerText = message;\n};\n\ndocument.querySelector('#collapseAll')!.addEventListener('click', () => {\n  plugin.collapseAll();\n  log(`collapseAll() -> ${hot.countRows()} rows are visible now`);\n});\n\ndocument.querySelector('#expandAll')!.addEventListener('click', () => {\n  plugin.expandAll();\n  log(`expandAll() -> ${hot.countRows()} rows are visible now`);\n});\n\ndocument.querySelector('#toggleFirst')!.addEventListener('click', () => {\n  // `toggleParent` takes a visual row index and returns `true` when the state changed.\n  const changed = plugin.toggleParent(0);\n\n  log(`toggleParent(0) -> ${changed}, collapsed: ${plugin.isParentCollapsed(0)}`);\n});\n\ndocument.querySelector('#readState')!.addEventListener('click', () => {\n  // `getCollapsedParents` returns physical row indexes, because a parent collapsed inside\n  // another collapsed parent has no visual index at all.\n  log(\n    `getCollapsedParents() -> [${plugin.getCollapsedParents()}]\\n` +\n      `getRowLevel(0) -> ${plugin.getRowLevel(0)}\\n` +\n      `countChildren(0) -> ${plugin.countChildren(0)}`\n  );\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example2.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.js.json
index 9a33e465e..be6873b3e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"findAuth\" class=\"button button--primary\">Find \"Auth endpoints\"</button>\n      <button id=\"findDesign\" class=\"button button--primary\">Find \"Visual design\"</button>\n      <button id=\"collapseBack\" class=\"button button--primary\">Collapse everything</button>\n    </div>\n    <output class=\"console\" id=\"revealOutput\">Everything starts collapsed. Pick a task to jump to.</output>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst projectPlan = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#revealOutput');\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map();\nlet physicalRow = 0;\n(function walk(rows) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n});\nconst plugin = hot.getPlugin('nestedRows');\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName) => {\n  const row = physicalRowOf.get(taskName);\n  const wasHidden = hot.toVisualRow(row) === null;\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n  const visualRow = hot.toVisualRow(row);\n  hot.selectCell(visualRow, 0);\n  output.innerText =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n      `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\ndocument.querySelector('#findAuth').addEventListener('click', () => revealTask('Auth endpoints'));\ndocument.querySelector('#findDesign').addEventListener('click', () => revealTask('Visual design'));\ndocument.querySelector('#collapseBack').addEventListener('click', () => {\n  plugin.collapseAll();\n  output.innerText = `Collapsed again - ${hot.countRows()} rows are visible.`;\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example3.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"findAuth\" class=\"button button--primary\">Find \"Auth endpoints\"</button>\n      <button id=\"findDesign\" class=\"button button--primary\">Find \"Visual design\"</button>\n      <button id=\"collapseBack\" class=\"button button--primary\">Collapse everything</button>\n    </div>\n    <output class=\"console\" id=\"revealOutput\">Everything starts collapsed. Pick a task to jump to.</output>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst projectPlan = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#revealOutput');\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map();\nlet physicalRow = 0;\n(function walk(rows) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n});\nconst plugin = hot.getPlugin('nestedRows');\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName) => {\n  const row = physicalRowOf.get(taskName);\n  const wasHidden = hot.toVisualRow(row) === null;\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n  const visualRow = hot.toVisualRow(row);\n  hot.selectCell(visualRow, 0);\n  output.innerText =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n      `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\ndocument.querySelector('#findAuth').addEventListener('click', () => revealTask('Auth endpoints'));\ndocument.querySelector('#findDesign').addEventListener('click', () => revealTask('Visual design'));\ndocument.querySelector('#collapseBack').addEventListener('click', () => {\n  plugin.collapseAll();\n  output.innerText = `Collapsed again - ${hot.countRows()} rows are visible.`;\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example3.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.ts.json
index 906440141..d1c788199 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"findAuth\" class=\"button button--primary\">Find \"Auth endpoints\"</button>\n      <button id=\"findDesign\" class=\"button button--primary\">Find \"Visual design\"</button>\n      <button id=\"collapseBack\" class=\"button button--primary\">Collapse everything</button>\n    </div>\n    <output class=\"console\" id=\"revealOutput\">Everything starts collapsed. Pick a task to jump to.</output>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#revealOutput') as HTMLElement;\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n});\n\nconst plugin = hot.getPlugin('nestedRows');\n\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName: string) => {\n  const row = physicalRowOf.get(taskName)!;\n  const wasHidden = hot.toVisualRow(row) === null;\n\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n\n  const visualRow = hot.toVisualRow(row)!;\n\n  hot.selectCell(visualRow, 0);\n\n  output.innerText =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n    `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\n\ndocument.querySelector('#findAuth')!.addEventListener('click', () => revealTask('Auth endpoints'));\ndocument.querySelector('#findDesign')!.addEventListener('click', () => revealTask('Visual design'));\n\ndocument.querySelector('#collapseBack')!.addEventListener('click', () => {\n  plugin.collapseAll();\n  output.innerText = `Collapsed again - ${hot.countRows()} rows are visible.`;\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example3.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"findAuth\" class=\"button button--primary\">Find \"Auth endpoints\"</button>\n      <button id=\"findDesign\" class=\"button button--primary\">Find \"Visual design\"</button>\n      <button id=\"collapseBack\" class=\"button button--primary\">Collapse everything</button>\n    </div>\n    <output class=\"console\" id=\"revealOutput\">Everything starts collapsed. Pick a task to jump to.</output>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#revealOutput') as HTMLElement;\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst hot = new Handsontable(container, {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n});\n\nconst plugin = hot.getPlugin('nestedRows');\n\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName: string) => {\n  const row = physicalRowOf.get(taskName)!;\n  const wasHidden = hot.toVisualRow(row) === null;\n\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n\n  const visualRow = hot.toVisualRow(row)!;\n\n  hot.selectCell(visualRow, 0);\n\n  output.innerText =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n    `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\n\ndocument.querySelector('#findAuth')!.addEventListener('click', () => revealTask('Auth endpoints'));\ndocument.querySelector('#findDesign')!.addEventListener('click', () => revealTask('Visual design'));\n\ndocument.querySelector('#collapseBack')!.addEventListener('click', () => {\n  plugin.collapseAll();\n  output.innerText = `Collapsed again - ${hot.countRows()} rows are visible.`;\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example3.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example1.tsx.json
index 2c4c956c7..5a998ec0f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row parent-child · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst sourceDataObject = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={sourceDataObject}\n      preventOverflow=\"horizontal\"\n      rowHeaders={true}\n      colHeaders={['Category', 'Artist', 'Title', 'Album', 'Label']}\n      nestedRows={true}\n      contextMenu={true}\n      bindRowsWithHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n      afterInit={function (this: Handsontable) {\n        this.getPlugin('nestedRows').collapseParent(8);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example1.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row parent-child · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst sourceDataObject = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={sourceDataObject}\n      preventOverflow=\"horizontal\"\n      rowHeaders={true}\n      colHeaders={['Category', 'Artist', 'Title', 'Album', 'Label']}\n      nestedRows={true}\n      contextMenu={true}\n      bindRowsWithHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n      afterInit={function (this: Handsontable) {\n        this.getPlugin('nestedRows').collapseParent(8);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example1.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example2.tsx.json
index 1f4dec9d0..e4b02bbf1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row parent-child · Methods · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('Click a button to call a method.');\n\n  const getPlugin = () => hotRef.current?.hotInstance?.getPlugin('nestedRows');\n  const countRows = () => hotRef.current?.hotInstance?.countRows();\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              getPlugin()?.collapseAll();\n              setOutput(`collapseAll() -> ${countRows()} rows are visible now`);\n            }}\n          >\n            collapseAll()\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              getPlugin()?.expandAll();\n              setOutput(`expandAll() -> ${countRows()} rows are visible now`);\n            }}\n          >\n            expandAll()\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              // `toggleParent` takes a visual row index and returns `true` when the state changed.\n              const plugin = getPlugin();\n              const changed = plugin?.toggleParent(0);\n\n              setOutput(`toggleParent(0) -> ${changed}, collapsed: ${plugin?.isParentCollapsed(0)}`);\n            }}\n          >\n            toggleParent(0)\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              // `getCollapsedParents` returns physical row indexes, because a parent collapsed\n              // inside another collapsed parent has no visual index at all.\n              const plugin = getPlugin();\n\n              setOutput(\n                `getCollapsedParents() -> [${plugin?.getCollapsedParents()}]\\n` +\n                  `getRowLevel(0) -> ${plugin?.getRowLevel(0)}\\n` +\n                  `countChildren(0) -> ${plugin?.countChildren(0)}`\n              );\n            }}\n          >\n            Read the state\n          </button>\n        </div>\n        <output className=\"console\">{output}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={projectPlan}\n        columns={[{ data: 'task' }, { data: 'owner' }, { data: 'status' }]}\n        colHeaders={['Task', 'Owner', 'Status']}\n        rowHeaders={true}\n        nestedRows={true}\n        contextMenu={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example2.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row parent-child · Methods · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('Click a button to call a method.');\n\n  const getPlugin = () => hotRef.current?.hotInstance?.getPlugin('nestedRows');\n  const countRows = () => hotRef.current?.hotInstance?.countRows();\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              getPlugin()?.collapseAll();\n              setOutput(`collapseAll() -> ${countRows()} rows are visible now`);\n            }}\n          >\n            collapseAll()\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              getPlugin()?.expandAll();\n              setOutput(`expandAll() -> ${countRows()} rows are visible now`);\n            }}\n          >\n            expandAll()\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              // `toggleParent` takes a visual row index and returns `true` when the state changed.\n              const plugin = getPlugin();\n              const changed = plugin?.toggleParent(0);\n\n              setOutput(`toggleParent(0) -> ${changed}, collapsed: ${plugin?.isParentCollapsed(0)}`);\n            }}\n          >\n            toggleParent(0)\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              // `getCollapsedParents` returns physical row indexes, because a parent collapsed\n              // inside another collapsed parent has no visual index at all.\n              const plugin = getPlugin();\n\n              setOutput(\n                `getCollapsedParents() -> [${plugin?.getCollapsedParents()}]\\n` +\n                  `getRowLevel(0) -> ${plugin?.getRowLevel(0)}\\n` +\n                  `countChildren(0) -> ${plugin?.countChildren(0)}`\n              );\n            }}\n          >\n            Read the state\n          </button>\n        </div>\n        <output className=\"console\">{output}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={projectPlan}\n        columns={[{ data: 'task' }, { data: 'owner' }, { data: 'status' }]}\n        colHeaders={['Task', 'Owner', 'Status']}\n        rowHeaders={true}\n        nestedRows={true}\n        contextMenu={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example2.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example3.tsx.json
index 615764a8f..b3f47f856 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('Everything starts collapsed. Pick a task to jump to.');\n\n  // Reveals a task that is currently hidden inside collapsed parents, then selects it.\n  const revealTask = (taskName: string) => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const plugin = hot.getPlugin('nestedRows');\n    const row = physicalRowOf.get(taskName)!;\n    const wasHidden = hot.toVisualRow(row) === null;\n\n    // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n    plugin.expandToRow(row);\n\n    const visualRow = hot.toVisualRow(row)!;\n\n    hot.selectCell(visualRow, 0);\n\n    setOutput(\n      `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n        `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`\n    );\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={() => revealTask('Auth endpoints')}>\n            Find \"Auth endpoints\"\n          </button>\n          <button className=\"button button--primary\" onClick={() => revealTask('Visual design')}>\n            Find \"Visual design\"\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              const hot = hotRef.current?.hotInstance;\n\n              hot?.getPlugin('nestedRows').collapseAll();\n              setOutput(`Collapsed again - ${hot?.countRows()} rows are visible.`);\n            }}\n          >\n            Collapse everything\n          </button>\n        </div>\n        <output className=\"console\">{output}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={projectPlan}\n        columns={[{ data: 'task' }, { data: 'owner' }, { data: 'status' }]}\n        colHeaders={['Task', 'Owner', 'Status']}\n        rowHeaders={true}\n        nestedRows={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterInit={function (this: Handsontable) {\n          this.getPlugin('nestedRows').collapseAll();\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example3.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface TaskRow {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n}\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [output, setOutput] = useState('Everything starts collapsed. Pick a task to jump to.');\n\n  // Reveals a task that is currently hidden inside collapsed parents, then selects it.\n  const revealTask = (taskName: string) => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const plugin = hot.getPlugin('nestedRows');\n    const row = physicalRowOf.get(taskName)!;\n    const wasHidden = hot.toVisualRow(row) === null;\n\n    // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n    plugin.expandToRow(row);\n\n    const visualRow = hot.toVisualRow(row)!;\n\n    hot.selectCell(visualRow, 0);\n\n    setOutput(\n      `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n        `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`\n    );\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button className=\"button button--primary\" onClick={() => revealTask('Auth endpoints')}>\n            Find \"Auth endpoints\"\n          </button>\n          <button className=\"button button--primary\" onClick={() => revealTask('Visual design')}>\n            Find \"Visual design\"\n          </button>\n          <button\n            className=\"button button--primary\"\n            onClick={() => {\n              const hot = hotRef.current?.hotInstance;\n\n              hot?.getPlugin('nestedRows').collapseAll();\n              setOutput(`Collapsed again - ${hot?.countRows()} rows are visible.`);\n            }}\n          >\n            Collapse everything\n          </button>\n        </div>\n        <output className=\"console\">{output}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={projectPlan}\n        columns={[{ data: 'task' }, { data: 'owner' }, { data: 'status' }]}\n        colHeaders={['Task', 'Owner', 'Status']}\n        rowHeaders={true}\n        nestedRows={true}\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterInit={function (this: Handsontable) {\n          this.getPlugin('nestedRows').collapseAll();\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example3.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example1.vue.json
index 7d7e694c1..09cccafa3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row parent-child · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface MusicRow {\n  category?: string;\n  artist?: string | null;\n  title?: string | null;\n  label?: string | null;\n  __children?: MusicRow[];\n}\n\nconst sourceDataObject: MusicRow[] = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: sourceDataObject,\n  preventOverflow: 'horizontal',\n  rowHeaders: true,\n  colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n  nestedRows: true,\n  contextMenu: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseParent(8);\n  },\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example1.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row parent-child · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ninterface MusicRow {\n  category?: string;\n  artist?: string | null;\n  title?: string | null;\n  label?: string | null;\n  __children?: MusicRow[];\n}\n\nconst sourceDataObject: MusicRow[] = [\n  {\n    category: 'Best Rock Performance',\n    artist: null,\n    title: null,\n    label: null,\n    __children: [\n      {\n        category: 'Major label releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: \"Don't Wanna Fight\",\n            artist: 'Alabama Shakes',\n            label: 'ATO Records',\n          },\n          {\n            title: 'What Kind Of Man',\n            artist: 'Florence & The Machine',\n            label: 'Republic',\n          },\n          {\n            title: 'Something From Nothing',\n            artist: 'Foo Fighters',\n            label: 'RCA Records',\n          },\n        ],\n      },\n      {\n        category: 'Independent releases',\n        artist: null,\n        title: null,\n        label: null,\n        __children: [\n          {\n            title: 'Moaning Lisa Smile',\n            artist: 'Wolf Alice',\n            label: 'RCA Records/Dirty Hit',\n          },\n          {\n            title: \"Ex's & Oh's\",\n            artist: 'Elle King',\n            label: 'RCA Records',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    category: 'Best Metal Performance',\n    __children: [\n      {\n        title: 'Cirice',\n        artist: 'Ghost',\n        label: 'Loma Vista Recordings',\n      },\n      {\n        title: 'Identity',\n        artist: 'August Burns Red',\n        label: 'Fearless Records',\n      },\n      {\n        title: '512',\n        artist: 'Lamb Of God',\n        label: 'Epic Records',\n      },\n      {\n        title: 'Thank You',\n        artist: 'Sevendust',\n        label: '7Bros Records',\n      },\n      {\n        title: 'Custer',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Song',\n    __children: [\n      {\n        title: \"Don't Wanna Fight\",\n        artist: 'Alabama Shakes',\n        label: 'ATO Records',\n      },\n      {\n        title: \"Ex's & Oh's\",\n        artist: 'Elle King',\n        label: 'RCA Records',\n      },\n      {\n        title: 'Hold Back The River',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Lydia',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: 'What Kind Of Man',\n        artist: 'Florence & The Machine',\n        label: 'Republic',\n      },\n    ],\n  },\n  {\n    category: 'Best Rock Album',\n    __children: [\n      {\n        title: 'Drones',\n        artist: 'Muse',\n        label: 'Warner Bros. Records',\n      },\n      {\n        title: 'Chaos And The Calm',\n        artist: 'James Bay',\n        label: 'Republic',\n      },\n      {\n        title: 'Kintsugi',\n        artist: 'Death Cab For Cutie',\n        label: 'Atlantic',\n      },\n      {\n        title: 'Mister Asylum',\n        artist: 'Highly Suspect',\n        label: '300 Entertainment',\n      },\n      {\n        title: '.5: The Gray Chapter',\n        artist: 'Slipknot',\n        label: 'Roadrunner Records',\n      },\n    ],\n  },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: sourceDataObject,\n  preventOverflow: 'horizontal',\n  rowHeaders: true,\n  colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n  nestedRows: true,\n  contextMenu: true,\n  bindRowsWithHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseParent(8);\n  },\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example1.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example2.vue.json
index 5f72d091f..a15dce650 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row parent-child · Methods · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n};\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Click a button to call a method.');\n\n// A plain const, so a status change beside the grid never triggers `updateSettings()`.\nconst hotSettings: GridSettings = {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst getPlugin = () => hotRef.value?.hotInstance?.getPlugin('nestedRows');\nconst countRows = () => hotRef.value?.hotInstance?.countRows();\n\nconst collapseAll = () => {\n  getPlugin()?.collapseAll();\n  output.value = `collapseAll() -> ${countRows()} rows are visible now`;\n};\n\nconst expandAll = () => {\n  getPlugin()?.expandAll();\n  output.value = `expandAll() -> ${countRows()} rows are visible now`;\n};\n\n// `toggleParent` takes a visual row index and returns `true` when the state changed.\nconst toggleFirst = () => {\n  const plugin = getPlugin();\n  const changed = plugin?.toggleParent(0);\n\n  output.value = `toggleParent(0) -> ${changed}, collapsed: ${plugin?.isParentCollapsed(0)}`;\n};\n\n// `getCollapsedParents` returns physical row indexes, because a parent collapsed inside another\n// collapsed parent has no visual index at all.\nconst readState = () => {\n  const plugin = getPlugin();\n\n  output.value =\n    `getCollapsedParents() -> [${plugin?.getCollapsedParents()}]\\n` +\n    `getRowLevel(0) -> ${plugin?.getRowLevel(0)}\\n` +\n    `countChildren(0) -> ${plugin?.countChildren(0)}`;\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"collapseAll\">collapseAll()</button>\n        <button class=\"button button--primary\" @click=\"expandAll\">expandAll()</button>\n        <button class=\"button button--primary\" @click=\"toggleFirst\">toggleParent(0)</button>\n        <button class=\"button button--primary\" @click=\"readState\">Read the state</button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example2.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row parent-child · Methods · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n};\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Click a button to call a method.');\n\n// A plain const, so a status change beside the grid never triggers `updateSettings()`.\nconst hotSettings: GridSettings = {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst getPlugin = () => hotRef.value?.hotInstance?.getPlugin('nestedRows');\nconst countRows = () => hotRef.value?.hotInstance?.countRows();\n\nconst collapseAll = () => {\n  getPlugin()?.collapseAll();\n  output.value = `collapseAll() -> ${countRows()} rows are visible now`;\n};\n\nconst expandAll = () => {\n  getPlugin()?.expandAll();\n  output.value = `expandAll() -> ${countRows()} rows are visible now`;\n};\n\n// `toggleParent` takes a visual row index and returns `true` when the state changed.\nconst toggleFirst = () => {\n  const plugin = getPlugin();\n  const changed = plugin?.toggleParent(0);\n\n  output.value = `toggleParent(0) -> ${changed}, collapsed: ${plugin?.isParentCollapsed(0)}`;\n};\n\n// `getCollapsedParents` returns physical row indexes, because a parent collapsed inside another\n// collapsed parent has no visual index at all.\nconst readState = () => {\n  const plugin = getPlugin();\n\n  output.value =\n    `getCollapsedParents() -> [${plugin?.getCollapsedParents()}]\\n` +\n    `getRowLevel(0) -> ${plugin?.getRowLevel(0)}\\n` +\n    `countChildren(0) -> ${plugin?.countChildren(0)}`;\n};\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"collapseAll\">collapseAll()</button>\n        <button class=\"button button--primary\" @click=\"expandAll\">expandAll()</button>\n        <button class=\"button button--primary\" @click=\"toggleFirst\">toggleParent(0)</button>\n        <button class=\"button button--primary\" @click=\"readState\">Read the state</button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example2.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example2","exampleTitle":"Methods","docPermalink":"/row-parent-child","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example3.vue.json
index 00396b12f..03586b1fc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-parent-child__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n};\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Everything starts collapsed. Pick a task to jump to.');\n\nconst hotSettings: GridSettings = {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n};\n\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName: string) => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const plugin = hot.getPlugin('nestedRows');\n  const row = physicalRowOf.get(taskName)!;\n  const wasHidden = hot.toVisualRow(row) === null;\n\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n\n  const visualRow = hot.toVisualRow(row)!;\n\n  hot.selectCell(visualRow, 0);\n\n  output.value =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n    `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\n\nconst collapseEverything = () => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.getPlugin('nestedRows').collapseAll();\n  output.value = `Collapsed again - ${hot?.countRows()} rows are visible.`;\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"revealTask('Auth endpoints')\">\n          Find \"Auth endpoints\"\n        </button>\n        <button class=\"button button--primary\" @click=\"revealTask('Visual design')\">\n          Find \"Visual design\"\n        </button>\n        <button class=\"button button--primary\" @click=\"collapseEverything\">\n          Collapse everything\n        </button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example3.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row parent-child · Jump to a row inside a collapsed branch · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype TaskRow = {\n  task: string;\n  owner: string;\n  status: string;\n  __children?: TaskRow[];\n};\n\nconst projectPlan: TaskRow[] = [\n  {\n    task: 'Marketing',\n    owner: 'Dana',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'Website refresh',\n        owner: 'Ivy',\n        status: 'In progress',\n        __children: [\n          { task: 'Copywriting', owner: 'Leo', status: 'Done' },\n          { task: 'Visual design', owner: 'Mia', status: 'In review' },\n        ],\n      },\n      { task: 'Ad campaign', owner: 'Nico', status: 'Planned' },\n    ],\n  },\n  {\n    task: 'Engineering',\n    owner: 'Sam',\n    status: 'In progress',\n    __children: [\n      {\n        task: 'API v2',\n        owner: 'Ravi',\n        status: 'In progress',\n        __children: [{ task: 'Auth endpoints', owner: 'Tess', status: 'Done' }],\n      },\n      { task: 'Bug triage', owner: 'Kai', status: 'Planned' },\n    ],\n  },\n];\n\n// Physical row indexes follow the source data, depth first. Walk the tree once to map every task\n// name to its physical row - that is the index `expandToRow` needs.\nconst physicalRowOf = new Map<string, number>();\n\nlet physicalRow = 0;\n\n(function walk(rows: TaskRow[]) {\n  rows.forEach((row) => {\n    physicalRowOf.set(row.task, physicalRow);\n    physicalRow += 1;\n    walk(row.__children ?? []);\n  });\n})(projectPlan);\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst output = ref('Everything starts collapsed. Pick a task to jump to.');\n\nconst hotSettings: GridSettings = {\n  data: projectPlan,\n  columns: [{ data: 'task' }, { data: 'owner' }, { data: 'status' }],\n  colHeaders: ['Task', 'Owner', 'Status'],\n  rowHeaders: true,\n  nestedRows: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  afterInit() {\n    this.getPlugin('nestedRows').collapseAll();\n  },\n};\n\n// Reveals a task that is currently hidden inside collapsed parents, then selects it.\nconst revealTask = (taskName: string) => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) {\n    return;\n  }\n\n  const plugin = hot.getPlugin('nestedRows');\n  const row = physicalRowOf.get(taskName)!;\n  const wasHidden = hot.toVisualRow(row) === null;\n\n  // `expandToRow` takes a PHYSICAL index, because a hidden row has no visual index yet.\n  plugin.expandToRow(row);\n\n  const visualRow = hot.toVisualRow(row)!;\n\n  hot.selectCell(visualRow, 0);\n\n  output.value =\n    `\"${taskName}\" was ${wasHidden ? 'hidden' : 'already visible'}.\\n` +\n    `physical row ${row} -> visual row ${visualRow}, nesting level ${plugin.getRowLevel(visualRow)}`;\n};\n\nconst collapseEverything = () => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.getPlugin('nestedRows').collapseAll();\n  output.value = `Collapsed again - ${hot?.countRows()} rows are visible.`;\n};\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button class=\"button button--primary\" @click=\"revealTask('Auth endpoints')\">\n          Find \"Auth endpoints\"\n        </button>\n        <button class=\"button button--primary\" @click=\"revealTask('Visual design')\">\n          Find \"Visual design\"\n        </button>\n        <button class=\"button button--primary\" @click=\"collapseEverything\">\n          Collapse everything\n        </button>\n      </div>\n      <output class=\"console\">{{ output }}</output>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-parent-child/vue/example3.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example3","exampleTitle":"Jump to a row inside a collapsed branch","docPermalink":"/row-parent-child","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example1.ts.json
index fa1ab5267..c7fcd4407 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotSettings: GridSettings = {};\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  ngAfterViewInit() {\n    const templateValues = ['one', 'two', 'three'];\n    const data = [\n      ['Hydrogen', 'H', 1, 1.008, 7],\n      ['Helium', 'He', 2, 4.003, 9],\n      ['Lithium', 'Li', 3, 6.94, 9],\n      ['Beryllium', 'Be', 4, 9.012, 11],\n      ['Boron', 'B', 5, 10.81, 15],\n    ];\n\n    function isEmptyRow(instance: Handsontable, row: number) {\n      const rowData = instance.getDataAtRow(row);\n\n      for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n        if (rowData[i] !== null) {\n          return false;\n        }\n      }\n\n      return true;\n    }\n\n    const defaultValueRenderer = (\n      instance: Handsontable,\n      td: HTMLTableCellElement,\n      row: number,\n      col: number,\n      prop: string | number,\n      value: Handsontable.CellValue,\n      cellProperties: Handsontable.CellProperties\n    ) => {\n      if (value === null && isEmptyRow(instance, row)) {\n        value = templateValues[col];\n        td.style.color = '#999';\n      } else {\n        td.style.color = '';\n      }\n\n      textRenderer(\n        instance,\n        td,\n        row,\n        col,\n        prop,\n        value,\n        cellProperties\n      );\n    };\n\n    const hot = this.hotTable.hotInstance!;\n\n    this.hotSettings = {\n      startRows: 8,\n      startCols: 5,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      minSpareRows: 1,\n      contextMenu: true,\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      cells() {\n        return { renderer: defaultValueRenderer };\n      },\n      beforeChange: function (changes: (Handsontable.CellChange | null)[]) {\n        const instance = hot;\n        const columns = instance.countCols();\n        const rowColumnSeen: Record<string, boolean> = {};\n        const rowsToFill: Record<string, boolean> = {};\n        const ch = changes === null ? [] : changes!;\n\n        for (let i = 0; i < ch.length; i++) {\n          const currChange = ch[i];\n\n          if (!currChange) continue;\n\n          // if oldVal is empty\n          if (currChange[2] === null && currChange[3] !== null) {\n            if (isEmptyRow(instance, currChange[0])) {\n              // add this row/col combination to the cache so it will not be overwritten by the template\n              rowColumnSeen[`${currChange[0]}/${currChange[1]}`] = true;\n              rowsToFill[String(currChange[0])] = true;\n            }\n          }\n        }\n\n        for (const r in rowsToFill) {\n          if (rowsToFill.hasOwnProperty(r)) {\n            for (let c = 0; c < columns; c++) {\n              // if it is not provided by user in this change set, take the value from the template\n              if (!rowColumnSeen[`${r}/${c}`]) {\n                ch.push([Number(r), c, null, templateValues[c]]);\n              }\n            }\n          }\n        }\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    }\n\n    this.hotTable.hotInstance!.loadData(data);\n  }\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example1.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table [settings]=\"hotSettings!\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotSettings: GridSettings = {};\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  ngAfterViewInit() {\n    const templateValues = ['one', 'two', 'three'];\n    const data = [\n      ['Hydrogen', 'H', 1, 1.008, 7],\n      ['Helium', 'He', 2, 4.003, 9],\n      ['Lithium', 'Li', 3, 6.94, 9],\n      ['Beryllium', 'Be', 4, 9.012, 11],\n      ['Boron', 'B', 5, 10.81, 15],\n    ];\n\n    function isEmptyRow(instance: Handsontable, row: number) {\n      const rowData = instance.getDataAtRow(row);\n\n      for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n        if (rowData[i] !== null) {\n          return false;\n        }\n      }\n\n      return true;\n    }\n\n    const defaultValueRenderer = (\n      instance: Handsontable,\n      td: HTMLTableCellElement,\n      row: number,\n      col: number,\n      prop: string | number,\n      value: Handsontable.CellValue,\n      cellProperties: Handsontable.CellProperties\n    ) => {\n      if (value === null && isEmptyRow(instance, row)) {\n        value = templateValues[col];\n        td.style.color = '#999';\n      } else {\n        td.style.color = '';\n      }\n\n      textRenderer(\n        instance,\n        td,\n        row,\n        col,\n        prop,\n        value,\n        cellProperties\n      );\n    };\n\n    const hot = this.hotTable.hotInstance!;\n\n    this.hotSettings = {\n      startRows: 8,\n      startCols: 5,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      minSpareRows: 1,\n      contextMenu: true,\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      cells() {\n        return { renderer: defaultValueRenderer };\n      },\n      beforeChange: function (changes: (Handsontable.CellChange | null)[]) {\n        const instance = hot;\n        const columns = instance.countCols();\n        const rowColumnSeen: Record<string, boolean> = {};\n        const rowsToFill: Record<string, boolean> = {};\n        const ch = changes === null ? [] : changes!;\n\n        for (let i = 0; i < ch.length; i++) {\n          const currChange = ch[i];\n\n          if (!currChange) continue;\n\n          // if oldVal is empty\n          if (currChange[2] === null && currChange[3] !== null) {\n            if (isEmptyRow(instance, currChange[0])) {\n              // add this row/col combination to the cache so it will not be overwritten by the template\n              rowColumnSeen[`${currChange[0]}/${currChange[1]}`] = true;\n              rowsToFill[String(currChange[0])] = true;\n            }\n          }\n        }\n\n        for (const r in rowsToFill) {\n          if (rowsToFill.hasOwnProperty(r)) {\n            for (let c = 0; c < columns; c++) {\n              // if it is not provided by user in this change set, take the value from the template\n              if (!rowColumnSeen[`${r}/${c}`]) {\n                ch.push([Number(r), c, null, templateValues[c]]);\n              }\n            }\n          }\n        }\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    }\n\n    this.hotTable.hotInstance!.loadData(data);\n  }\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example1.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example2.ts.json
index 664d1b809..9499fc550 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst templateValues = ['one', 'two', 'three'];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table [settings]=\"gridSettings\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    minSpareRows: 1,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    cells() {\n      return { renderer: defaultValueRenderer };\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example2.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst templateValues = ['one', 'two', 'three'];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (\n  instance: Handsontable,\n  td: HTMLTableCellElement,\n  row: number,\n  col: number,\n  prop: string | number,\n  value: Handsontable.CellValue,\n  cellProperties: Handsontable.CellProperties\n) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table [settings]=\"gridSettings\" [data]=\"hotData\"></hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n    minSpareRows: 1,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    cells() {\n      return { renderer: defaultValueRenderer };\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example2.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example3.ts.json
index 284b5d788..f15e5a746 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  hotSettings: GridSettings = {};\n\n  ngAfterViewInit() {\n    const templateValues = ['one', 'two', 'three'];\n\n    function isEmptyRow(instance: Handsontable, row: number) {\n      const rowData = instance.getDataAtRow(row);\n\n      for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n        if (rowData[i] !== null) {\n          return false;\n        }\n      }\n\n      return true;\n    }\n\n    const defaultValueRenderer = (\n      instance: Handsontable,\n      td: HTMLTableCellElement,\n      row: number,\n      col: number,\n      prop: string | number,\n      value: Handsontable.CellValue,\n      cellProperties: Handsontable.CellProperties\n    ) => {\n      if (value === null && isEmptyRow(instance, row)) {\n        value = templateValues[col];\n        td.style.color = '#999';\n      } else {\n        td.style.color = '';\n      }\n\n      textRenderer(\n        instance,\n        td,\n        row,\n        col,\n        prop,\n        value,\n        cellProperties\n      );\n    };\n\n    this.hotSettings = {\n      startRows: 8,\n      startCols: 5,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      minSpareRows: 1,\n      contextMenu: true,\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      cells() {\n        return { renderer: defaultValueRenderer };\n      },\n      beforeChange: (changes: (Handsontable.CellChange | null)[]) => {\n        const instance = this.hotTable.hotInstance!;\n        const columns = instance.countCols();\n        const rowColumnSeen: Record<string, boolean> = {};\n        const rowsToFill: Record<string, boolean> = {};\n        const ch = changes === null ? [] : changes!;\n\n        for (let i = 0; i < ch.length; i++) {\n          const currChange = ch[i];\n\n          if (!currChange) continue;\n\n          // if oldVal is empty\n          if (currChange[2] === null && currChange[3] !== null) {\n            if (isEmptyRow(instance, currChange[0])) {\n              // add this row/col combination to the cache so it will not be overwritten by the template\n              rowColumnSeen[`${currChange[0]}/${currChange[1]}`] = true;\n              rowsToFill[String(currChange[0])] = true;\n            }\n          }\n        }\n\n        for (const r in rowsToFill) {\n          if (rowsToFill.hasOwnProperty(r)) {\n            for (let c = 0; c < columns; c++) {\n              // if it is not provided by user in this change set, take the value from the template\n              if (!rowColumnSeen[`${r}/${c}`]) {\n                ch.push([Number(r), c, null, templateValues[c]]);\n              }\n            }\n          }\n        }\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    }\n\n  }\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example3.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  hotData = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  hotSettings: GridSettings = {};\n\n  ngAfterViewInit() {\n    const templateValues = ['one', 'two', 'three'];\n\n    function isEmptyRow(instance: Handsontable, row: number) {\n      const rowData = instance.getDataAtRow(row);\n\n      for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n        if (rowData[i] !== null) {\n          return false;\n        }\n      }\n\n      return true;\n    }\n\n    const defaultValueRenderer = (\n      instance: Handsontable,\n      td: HTMLTableCellElement,\n      row: number,\n      col: number,\n      prop: string | number,\n      value: Handsontable.CellValue,\n      cellProperties: Handsontable.CellProperties\n    ) => {\n      if (value === null && isEmptyRow(instance, row)) {\n        value = templateValues[col];\n        td.style.color = '#999';\n      } else {\n        td.style.color = '';\n      }\n\n      textRenderer(\n        instance,\n        td,\n        row,\n        col,\n        prop,\n        value,\n        cellProperties\n      );\n    };\n\n    this.hotSettings = {\n      startRows: 8,\n      startCols: 5,\n      colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n      minSpareRows: 1,\n      contextMenu: true,\n      height: 'auto',\n      licenseKey: 'non-commercial-and-evaluation',\n      cells() {\n        return { renderer: defaultValueRenderer };\n      },\n      beforeChange: (changes: (Handsontable.CellChange | null)[]) => {\n        const instance = this.hotTable.hotInstance!;\n        const columns = instance.countCols();\n        const rowColumnSeen: Record<string, boolean> = {};\n        const rowsToFill: Record<string, boolean> = {};\n        const ch = changes === null ? [] : changes!;\n\n        for (let i = 0; i < ch.length; i++) {\n          const currChange = ch[i];\n\n          if (!currChange) continue;\n\n          // if oldVal is empty\n          if (currChange[2] === null && currChange[3] !== null) {\n            if (isEmptyRow(instance, currChange[0])) {\n              // add this row/col combination to the cache so it will not be overwritten by the template\n              rowColumnSeen[`${currChange[0]}/${currChange[1]}`] = true;\n              rowsToFill[String(currChange[0])] = true;\n            }\n          }\n        }\n\n        for (const r in rowsToFill) {\n          if (rowsToFill.hasOwnProperty(r)) {\n            for (let c = 0; c < columns; c++) {\n              // if it is not provided by user in this change set, take the value from the template\n              if (!rowColumnSeen[`${r}/${c}`]) {\n                ch.push([Number(r), c, null, templateValues[c]]);\n              }\n            }\n          }\n        }\n      },\n      autoWrapRow: true,\n      autoWrapCol: true,\n    }\n\n  }\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-prepopulating/angular/example3.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.js.json
index 7646cc07f..d2fb15367 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example1.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example1.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.ts.json
index 0d6d6496f..307442a58 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example1.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example1.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.js.json
index 4c25ec1ef..557cc8421 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance, row) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example2.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance, row) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example2');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example2.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.ts.json
index 3e45d1356..ff1eb7c56 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example2.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example2.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.js.json
index 874f54ecb..5b257b3b1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance, row) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example3');\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hot;\n    const columns = instance.countCols();\n    const rowColumnSeen = {};\n    const rowsToFill = {};\n    const ch = changes === null ? [] : changes;\n\n    for (let i = 0; i < changes.length; i++) {\n      // if oldVal is empty\n      if (ch[i][2] === null && ch[i][3] !== null) {\n        if (isEmptyRow(instance, ch[i][0])) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;\n          rowsToFill[ch[i][0]] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example3.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance, row) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example3');\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hot;\n    const columns = instance.countCols();\n    const rowColumnSeen = {};\n    const rowsToFill = {};\n    const ch = changes === null ? [] : changes;\n\n    for (let i = 0; i < changes.length; i++) {\n      // if oldVal is empty\n      if (ch[i][2] === null && ch[i][3] !== null) {\n        if (isEmptyRow(instance, ch[i][0])) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;\n          rowsToFill[ch[i][0]] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example3.js","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.ts.json
index df3f96b72..333ac43b2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst templateValues: string[] = ['one', 'two', 'three'];\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hot;\n    const columns = instance.countCols();\n    const rowColumnSeen = {};\n    const rowsToFill = {};\n    const ch = changes === null ? [] : (changes as Handsontable.CellChange);\n\n    for (let i = 0; i < changes.length; i++) {\n      // if oldVal is empty\n      if (ch[i][2] === null && ch[i][3] !== null) {\n        if (isEmptyRow(instance, ch[i][0])) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;\n          rowsToFill[ch[i][0]] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example3.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst templateValues: string[] = ['one', 'two', 'three'];\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hot;\n    const columns = instance.countCols();\n    const rowColumnSeen = {};\n    const rowsToFill = {};\n    const ch = changes === null ? [] : (changes as Handsontable.CellChange);\n\n    for (let i = 0; i < changes.length; i++) {\n      // if oldVal is empty\n      if (ch[i][2] === null && ch[i][3] !== null) {\n        if (isEmptyRow(instance, ch[i][0])) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;\n          rowsToFill[ch[i][0]] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-prepopulating/javascript/example3.ts","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example1.tsx.json
index 1bba98d75..2a000fc5f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row pre-populating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      minSpareRows={1}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example1.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row pre-populating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      minSpareRows={1}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example1.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example2.tsx.json
index 9f2440278..0e998896c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  function isEmptyRow(instance: Handsontable, row: number) {\n    const rowData = instance.getDataAtRow(row);\n\n    for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n      if (rowData[i] !== null) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  function defaultValueRenderer(\n    this: Handsontable,\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number\n  ) {\n    const args = arguments;\n\n    if (args[5] === null && isEmptyRow(instance, row)) {\n      args[5] = templateValues[col];\n      td.style.color = '#999';\n    } else {\n      td.style.color = '';\n    }\n\n    textRenderer.apply(this, args as any);\n  }\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      minSpareRows={1}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      cells={() => ({ renderer: defaultValueRenderer })}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example2.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst ExampleComponent = () => {\n  function isEmptyRow(instance: Handsontable, row: number) {\n    const rowData = instance.getDataAtRow(row);\n\n    for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n      if (rowData[i] !== null) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  function defaultValueRenderer(\n    this: Handsontable,\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number\n  ) {\n    const args = arguments;\n\n    if (args[5] === null && isEmptyRow(instance, row)) {\n      args[5] = templateValues[col];\n      td.style.color = '#999';\n    } else {\n      td.style.color = '';\n    }\n\n    textRenderer.apply(this, args as any);\n  }\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n      minSpareRows={1}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      cells={() => ({ renderer: defaultValueRenderer })}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example2.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example3.tsx.json
index c8d854217..f7532b28c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport Handsontable from 'handsontable/base';\nimport { CellChange } from 'handsontable';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const templateValues = ['one', 'two', 'three'];\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  function isEmptyRow(instance: Handsontable, row: number) {\n    const rowData = instance.getDataAtRow(row);\n\n    for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n      if (rowData[i] !== null) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  function defaultValueRenderer(\n    this: Handsontable,\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number\n  ) {\n    const args = arguments;\n\n    if (args[5] === null && isEmptyRow(instance, row)) {\n      args[5] = templateValues[col];\n      td.style.color = '#999';\n    } else {\n      td.style.color = '';\n    }\n\n    textRenderer.apply(this, args as any);\n  }\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        startRows={8}\n        startCols={5}\n        colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n        minSpareRows={1}\n        contextMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        cells={function (row, col, prop) {\n          const cellProperties: Handsontable.CellMeta = {};\n\n          cellProperties.renderer = defaultValueRenderer;\n\n          return cellProperties;\n        }}\n        beforeChange={function (changes) {\n          const instance = hotRef.current?.hotInstance;\n          const columns = instance?.countCols() || 0;\n          const rowColumnSeen = {};\n          const rowsToFill = {};\n\n          for (let i = 0; i < changes.length; i++) {\n            const cellChanges = changes as CellChange;\n\n            // if oldVal is empty\n            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {\n              if (isEmptyRow(instance!, cellChanges[i][0])) {\n                // add this row/col combination to the cache so it will not be overwritten by the template\n                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;\n                rowsToFill[cellChanges[i][0]] = true;\n              }\n            }\n          }\n\n          for (const r in rowsToFill) {\n            if (rowsToFill.hasOwnProperty(r)) {\n              for (let c = 0; c < columns; c++) {\n                // if it is not provided by user in this change set, take the value from the template\n                if (!rowColumnSeen[`${r}/${c}`]) {\n                  changes.push([r, c, null, templateValues[c]]);\n                }\n              }\n            }\n          }\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example3.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport Handsontable from 'handsontable/base';\nimport { CellChange } from 'handsontable';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const templateValues = ['one', 'two', 'three'];\n  const data = [\n    ['Hydrogen', 'H', 1, 1.008, 7],\n    ['Helium', 'He', 2, 4.003, 9],\n    ['Lithium', 'Li', 3, 6.94, 9],\n    ['Beryllium', 'Be', 4, 9.012, 11],\n    ['Boron', 'B', 5, 10.81, 15],\n  ];\n\n  function isEmptyRow(instance: Handsontable, row: number) {\n    const rowData = instance.getDataAtRow(row);\n\n    for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n      if (rowData[i] !== null) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  function defaultValueRenderer(\n    this: Handsontable,\n    instance: Handsontable,\n    td: HTMLTableCellElement,\n    row: number,\n    col: number\n  ) {\n    const args = arguments;\n\n    if (args[5] === null && isEmptyRow(instance, row)) {\n      args[5] = templateValues[col];\n      td.style.color = '#999';\n    } else {\n      td.style.color = '';\n    }\n\n    textRenderer.apply(this, args as any);\n  }\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        startRows={8}\n        startCols={5}\n        colHeaders={['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes']}\n        minSpareRows={1}\n        contextMenu={true}\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        cells={function (row, col, prop) {\n          const cellProperties: Handsontable.CellMeta = {};\n\n          cellProperties.renderer = defaultValueRenderer;\n\n          return cellProperties;\n        }}\n        beforeChange={function (changes) {\n          const instance = hotRef.current?.hotInstance;\n          const columns = instance?.countCols() || 0;\n          const rowColumnSeen = {};\n          const rowsToFill = {};\n\n          for (let i = 0; i < changes.length; i++) {\n            const cellChanges = changes as CellChange;\n\n            // if oldVal is empty\n            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {\n              if (isEmptyRow(instance!, cellChanges[i][0])) {\n                // add this row/col combination to the cache so it will not be overwritten by the template\n                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;\n                rowsToFill[cellChanges[i][0]] = true;\n              }\n            }\n          }\n\n          for (const r in rowsToFill) {\n            if (rowsToFill.hasOwnProperty(r)) {\n              for (let c = 0; c < columns; c++) {\n                // if it is not provided by user in this change set, take the value from the template\n                if (!rowColumnSeen[`${r}/${c}`]) {\n                  changes.push([r, c, null, templateValues[c]]);\n                }\n              }\n            }\n          }\n        }}\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-prepopulating/react/example3.tsx","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example1.vue.json
index 2f15b6a6f..bf9aaefcc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example1.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example1.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-prepopulating","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example2.vue.json
index eebbef1e3..8fe6e7cdb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { type BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example2.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Spare rows with placeholder styling · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { type BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst templateValues = ['one', 'two', 'three'];\nconst data = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example2.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example2","exampleTitle":"Spare rows with placeholder styling","docPermalink":"/row-prepopulating","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example3.vue.json
index 9717dad32..463c6c4ee 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-prepopulating__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { type BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst templateValues: string[] = ['one', 'two', 'three'];\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hotRef.value?.hotInstance;\n\n    if (!instance || changes === null) {\n      return;\n    }\n\n    const columns = instance.countCols();\n    const rowColumnSeen: Record<string, boolean> = {};\n    const rowsToFill: Record<string, boolean> = {};\n    for (let i = 0; i < changes.length; i++) {\n      const ch = changes[i] as Handsontable.CellChange;\n\n      // if oldVal is empty\n      if (ch[2] === null && ch[3] !== null) {\n        if (isEmptyRow(instance, ch[0] as number)) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[0]}/${ch[1]}`] = true;\n          rowsToFill[String(ch[0])] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example3.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row pre-populating · Auto-populating with template values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { type BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst templateValues: string[] = ['one', 'two', 'three'];\nconst data: (string | number)[][] = [\n  ['Hydrogen', 'H', 1, 1.008, 7],\n  ['Helium', 'He', 2, 4.003, 9],\n  ['Lithium', 'Li', 3, 6.94, 9],\n  ['Beryllium', 'Be', 4, 9.012, 11],\n  ['Boron', 'B', 5, 10.81, 15],\n];\n\nfunction isEmptyRow(instance: Handsontable, row: number) {\n  const rowData = instance.getDataAtRow(row);\n\n  for (let i = 0, ilen = rowData.length; i < ilen; i++) {\n    if (rowData[i] !== null) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  if (value === null && isEmptyRow(instance, row)) {\n    value = templateValues[col];\n    td.style.color = '#999';\n  } else {\n    td.style.color = '';\n  }\n\n  textRenderer(instance, td, row, col, prop, value, cellProperties);\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  startRows: 8,\n  startCols: 5,\n  colHeaders: ['Name', 'Symbol', 'Atomic Number', 'Atomic Mass (u)', 'Known Isotopes'],\n  minSpareRows: 1,\n  contextMenu: true,\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n  cells() {\n    return { renderer: defaultValueRenderer };\n  },\n  beforeChange(changes) {\n    const instance = hotRef.value?.hotInstance;\n\n    if (!instance || changes === null) {\n      return;\n    }\n\n    const columns = instance.countCols();\n    const rowColumnSeen: Record<string, boolean> = {};\n    const rowsToFill: Record<string, boolean> = {};\n    for (let i = 0; i < changes.length; i++) {\n      const ch = changes[i] as Handsontable.CellChange;\n\n      // if oldVal is empty\n      if (ch[2] === null && ch[3] !== null) {\n        if (isEmptyRow(instance, ch[0] as number)) {\n          // add this row/col combination to the cache so it will not be overwritten by the template\n          rowColumnSeen[`${ch[0]}/${ch[1]}`] = true;\n          rowsToFill[String(ch[0])] = true;\n        }\n      }\n    }\n\n    for (const r in rowsToFill) {\n      if (rowsToFill.hasOwnProperty(r)) {\n        for (let c = 0; c < columns; c++) {\n          // if it is not provided by user in this change set, take the value from the template\n          if (!rowColumnSeen[`${r}/${c}`]) {\n            changes.push([Number(r), c, null, templateValues[c]]);\n          }\n        }\n      }\n    }\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-prepopulating/vue/example3.vue","breadcrumb":["Rows","Row pre-populating"],"guide":"guides/rows/row-prepopulating/row-prepopulating.md","guideTitle":"Row pre-populating","exampleId":"example3","exampleTitle":"Auto-populating with template values","docPermalink":"/row-prepopulating","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__angular__example1.ts.json
index e702999dd..83b327aa4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row trimming · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    trimRows: [1, 2, 5],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-trimming/angular/example1.ts","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row trimming · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    trimRows: [1, 2, 5],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-trimming/angular/example1.ts","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.js.json
index 2fea073de..0319b8953 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row trimming · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    trimRows: [1, 2, 5],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-trimming/javascript/example1.js","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row trimming · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n    data: [\n        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n        ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n        ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n        ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n        ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n        ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n    ],\n    colHeaders: true,\n    rowHeaders: true,\n    trimRows: [1, 2, 5],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-trimming/javascript/example1.js","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.ts.json
index 72505e7a1..e64375a0f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row trimming · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  trimRows: [1, 2, 5],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-trimming/javascript/example1.ts","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row trimming · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  trimRows: [1, 2, 5],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-trimming/javascript/example1.ts","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__react__example1.tsx.json
index 8d7e6f35b..00014186d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row trimming · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      trimRows={[1, 2, 5]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-trimming/react/example1.tsx","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row trimming · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n  ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n  ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n  ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      trimRows={[1, 2, 5]}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-trimming/react/example1.tsx","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__vue__example1.vue.json
index 0e9ab339d..9613ca677 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-trimming__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row trimming · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  trimRows: [1, 2, 5],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-trimming/vue/example1.vue","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row trimming · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', '215'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', '38'],\n    ['SKU-4412', 'Canvas Tote Bag', 'Nordic Traders', '190'],\n    ['SKU-5088', 'USB-C Hub', 'Harbor Goods', '54'],\n    ['SKU-6120', 'Ceramic Mug Set', 'Alpine Supply Co.', '88'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  trimRows: [1, 2, 5],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-trimming/vue/example1.vue","breadcrumb":["Rows","Row trimming"],"guide":"guides/rows/row-trimming/row-trimming.md","guideTitle":"Row trimming","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-trimming","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__angular__example1.ts.json
index bb8b17621..2bf79daf6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Row virtualization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(1000) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(1000) // number of columns\n        .fill(null)\n        .map((_v, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-virtualization/angular/example1.ts","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Row virtualization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  // generate an array of arrays with dummy data\n  readonly hotData = new Array(1000) // number of rows\n    .fill(null)\n    .map((_, row) =>\n      new Array(1000) // number of columns\n        .fill(null)\n        .map((_v, column) => `${row}, ${column}`)\n    );\n\n  readonly hotSettings: GridSettings = {\n    colWidths: 100,\n    width: '100%',\n    height: 320,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/row-virtualization/angular/example1.ts","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.js.json
index 9046eec39..cec0308cb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Row virtualization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-virtualization/javascript/example1.js","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Row virtualization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-virtualization/javascript/example1.js","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.ts.json
index 5f734c7fd..0fa1b01ff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Row virtualization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-virtualization/javascript/example1.ts","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Row virtualization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-virtualization/javascript/example1.ts","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__react__example1.tsx.json
index cc986beb9..22d5cab9a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Row virtualization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(0)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(0)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-virtualization/react/example1.tsx","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Row virtualization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(1000) // number of rows\n  .fill(0)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(0)\n      .map((_, column) => `${row}, ${column}`)\n  );\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colWidths={100}\n      width=\"100%\"\n      height={320}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-virtualization/react/example1.tsx","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__vue__example1.vue.json
index 0425191fc..5aa988379 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__row-virtualization__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Row virtualization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-virtualization/vue/example1.vue","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Row virtualization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(1000) // number of rows\n  .fill(null)\n  .map((_, row) =>\n    new Array(1000) // number of columns\n      .fill(null)\n      .map((_v, column) => `${row}, ${column}`)\n  );\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colWidths: 100,\n  width: '100%',\n  height: 320,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/row-virtualization/vue/example1.vue","breadcrumb":["Rows","Row virtualization"],"guide":"guides/rows/row-virtualization/row-virtualization.md","guideTitle":"Row virtualization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-virtualization","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example1.ts.json
index 62e350092..9db5226f9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example1.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example1.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example2.ts.json
index 887d59db6..97b9b3037 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Configure pagination · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .ht-root-wrapper {\n        border: 1px dashed var(--sl-color-accent, #1A42E8);\n        border-radius: 4px;\n        height: 300px;\n        min-height: 120px;\n        max-height: 600px;\n        resize: vertical;\n        overflow: auto;\n      }\n    }\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      pageSize: 'auto',\n      pageSizeList: ['auto', 5, 10, 20, 50, 100],\n      initialPage: 2,\n      showPageSize: true,\n      showCounter: false,\n      showNavigation: true,\n    },\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: '100%',\n    stretchH: 'all',\n    contextMenu: true,\n    dropdownMenu: true,\n    filters: true,\n    columnSorting: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example2.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Configure pagination · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .ht-root-wrapper {\n        border: 1px dashed var(--sl-color-accent, #1A42E8);\n        border-radius: 4px;\n        height: 300px;\n        min-height: 120px;\n        max-height: 600px;\n        resize: vertical;\n        overflow: auto;\n      }\n    }\n  `,\n})\nexport class AppComponent {\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      pageSize: 'auto',\n      pageSizeList: ['auto', 5, 10, 20, 50, 100],\n      initialPage: 2,\n      showPageSize: true,\n      showCounter: false,\n      showNavigation: true,\n    },\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: '100%',\n    stretchH: 'all',\n    contextMenu: true,\n    dropdownMenu: true,\n    filters: true,\n    columnSorting: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example2.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example3.ts.json
index 3086f03fc..bde371f8b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button [disabled]=\"isFirstPage\" (click)=\"goToFirstPage()\">First page</button>\n        <button [disabled]=\"isFirstPage\" (click)=\"goToPrevPage()\">Previous page</button>\n        <button [disabled]=\"isLastPage\" (click)=\"goToNextPage()\">Next page</button>\n        <button [disabled]=\"isLastPage\" (click)=\"goToLastPage()\">Last page</button>\n        <label for=\"pageNumber\">Page:\n          <input type=\"number\" id=\"pageNumber\" [value]=\"currentPage\" [min]=\"1\" [max]=\"totalPages\" (input)=\"onPageNumberChange($event)\">\n        </label>\n        <output>{{ firstVisibleRow }} - {{ lastVisibleRow }} of {{ totalRows }} rows</output>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private paginationPlugin: any;\n\n  currentPage = 1;\n  totalPages = 1;\n  isFirstPage = true;\n  isLastPage = false;\n  firstVisibleRow = 1;\n  lastVisibleRow = 1;\n  totalRows = 1;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      pageSize: 25,\n      initialPage: 1,\n      showPageSize: false,\n      showCounter: false,\n      showNavigation: false,\n    },\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      this.paginationPlugin = hotInstance.getPlugin('pagination');\n\n      // defer the state update to the next change detection cycle\n      setTimeout(() => {\n        this.updateState();\n      });\n\n      hotInstance.addHook('afterPageChange', () => {\n        this.updateState();\n      });\n    }\n  }\n\n  private updateState() {\n    const {\n      currentPage,\n      totalPages,\n      firstVisibleRowIndex,\n      lastVisibleRowIndex,\n      totalRenderedRows,\n    } = this.paginationPlugin.getPaginationData();\n\n    this.currentPage = currentPage;\n    this.totalPages = totalPages;\n    this.isFirstPage = currentPage === 1;\n    this.isLastPage = currentPage === totalPages;\n    this.firstVisibleRow = firstVisibleRowIndex + 1;\n    this.lastVisibleRow = lastVisibleRowIndex + 1;\n    this.totalRows = totalRenderedRows;\n  }\n\n  goToFirstPage() {\n    this.paginationPlugin.firstPage();\n  }\n\n  goToPrevPage() {\n    this.paginationPlugin.prevPage();\n  }\n\n  goToNextPage() {\n    this.paginationPlugin.nextPage();\n  }\n\n  goToLastPage() {\n    this.paginationPlugin.lastPage();\n  }\n\n  onPageNumberChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const pageNumber = parseInt(target.value, 10);\n\n    if (!isNaN(pageNumber)) {\n      this.paginationPlugin.setPage(pageNumber);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example3.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example3',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button [disabled]=\"isFirstPage\" (click)=\"goToFirstPage()\">First page</button>\n        <button [disabled]=\"isFirstPage\" (click)=\"goToPrevPage()\">Previous page</button>\n        <button [disabled]=\"isLastPage\" (click)=\"goToNextPage()\">Next page</button>\n        <button [disabled]=\"isLastPage\" (click)=\"goToLastPage()\">Last page</button>\n        <label for=\"pageNumber\">Page:\n          <input type=\"number\" id=\"pageNumber\" [value]=\"currentPage\" [min]=\"1\" [max]=\"totalPages\" (input)=\"onPageNumberChange($event)\">\n        </label>\n        <output>{{ firstVisibleRow }} - {{ lastVisibleRow }} of {{ totalRows }} rows</output>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  private paginationPlugin: any;\n\n  currentPage = 1;\n  totalPages = 1;\n  isFirstPage = true;\n  isLastPage = false;\n  firstVisibleRow = 1;\n  lastVisibleRow = 1;\n  totalRows = 1;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      pageSize: 25,\n      initialPage: 1,\n      showPageSize: false,\n      showCounter: false,\n      showNavigation: false,\n    },\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      this.paginationPlugin = hotInstance.getPlugin('pagination');\n\n      // defer the state update to the next change detection cycle\n      setTimeout(() => {\n        this.updateState();\n      });\n\n      hotInstance.addHook('afterPageChange', () => {\n        this.updateState();\n      });\n    }\n  }\n\n  private updateState() {\n    const {\n      currentPage,\n      totalPages,\n      firstVisibleRowIndex,\n      lastVisibleRowIndex,\n      totalRenderedRows,\n    } = this.paginationPlugin.getPaginationData();\n\n    this.currentPage = currentPage;\n    this.totalPages = totalPages;\n    this.isFirstPage = currentPage === 1;\n    this.isLastPage = currentPage === totalPages;\n    this.firstVisibleRow = firstVisibleRowIndex + 1;\n    this.lastVisibleRow = lastVisibleRowIndex + 1;\n    this.totalRows = totalRenderedRows;\n  }\n\n  goToFirstPage() {\n    this.paginationPlugin.firstPage();\n  }\n\n  goToPrevPage() {\n    this.paginationPlugin.prevPage();\n  }\n\n  goToNextPage() {\n    this.paginationPlugin.nextPage();\n  }\n\n  goToLastPage() {\n    this.paginationPlugin.lastPage();\n  }\n\n  onPageNumberChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const pageNumber = parseInt(target.value, 10);\n\n    if (!isNaN(pageNumber)) {\n      this.paginationPlugin.setPage(pageNumber);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example3.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example4.ts.json
index 23e8edf20..57ba04c90 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n    <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n    <div #customContainer id=\"example4-custom-container\"></div>\n  `,\n  styles: `\n    #example4-custom-container {\n      margin-top: 10px;\n    }\n\n    #example4-custom-container .ht-pagination {\n      border-radius: 4px;\n    }\n\n    :host ::ng-deep {\n      .ht-pagination {\n        border-radius: 4px;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n  @ViewChild('customContainer', { read: ElementRef }) customContainer!: ElementRef;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.updateSettings({\n        pagination: {\n          uiContainer: this.customContainer.nativeElement,\n        }\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example4.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n    <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n    <div #customContainer id=\"example4-custom-container\"></div>\n  `,\n  styles: `\n    #example4-custom-container {\n      margin-top: 10px;\n    }\n\n    #example4-custom-container .ht-pagination {\n      border-radius: 4px;\n    }\n\n    :host ::ng-deep {\n      .ht-pagination {\n        border-radius: 4px;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n  @ViewChild('customContainer', { read: ElementRef }) customContainer!: ElementRef;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  ngAfterViewInit() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (hotInstance) {\n      hotInstance.updateSettings({\n        pagination: {\n          uiContainer: this.customContainer.nativeElement,\n        }\n      });\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example4.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example5.ts.json
index 3ec97e7a5..968e8dc89 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Modify paged data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example5',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"clearColumn()\">Clear the second column of the current page</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  clearColumn() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const paginationPlugin = hotInstance.getPlugin('pagination');\n\n    const {\n      firstVisibleRowIndex,\n      lastVisibleRowIndex,\n    } = paginationPlugin.getPaginationData();\n\n    if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n      return;\n    }\n\n    const data: [number, number, string][] = [];\n    const columnIndex = 1;\n\n    for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n      data.push([row, columnIndex, '']);\n    }\n\n    hotInstance.setDataAtCell(data);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example5.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Modify paged data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example5',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"clearColumn()\">Clear the second column of the current page</button>\n      </div>\n    </div>\n    <hot-table\n      #hotTable\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: true,\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  clearColumn() {\n    const hotInstance = this.hotTable.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const paginationPlugin = hotInstance.getPlugin('pagination');\n\n    const {\n      firstVisibleRowIndex,\n      lastVisibleRowIndex,\n    } = paginationPlugin.getPaginationData();\n\n    if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n      return;\n    }\n\n    const data: [number, number, string][] = [];\n    const columnIndex = 1;\n\n    for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n      data.push([row, columnIndex, '']);\n    }\n\n    hotInstance.setDataAtCell(data);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example5.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example6.ts.json
index e4c6312bf..4c0f841cf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows pagination · Localize pagination · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable';\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = (Handsontable.languages as any).dictionaryKeys as Record<string, string>;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C['PAGINATION_COUNTER_SECTION']]: 'Currently displaying [start]-[end] (total: [total])',\n  [C['PAGINATION_NAV_SECTION']]: '[currentPage] / [totalPages]',\n});\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      showPageSize: false,\n    },\n    language: 'en-US-custom',\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example6.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows pagination · Localize pagination · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HotTableComponent } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable';\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = (Handsontable.languages as any).dictionaryKeys as Record<string, string>;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C['PAGINATION_COUNTER_SECTION']]: 'Currently displaying [start]-[end] (total: [total])',\n  [C['PAGINATION_NAV_SECTION']]: '[currentPage] / [totalPages]',\n});\n\n@Component({\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n  @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n    { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n    { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n    { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n    { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n    { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n    { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n    { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n    { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n    { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n    { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n    { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n    { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n    { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n    { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n    { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n    { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n    { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n    { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n    { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n    { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n    { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n    { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n    { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n    { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n    { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n    { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n    { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n    { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n    { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n    { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n    { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n    { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n    { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n    { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n    { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n    { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n    { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n    { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n    { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n    { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n    { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n    { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n    { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n    { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n    { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n    { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n    { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n    { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n    { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n    { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n    { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n    { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n    { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n    { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n    { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n    { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n    { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n    { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n    { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n    { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n    { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n    { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n    { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n    { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n    { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n    { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n    { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n    { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n    { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n    { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n    { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n    { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n    { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n    { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n    { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n    { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n    { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n    { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n    { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false }\n  ];\n\n  readonly hotSettings: GridSettings = {\n    pagination: {\n      showPageSize: false,\n    },\n    language: 'en-US-custom',\n    autoRowSize: true,\n    columns: [\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n        width: 150,\n        headerClassName: 'htLeft',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        width: 80,\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        width: 130,\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n        headerClassName: 'htRight',\n\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        width: 90,\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        headerClassName: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n        headerClassName: 'htCenter',\n      },\n    ],\n    width: '100%',\n    height: 300,\n    stretchH: 'all',\n    contextMenu: true,\n    rowHeaders: true,\n    colHeaders: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-pagination/angular/example6.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.js.json
index cf6396d8a..8a3b904f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example1.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example1.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.ts.json
index caf4f3ae6..323d62fb7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example1.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example1.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.js.json
index 395f5afcc..38c48ae53 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Configure pagination · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>\n</head>\n<body>\n  <div class=\"pagination-resize-demo\" id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example2.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Configure pagination · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>\n</head>\n<body>\n  <div class=\"pagination-resize-demo\" id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example2.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.ts.json
index a2610fec9..474ee5a5b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Configure pagination · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>\n</head>\n<body>\n  <div class=\"pagination-resize-demo\" id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example2.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Configure pagination · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>\n</head>\n<body>\n  <div class=\"pagination-resize-demo\" id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example2.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.js.json
index 08f7d876e..dbfd8e85e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"firstPage\">First page</button>\n      <button id=\"prevPage\">Previous page</button>\n      <button id=\"nextPage\">Next page</button>\n      <button id=\"lastPage\">Last page</button>\n      <label for=\"pageNumber\">Page:\n        <input type=\"number\" id=\"pageNumber\" value=\"1\">\n      </label>\n      <output id=\"pageStats\">1 - 10 of 100 rows</output>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst firstPageElement = document.querySelector('#firstPage');\nconst prevPageElement = document.querySelector('#prevPage');\nconst nextPageElement = document.querySelector('#nextPage');\nconst lastPageElement = document.querySelector('#lastPage');\nconst pageNumberElement = document.querySelector('#pageNumber');\nconst pageStatsElement = document.querySelector('#pageStats');\nconst paginationPlugin = hot.getPlugin('pagination');\n\nfunction updateUI() {\n  const { currentPage, totalPages, firstVisibleRowIndex, lastVisibleRowIndex, totalRenderedRows } =\n    paginationPlugin.getPaginationData();\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  if (isFirstPage) {\n    firstPageElement.disabled = true;\n    prevPageElement.disabled = true;\n  } else {\n    firstPageElement.disabled = false;\n    prevPageElement.disabled = false;\n  }\n\n  if (isLastPage) {\n    nextPageElement.disabled = true;\n    lastPageElement.disabled = true;\n  } else {\n    nextPageElement.disabled = false;\n    lastPageElement.disabled = false;\n  }\n\n  pageNumberElement.value = currentPage;\n  pageStatsElement.textContent = `${firstVisibleRowIndex + 1} - ${lastVisibleRowIndex + 1} of ${totalRenderedRows} rows`;\n}\n\nupdateUI();\nhot.addHook('afterPageChange', updateUI);\nfirstPageElement.addEventListener('click', () => {\n  paginationPlugin.firstPage();\n});\nprevPageElement.addEventListener('click', () => {\n  paginationPlugin.prevPage();\n});\nnextPageElement.addEventListener('click', () => {\n  paginationPlugin.nextPage();\n});\nlastPageElement.addEventListener('click', () => {\n  paginationPlugin.lastPage();\n});\npageNumberElement.addEventListener('input', (event) => {\n  const pageNumber = parseInt(event.target.value, 10);\n\n  if (!isNaN(pageNumber)) {\n    paginationPlugin.setPage(pageNumber);\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example3.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"firstPage\">First page</button>\n      <button id=\"prevPage\">Previous page</button>\n      <button id=\"nextPage\">Next page</button>\n      <button id=\"lastPage\">Last page</button>\n      <label for=\"pageNumber\">Page:\n        <input type=\"number\" id=\"pageNumber\" value=\"1\">\n      </label>\n      <output id=\"pageStats\">1 - 10 of 100 rows</output>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst firstPageElement = document.querySelector('#firstPage');\nconst prevPageElement = document.querySelector('#prevPage');\nconst nextPageElement = document.querySelector('#nextPage');\nconst lastPageElement = document.querySelector('#lastPage');\nconst pageNumberElement = document.querySelector('#pageNumber');\nconst pageStatsElement = document.querySelector('#pageStats');\nconst paginationPlugin = hot.getPlugin('pagination');\n\nfunction updateUI() {\n  const { currentPage, totalPages, firstVisibleRowIndex, lastVisibleRowIndex, totalRenderedRows } =\n    paginationPlugin.getPaginationData();\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  if (isFirstPage) {\n    firstPageElement.disabled = true;\n    prevPageElement.disabled = true;\n  } else {\n    firstPageElement.disabled = false;\n    prevPageElement.disabled = false;\n  }\n\n  if (isLastPage) {\n    nextPageElement.disabled = true;\n    lastPageElement.disabled = true;\n  } else {\n    nextPageElement.disabled = false;\n    lastPageElement.disabled = false;\n  }\n\n  pageNumberElement.value = currentPage;\n  pageStatsElement.textContent = `${firstVisibleRowIndex + 1} - ${lastVisibleRowIndex + 1} of ${totalRenderedRows} rows`;\n}\n\nupdateUI();\nhot.addHook('afterPageChange', updateUI);\nfirstPageElement.addEventListener('click', () => {\n  paginationPlugin.firstPage();\n});\nprevPageElement.addEventListener('click', () => {\n  paginationPlugin.prevPage();\n});\nnextPageElement.addEventListener('click', () => {\n  paginationPlugin.nextPage();\n});\nlastPageElement.addEventListener('click', () => {\n  paginationPlugin.lastPage();\n});\npageNumberElement.addEventListener('input', (event) => {\n  const pageNumber = parseInt(event.target.value, 10);\n\n  if (!isNaN(pageNumber)) {\n    paginationPlugin.setPage(pageNumber);\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example3.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.ts.json
index 1faa682ae..4aef62655 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"firstPage\">First page</button>\n      <button id=\"prevPage\">Previous page</button>\n      <button id=\"nextPage\">Next page</button>\n      <button id=\"lastPage\">Last page</button>\n      <label for=\"pageNumber\">Page:\n        <input type=\"number\" id=\"pageNumber\" value=\"1\">\n      </label>\n      <output id=\"pageStats\">1 - 10 of 100 rows</output>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst firstPageElement = document.querySelector('#firstPage')!;\nconst prevPageElement = document.querySelector('#prevPage')!;\nconst nextPageElement = document.querySelector('#nextPage')!;\nconst lastPageElement = document.querySelector('#lastPage')!;\nconst pageNumberElement = document.querySelector('#pageNumber')!;\nconst pageStatsElement = document.querySelector('#pageStats')!;\nconst paginationPlugin = hot.getPlugin('pagination');\n\nfunction updateUI() {\n  const { currentPage, totalPages, firstVisibleRowIndex, lastVisibleRowIndex, totalRenderedRows } =\n    paginationPlugin.getPaginationData();\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  if (isFirstPage) {\n    firstPageElement.disabled = true;\n    prevPageElement.disabled = true;\n  } else {\n    firstPageElement.disabled = false;\n    prevPageElement.disabled = false;\n  }\n\n  if (isLastPage) {\n    nextPageElement.disabled = true;\n    lastPageElement.disabled = true;\n  } else {\n    nextPageElement.disabled = false;\n    lastPageElement.disabled = false;\n  }\n\n  pageNumberElement.value = currentPage;\n  pageStatsElement.textContent = `${firstVisibleRowIndex + 1} - ${lastVisibleRowIndex + 1} of ${totalRenderedRows} rows`;\n}\n\nupdateUI();\nhot.addHook('afterPageChange', updateUI);\n\nfirstPageElement.addEventListener('click', () => {\n  paginationPlugin.firstPage();\n});\n\nprevPageElement.addEventListener('click', () => {\n  paginationPlugin.prevPage();\n});\n\nnextPageElement.addEventListener('click', () => {\n  paginationPlugin.nextPage();\n});\n\nlastPageElement.addEventListener('click', () => {\n  paginationPlugin.lastPage();\n});\n\npageNumberElement.addEventListener('input', (event) => {\n  const pageNumber = parseInt(event.target.value, 10);\n\n  if (!isNaN(pageNumber)) {\n    paginationPlugin.setPage(pageNumber);\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example3.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"firstPage\">First page</button>\n      <button id=\"prevPage\">Previous page</button>\n      <button id=\"nextPage\">Next page</button>\n      <button id=\"lastPage\">Last page</button>\n      <label for=\"pageNumber\">Page:\n        <input type=\"number\" id=\"pageNumber\" value=\"1\">\n      </label>\n      <output id=\"pageStats\">1 - 10 of 100 rows</output>\n    </div>\n  </div>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst firstPageElement = document.querySelector('#firstPage')!;\nconst prevPageElement = document.querySelector('#prevPage')!;\nconst nextPageElement = document.querySelector('#nextPage')!;\nconst lastPageElement = document.querySelector('#lastPage')!;\nconst pageNumberElement = document.querySelector('#pageNumber')!;\nconst pageStatsElement = document.querySelector('#pageStats')!;\nconst paginationPlugin = hot.getPlugin('pagination');\n\nfunction updateUI() {\n  const { currentPage, totalPages, firstVisibleRowIndex, lastVisibleRowIndex, totalRenderedRows } =\n    paginationPlugin.getPaginationData();\n\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  if (isFirstPage) {\n    firstPageElement.disabled = true;\n    prevPageElement.disabled = true;\n  } else {\n    firstPageElement.disabled = false;\n    prevPageElement.disabled = false;\n  }\n\n  if (isLastPage) {\n    nextPageElement.disabled = true;\n    lastPageElement.disabled = true;\n  } else {\n    nextPageElement.disabled = false;\n    lastPageElement.disabled = false;\n  }\n\n  pageNumberElement.value = currentPage;\n  pageStatsElement.textContent = `${firstVisibleRowIndex + 1} - ${lastVisibleRowIndex + 1} of ${totalRenderedRows} rows`;\n}\n\nupdateUI();\nhot.addHook('afterPageChange', updateUI);\n\nfirstPageElement.addEventListener('click', () => {\n  paginationPlugin.firstPage();\n});\n\nprevPageElement.addEventListener('click', () => {\n  paginationPlugin.prevPage();\n});\n\nnextPageElement.addEventListener('click', () => {\n  paginationPlugin.nextPage();\n});\n\nlastPageElement.addEventListener('click', () => {\n  paginationPlugin.lastPage();\n});\n\npageNumberElement.addEventListener('input', (event) => {\n  const pageNumber = parseInt(event.target.value, 10);\n\n  if (!isNaN(pageNumber)) {\n    paginationPlugin.setPage(pageNumber);\n  }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example3.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.js.json
index 44cd7b4a0..c5baaeb1d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}\n</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n  <div id=\"example4-custom-container\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    uiContainer: document.querySelector('#example4-custom-container'),\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example4.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}\n</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n  <div id=\"example4-custom-container\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    uiContainer: document.querySelector('#example4-custom-container'),\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example4.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.ts.json
index 61860f285..3facee822 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}\n</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n  <div id=\"example4-custom-container\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    uiContainer: document.querySelector('#example4-custom-container')!,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example4.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}\n</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n  <div id=\"example4-custom-container\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    uiContainer: document.querySelector('#example4-custom-container')!,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example4.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.js.json
index 5c0fec684..5c63b598c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Modify paged data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"clearData\">Clear the second column of the current page</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst clearDataButton = document.querySelector('#clearData');\nconst paginationPlugin = hot.getPlugin('pagination');\n\nclearDataButton.addEventListener('click', () => {\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const data = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    data.push([row, columnIndex, '']);\n  }\n\n  hot.setDataAtCell(data);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example5.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Modify paged data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"clearData\">Clear the second column of the current page</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst clearDataButton = document.querySelector('#clearData');\nconst paginationPlugin = hot.getPlugin('pagination');\n\nclearDataButton.addEventListener('click', () => {\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const data = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    data.push([row, columnIndex, '']);\n  }\n\n  hot.setDataAtCell(data);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example5.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.ts.json
index 4c765bd5d..f9071039f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Modify paged data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"clearData\">Clear the second column of the current page</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst clearDataButton = document.querySelector('#clearData')!;\nconst paginationPlugin = hot.getPlugin('pagination');\n\nclearDataButton.addEventListener('click', () => {\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const data: [number, number, string][] = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    data.push([row, columnIndex, '']);\n  }\n\n  hot.setDataAtCell(data);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example5.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Modify paged data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"clearData\">Clear the second column of the current page</button>\n    </div>\n  </div>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst clearDataButton = document.querySelector('#clearData')!;\nconst paginationPlugin = hot.getPlugin('pagination');\n\nclearDataButton.addEventListener('click', () => {\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const data: [number, number, string][] = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    data.push([row, columnIndex, '']);\n  }\n\n  hot.setDataAtCell(data);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example5.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.js.json
index 42f806a8f..aae1c3f82 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Localize pagination · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example6.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows pagination · Localize pagination · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-pagination/javascript/example6.js","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.ts.json
index 0167e90f3..7940827e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Localize pagination · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example6.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows pagination · Localize pagination · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-pagination/javascript/example6.ts","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example1.tsx.json
index b0167ef05..7076f284d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      pagination={true}\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-pagination/react/example1.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      pagination={true}\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-pagination/react/example1.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example2.tsx.json
index da265d4fd..bef361a47 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Configure pagination · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <div className=\"pagination-resize-demo\">\n    <HotTable\n      pagination={{\n        pageSize: 'auto',\n        pageSizeList: ['auto', 5, 10, 20, 50, 100],\n        initialPage: 2,\n        showPageSize: true,\n        showCounter: false,\n        showNavigation: true,\n      }}\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height=\"100%\"\n      stretchH=\"all\"\n      contextMenu={true}\n      dropdownMenu={true}\n      filters={true}\n      columnSorting={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}"},"docsPath":"guides/rows/rows-pagination/react/example2.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Configure pagination · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <div className=\"pagination-resize-demo\">\n    <HotTable\n      pagination={{\n        pageSize: 'auto',\n        pageSizeList: ['auto', 5, 10, 20, 50, 100],\n        initialPage: 2,\n        showPageSize: true,\n        showCounter: false,\n        showNavigation: true,\n      }}\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height=\"100%\"\n      stretchH=\"all\"\n      contextMenu={true}\n      dropdownMenu={true}\n      filters={true}\n      columnSorting={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".pagination-resize-demo .ht-root-wrapper {\n  border: 1px dashed var(--sl-color-accent, #1A42E8);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}"},"docsPath":"guides/rows/rows-pagination/react/example2.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example3.tsx.json
index 110d75083..8875c2322 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const [paginationData, setPaginationData] = useState({\n    currentPage: 1,\n    totalPages: 1,\n    firstVisibleRowIndex: 0,\n    lastVisibleRowIndex: 0,\n    totalRenderedRows: 0,\n  });\n\n  const updatePaginationState = () => {\n    if (hotTableRef.current) {\n      const state = hotTableRef.current.hotInstance.getPlugin('pagination').getPaginationData();\n\n      setPaginationData(state);\n    }\n  };\n\n  useEffect(() => {\n    updatePaginationState();\n  }, []);\n\n  const handleFirstPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').firstPage();\n  };\n\n  const handlePrevPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').prevPage();\n  };\n\n  const handleNextPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').nextPage();\n  };\n\n  const handleLastPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').lastPage();\n  };\n\n  const handlePageNumberChange = (event) => {\n    const pageNumber = parseInt(event.target.value, 10);\n\n    if (!isNaN(pageNumber)) {\n      hotTableRef.current?.hotInstance.getPlugin('pagination').setPage(pageNumber);\n    }\n  };\n\n  const isFirstPage = paginationData.currentPage === 1;\n  const isLastPage = paginationData.currentPage === paginationData.totalPages;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={handleFirstPage} disabled={isFirstPage}>First page</button>\n          <button onClick={handlePrevPage} disabled={isFirstPage}>Previous page</button>\n          <button onClick={handleNextPage} disabled={isLastPage}>Next page</button>\n          <button onClick={handleLastPage} disabled={isLastPage}>Last page</button>\n          <label htmlFor=\"pageNumber\">Page:\n            <input\n              type=\"number\"\n              id=\"pageNumber\"\n              value={paginationData.currentPage}\n              onChange={handlePageNumberChange}\n            />\n          </label>\n          <output>{paginationData.firstVisibleRowIndex + 1} - {paginationData.lastVisibleRowIndex + 1} of {paginationData.totalRenderedRows} rows</output>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        pagination={{\n          pageSize: 25,\n          showPageSize: false,\n          showCounter: false,\n          showNavigation: false,\n        }}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterPageChange={updatePaginationState}\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-controls-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: var(--sl-color-gray-7, #f7f7f9);\n  border-radius: 8px;\n  margin-top: 12px;\n  padding: 12px 30px;\n}\n\n.example-controls-container .pagination-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-controls-container .controls-row {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-bottom: 12px;\n  gap: 10px;\n}\n\n.example-controls-container .status-row {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  padding: 0 10px;\n\n}\n\n.example-controls-container .page-input-group {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.example-controls-container .page-input-group label {\n  color: var(--sl-color-text, #485164);\n}\n\n.example-controls-container .page-input {\n  width: 45px;\n  padding: 4px;\n  border: 1px solid var(--sl-color-gray-5, #d1d5db);\n  text-align: center;\n  background: var(--sl-color-bg, #ffffff);\n  color: var(--sl-color-text, #22292f);\n}\n\n.example-controls-container .page-stats {\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/rows/rows-pagination/react/example3.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n  const [paginationData, setPaginationData] = useState({\n    currentPage: 1,\n    totalPages: 1,\n    firstVisibleRowIndex: 0,\n    lastVisibleRowIndex: 0,\n    totalRenderedRows: 0,\n  });\n\n  const updatePaginationState = () => {\n    if (hotTableRef.current) {\n      const state = hotTableRef.current.hotInstance.getPlugin('pagination').getPaginationData();\n\n      setPaginationData(state);\n    }\n  };\n\n  useEffect(() => {\n    updatePaginationState();\n  }, []);\n\n  const handleFirstPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').firstPage();\n  };\n\n  const handlePrevPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').prevPage();\n  };\n\n  const handleNextPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').nextPage();\n  };\n\n  const handleLastPage = () => {\n    hotTableRef.current?.hotInstance.getPlugin('pagination').lastPage();\n  };\n\n  const handlePageNumberChange = (event) => {\n    const pageNumber = parseInt(event.target.value, 10);\n\n    if (!isNaN(pageNumber)) {\n      hotTableRef.current?.hotInstance.getPlugin('pagination').setPage(pageNumber);\n    }\n  };\n\n  const isFirstPage = paginationData.currentPage === 1;\n  const isLastPage = paginationData.currentPage === paginationData.totalPages;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={handleFirstPage} disabled={isFirstPage}>First page</button>\n          <button onClick={handlePrevPage} disabled={isFirstPage}>Previous page</button>\n          <button onClick={handleNextPage} disabled={isLastPage}>Next page</button>\n          <button onClick={handleLastPage} disabled={isLastPage}>Last page</button>\n          <label htmlFor=\"pageNumber\">Page:\n            <input\n              type=\"number\"\n              id=\"pageNumber\"\n              value={paginationData.currentPage}\n              onChange={handlePageNumberChange}\n            />\n          </label>\n          <output>{paginationData.firstVisibleRowIndex + 1} - {paginationData.lastVisibleRowIndex + 1} of {paginationData.totalRenderedRows} rows</output>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        pagination={{\n          pageSize: 25,\n          showPageSize: false,\n          showCounter: false,\n          showNavigation: false,\n        }}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterPageChange={updatePaginationState}\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-controls-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: var(--sl-color-gray-7, #f7f7f9);\n  border-radius: 8px;\n  margin-top: 12px;\n  padding: 12px 30px;\n}\n\n.example-controls-container .pagination-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-controls-container .controls-row {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-bottom: 12px;\n  gap: 10px;\n}\n\n.example-controls-container .status-row {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  padding: 0 10px;\n\n}\n\n.example-controls-container .page-input-group {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.example-controls-container .page-input-group label {\n  color: var(--sl-color-text, #485164);\n}\n\n.example-controls-container .page-input {\n  width: 45px;\n  padding: 4px;\n  border: 1px solid var(--sl-color-gray-5, #d1d5db);\n  text-align: center;\n  background: var(--sl-color-bg, #ffffff);\n  color: var(--sl-color-text, #22292f);\n}\n\n.example-controls-container .page-stats {\n  color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/rows/rows-pagination/react/example3.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example4.tsx.json
index 12b387fd0..7387f5260 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example4.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example4.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const containerRef = useRef<HTMLElement>(null);\n  const [paginationConfig, setPaginationConfig] = useState(null);\n\n  useEffect(() => {\n    // Wait for the container to be available in the DOM\n    if (containerRef.current) {\n      setPaginationConfig({\n        uiContainer: containerRef.current,\n      });\n    }\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        pagination={paginationConfig}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n\n      <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n      <div ref={containerRef} id=\"example4-custom-container\"></div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}"},"docsPath":"guides/rows/rows-pagination/react/example4.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef, useState, useEffect } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const containerRef = useRef<HTMLElement>(null);\n  const [paginationConfig, setPaginationConfig] = useState(null);\n\n  useEffect(() => {\n    // Wait for the container to be available in the DOM\n    if (containerRef.current) {\n      setPaginationConfig({\n        uiContainer: containerRef.current,\n      });\n    }\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        pagination={paginationConfig}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n\n      <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n      <div ref={containerRef} id=\"example4-custom-container\"></div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container .ht-pagination {\n  border-radius: 4px;\n}"},"docsPath":"guides/rows/rows-pagination/react/example4.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example5.tsx.json
index f7c4bd44a..a2ca76f0b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example5.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example5.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Modify paged data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  const handleClearData = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const { firstVisibleRowIndex, lastVisibleRowIndex } = hotInstance.getPlugin('pagination').getPaginationData();\n\n    if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n      return;\n    }\n\n    const data = [];\n    const columnIndex = 1;\n\n    for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n      data.push([row, columnIndex, '']);\n    }\n\n    hotInstance.setDataAtCell(data);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={handleClearData}>Clear the second column of the current page</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        pagination={true}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-modify-pagedata-container {\n  display: flex;\n  flex-direction: column;\n  align-items: self-start;\n  background: transparent;\n  border-radius: 8px;\n  margin-bottom: 12px;\n  padding: 12px 30px;\n}"},"docsPath":"guides/rows/rows-pagination/react/example5.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Modify paged data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst ExampleComponent = () => {\n  const hotTableRef = useRef<HotTableRef>(null);\n\n  const handleClearData = () => {\n    const hotInstance = hotTableRef.current?.hotInstance;\n\n    if (!hotInstance) {\n      return;\n    }\n\n    const { firstVisibleRowIndex, lastVisibleRowIndex } = hotInstance.getPlugin('pagination').getPaginationData();\n\n    if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n      return;\n    }\n\n    const data = [];\n    const columnIndex = 1;\n\n    for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n      data.push([row, columnIndex, '']);\n    }\n\n    hotInstance.setDataAtCell(data);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={handleClearData}>Clear the second column of the current page</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableRef}\n        pagination={true}\n        autoRowSize={true}\n        data={data}\n        width=\"100%\"\n        height={300}\n        stretchH=\"all\"\n        contextMenu={true}\n        rowHeaders={true}\n        colHeaders={true}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      >\n        <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n        <HotColumn\n          title=\"Price\"\n          type=\"numeric\"\n          data=\"price\"\n          width={80}\n          locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Date\"\n          type=\"intl-date\"\n          data=\"sellDate\"\n          width={130}\n          locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn\n          title=\"Time\"\n          type=\"intl-time\"\n          data=\"sellTime\"\n          width={90}\n          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n          className=\"htRight\"\n          headerClassName=\"htRight\"\n        />\n        <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n      </HotTable>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".example-modify-pagedata-container {\n  display: flex;\n  flex-direction: column;\n  align-items: self-start;\n  background: transparent;\n  border-radius: 8px;\n  margin-bottom: 12px;\n  padding: 12px 30px;\n}"},"docsPath":"guides/rows/rows-pagination/react/example5.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example6.tsx.json
index 2d19c6908..350e86790 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows pagination · Localize pagination · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      pagination={{\n        showPageSize: false,\n      }}\n      language=\"en-US-custom\"\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-pagination/react/example6.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows pagination · Localize pagination · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      pagination={{\n        showPageSize: false,\n      }}\n      language=\"en-US-custom\"\n      autoRowSize={true}\n      data={data}\n      width=\"100%\"\n      height={300}\n      stretchH=\"all\"\n      contextMenu={true}\n      rowHeaders={true}\n      colHeaders={true}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn title=\"Model\" type=\"text\" data=\"model\" width={150} headerClassName=\"htLeft\" />\n      <HotColumn\n        title=\"Price\"\n        type=\"numeric\"\n        data=\"price\"\n        width={80}\n        locale=\"en-US\" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Date\"\n        type=\"intl-date\"\n        data=\"sellDate\"\n        width={130}\n        locale=\"en-US\" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn\n        title=\"Time\"\n        type=\"intl-time\"\n        data=\"sellTime\"\n        width={90}\n        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}\n        className=\"htRight\"\n        headerClassName=\"htRight\"\n      />\n      <HotColumn title=\"In stock\" type=\"checkbox\" data=\"inStock\" className=\"htCenter\" headerClassName=\"htCenter\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-pagination/react/example6.tsx","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example1.vue.json
index 9e9a32c66..48b0349cf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example1.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example1.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example2.vue.json
index 74ba72960..82a101e17 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Configure pagination · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"pagination-resize-demo\">\n      <HotTable :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pagination-resize-demo :deep(.ht-root-wrapper) {\n  border: 1px dashed var(--sl-color-accent);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>"},"docsPath":"guides/rows/rows-pagination/vue/example2.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Configure pagination · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    pageSize: 'auto',\n    pageSizeList: ['auto', 5, 10, 20, 50, 100],\n    initialPage: 2,\n    showPageSize: true,\n    showCounter: false,\n    showNavigation: true,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: '100%',\n  stretchH: 'all',\n  contextMenu: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <div class=\"pagination-resize-demo\">\n      <HotTable :settings=\"hotSettings\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pagination-resize-demo :deep(.ht-root-wrapper) {\n  border: 1px dashed var(--sl-color-accent);\n  border-radius: 4px;\n  height: 300px;\n  min-height: 120px;\n  max-height: 600px;\n  resize: vertical;\n  overflow: auto;\n}\n</style>"},"docsPath":"guides/rows/rows-pagination/vue/example2.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example2","exampleTitle":"Configure pagination","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example3.vue.json
index 25f365bc7..245230bbe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst paginationState = ref({\n  currentPage: 1,\n  totalPages: 1,\n  firstVisibleRowIndex: 0,\n  lastVisibleRowIndex: 0,\n  totalRenderedRows: 0,\n});\n\nfunction updateUI() {\n  const plugin = (hotRef.value as any)?.hotInstance?.getPlugin('pagination');\n\n  if (!plugin) return;\n  paginationState.value = plugin.getPaginationData();\n}\n\nconst isFirstPage = () => paginationState.value.currentPage === 1;\nconst isLastPage = () => paginationState.value.currentPage === paginationState.value.totalPages;\n\nfunction handleFirstPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').firstPage();\n}\n\nfunction handlePrevPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').prevPage();\n}\n\nfunction handleNextPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').nextPage();\n}\n\nfunction handleLastPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').lastPage();\n}\n\nfunction handlePageNumberInput(event: Event) {\n  const pageNumber = parseInt((event.target as HTMLInputElement).value, 10);\n\n  if (!isNaN(pageNumber)) {\n    (hotRef.value as any)?.hotInstance?.getPlugin('pagination').setPage(pageNumber);\n  }\n}\n\nonMounted(() => {\n  updateUI();\n});\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterPageChange: updateUI,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button :disabled=\"isFirstPage()\" @click=\"handleFirstPage\">First page</button>\n        <button :disabled=\"isFirstPage()\" @click=\"handlePrevPage\">Previous page</button>\n        <button :disabled=\"isLastPage()\" @click=\"handleNextPage\">Next page</button>\n        <button :disabled=\"isLastPage()\" @click=\"handleLastPage\">Last page</button>\n        <label for=\"pageNumber\">Page:\n          <input\n            type=\"number\"\n            id=\"pageNumber\"\n            :value=\"paginationState.currentPage\"\n            @input=\"handlePageNumberInput\"\n          />\n        </label>\n        <output>{{ paginationState.firstVisibleRowIndex + 1 }} - {{ paginationState.lastVisibleRowIndex + 1 }} of {{ paginationState.totalRenderedRows }} rows</output>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example3.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Control pagination programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst paginationState = ref({\n  currentPage: 1,\n  totalPages: 1,\n  firstVisibleRowIndex: 0,\n  lastVisibleRowIndex: 0,\n  totalRenderedRows: 0,\n});\n\nfunction updateUI() {\n  const plugin = (hotRef.value as any)?.hotInstance?.getPlugin('pagination');\n\n  if (!plugin) return;\n  paginationState.value = plugin.getPaginationData();\n}\n\nconst isFirstPage = () => paginationState.value.currentPage === 1;\nconst isLastPage = () => paginationState.value.currentPage === paginationState.value.totalPages;\n\nfunction handleFirstPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').firstPage();\n}\n\nfunction handlePrevPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').prevPage();\n}\n\nfunction handleNextPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').nextPage();\n}\n\nfunction handleLastPage() {\n  (hotRef.value as any)?.hotInstance?.getPlugin('pagination').lastPage();\n}\n\nfunction handlePageNumberInput(event: Event) {\n  const pageNumber = parseInt((event.target as HTMLInputElement).value, 10);\n\n  if (!isNaN(pageNumber)) {\n    (hotRef.value as any)?.hotInstance?.getPlugin('pagination').setPage(pageNumber);\n  }\n}\n\nonMounted(() => {\n  updateUI();\n});\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    pageSize: 25,\n    initialPage: 1,\n    showPageSize: false,\n    showCounter: false,\n    showNavigation: false,\n  },\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  afterPageChange: updateUI,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example3\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button :disabled=\"isFirstPage()\" @click=\"handleFirstPage\">First page</button>\n        <button :disabled=\"isFirstPage()\" @click=\"handlePrevPage\">Previous page</button>\n        <button :disabled=\"isLastPage()\" @click=\"handleNextPage\">Next page</button>\n        <button :disabled=\"isLastPage()\" @click=\"handleLastPage\">Last page</button>\n        <label for=\"pageNumber\">Page:\n          <input\n            type=\"number\"\n            id=\"pageNumber\"\n            :value=\"paginationState.currentPage\"\n            @input=\"handlePageNumberInput\"\n          />\n        </label>\n        <output>{{ paginationState.firstVisibleRowIndex + 1 }} - {{ paginationState.lastVisibleRowIndex + 1 }} of {{ paginationState.totalRenderedRows }} rows</output>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example3.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example3","exampleTitle":"Control pagination programmatically","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example4.vue.json
index 0b11b3516..c780f5f3f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst customContainerRef = useTemplateRef<HTMLElement>('customContainerRef');\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {},\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  if (customContainerRef.value) {\n    hotSettings.value = {\n      ...hotSettings.value,\n      pagination: {\n        uiContainer: customContainerRef.value,\n      },\n    };\n  }\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n    <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n    <div ref=\"customContainerRef\" id=\"example4-custom-container\"></div>\n  </div>\n</template>\n\n<style scoped>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container :deep(.ht-pagination) {\n  border-radius: 4px;\n}\n</style>"},"docsPath":"guides/rows/rows-pagination/vue/example4.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Choose where to display the pagination UI · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example4\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst customContainerRef = useTemplateRef<HTMLElement>('customContainerRef');\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {},\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  if (customContainerRef.value) {\n    hotSettings.value = {\n      ...hotSettings.value,\n      pagination: {\n        uiContainer: customContainerRef.value,\n      },\n    };\n  }\n});\n</script>\n\n<template>\n  <div id=\"example4\">\n    <HotTable :settings=\"hotSettings\" />\n    <p>As you can see, the pagination component is detached from the grid and displayed in a custom container.</p>\n    <div ref=\"customContainerRef\" id=\"example4-custom-container\"></div>\n  </div>\n</template>\n\n<style scoped>\n#example4-custom-container {\n  margin-top: 10px;\n}\n\n#example4-custom-container :deep(.ht-pagination) {\n  border-radius: 4px;\n}\n</style>"},"docsPath":"guides/rows/rows-pagination/vue/example4.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example4","exampleTitle":"Choose where to display the pagination UI","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example5.vue.json
index 05742d278..6dbf2e01f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Modify paged data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction clearCurrentPageData() {\n  const hotInstance = (hotRef.value as any)?.hotInstance;\n\n  if (!hotInstance) return;\n\n  const paginationPlugin = hotInstance.getPlugin('pagination');\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const changes: [number, number, string][] = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    changes.push([row, columnIndex, '']);\n  }\n\n  hotInstance.setDataAtCell(changes);\n}\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"clearCurrentPageData\">Clear the second column of the current page</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example5.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Modify paged data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example5\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: true,\n  autoRowSize: true,\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction clearCurrentPageData() {\n  const hotInstance = (hotRef.value as any)?.hotInstance;\n\n  if (!hotInstance) return;\n\n  const paginationPlugin = hotInstance.getPlugin('pagination');\n  const { firstVisibleRowIndex, lastVisibleRowIndex } = paginationPlugin.getPaginationData();\n\n  if (firstVisibleRowIndex === -1 || lastVisibleRowIndex === -1) {\n    return;\n  }\n\n  const changes: [number, number, string][] = [];\n  const columnIndex = 1;\n\n  for (let row = firstVisibleRowIndex; row <= lastVisibleRowIndex; row++) {\n    changes.push([row, columnIndex, '']);\n  }\n\n  hotInstance.setDataAtCell(changes);\n}\n</script>\n\n<template>\n  <div id=\"example5\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"clearCurrentPageData\">Clear the second column of the current page</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example5.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example5","exampleTitle":"Modify paged data","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example6.vue.json
index d9a4c5b6d..3390feac5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-pagination__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows pagination · Localize pagination · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example6.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows pagination · Localize pagination · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example6\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },\n  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },\n  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },\n  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },\n  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },\n  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },\n  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },\n  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },\n  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },\n  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },\n  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },\n  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },\n  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },\n  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },\n  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },\n  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },\n  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },\n  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },\n  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },\n  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },\n  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },\n  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },\n  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },\n  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },\n  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },\n  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },\n  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },\n  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },\n  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },\n  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },\n  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },\n  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },\n  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },\n  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },\n  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },\n  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },\n  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },\n  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },\n  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },\n  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },\n  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },\n  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },\n  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },\n  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },\n  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },\n  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },\n  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },\n  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },\n  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },\n  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },\n  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },\n  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },\n  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },\n  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },\n  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },\n  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },\n  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },\n  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },\n  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },\n  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },\n  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },\n  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },\n  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },\n  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },\n  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },\n  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },\n  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },\n  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },\n  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },\n  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },\n  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },\n  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },\n  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },\n  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },\n  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },\n  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },\n  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },\n  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },\n  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },\n  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },\n  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },\n  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },\n  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },\n  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },\n  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },\n  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },\n  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },\n  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },\n  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },\n  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },\n  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },\n  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },\n  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },\n  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },\n  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },\n  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },\n  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },\n  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },\n];\n\nconst enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');\nconst C = Handsontable.languages.dictionaryKeys;\n\nHandsontable.languages.registerLanguageDictionary({\n  ...enUSDictionary,\n  languageCode: 'en-US-custom',\n  [C.PAGINATION_COUNTER_SECTION]: 'Currently displaying [start]-[end] (total: [total])',\n  [C.PAGINATION_NAV_SECTION]: '[currentPage] / [totalPages]',\n});\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  pagination: {\n    showPageSize: false,\n  },\n  language: 'en-US-custom',\n  columns: [\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n      width: 150,\n      headerClassName: 'htLeft',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      width: 80,\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      width: 130,\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      width: 90,\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      headerClassName: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n      headerClassName: 'htCenter',\n    },\n  ],\n  width: '100%',\n  height: 300,\n  stretchH: 'all',\n  contextMenu: true,\n  rowHeaders: true,\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example6\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-pagination/vue/example6.vue","breadcrumb":["Rows","Rows pagination"],"guide":"guides/rows/rows-pagination/rows-pagination.md","guideTitle":"Rows pagination","exampleId":"example6","exampleTitle":"Localize pagination","docPermalink":"/rows-pagination","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example1.ts.json
index 9388eb1dd..c51fbb0b6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable sorting for all columns\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example1.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example1',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable sorting for all columns\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example1.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example10.ts.json
index e3d6f9898..416bb677c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example10></app-example10>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport { ColumnSorting } from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example10',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"sort()\">Sort</button>\n        <button (click)=\"unsort()\">Go back to the original order</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    multiColumnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  getMultiColumnSortingPlugin(): ColumnSorting {\n    return this.hotTable.hotInstance!.getPlugin('multiColumnSorting')\n  }\n\n  sort() {\n    this.getMultiColumnSortingPlugin().sort([\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ]);\n  }\n\n  unsort() {\n    this.getMultiColumnSortingPlugin().clearSort();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example10.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example10","exampleTitle":"Sort by multiple columns programmatically (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example10></app-example10>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport { ColumnSorting } from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example10',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"sort()\">Sort</button>\n        <button (click)=\"unsort()\">Go back to the original order</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    multiColumnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  getMultiColumnSortingPlugin(): ColumnSorting {\n    return this.hotTable.hotInstance!.getPlugin('multiColumnSorting')\n  }\n\n  sort() {\n    this.getMultiColumnSortingPlugin().sort([\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ]);\n  }\n\n  unsort() {\n    this.getMultiColumnSortingPlugin().clearSort();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example10.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example10","exampleTitle":"Sort by multiple columns programmatically (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example11.ts.json
index 09ea92e49..3644bde0f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example11.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Use sorting hooks (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example11></app-example11>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\ninterface Row {\n  brand: string;\n  model: string;\n  price: number;\n  sellDate: string;\n}\n\nconst originalData: Row[] = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys: (keyof Row)[] = ['brand', 'model', 'price', 'sellDate'];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example11',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span>{{ status }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  status = 'Click a column header to sort.';\n  data: Row[] = originalData;\n\n  // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n  // order, so this example cycles ascending -> descending -> unsorted manually.\n  private activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\n  private getNextSortOrder(column: number): 'asc' | 'desc' | null {\n    if (!this.activeSort || this.activeSort.column !== column) {\n      return 'asc';\n    }\n\n    return this.activeSort.sortOrder === 'asc' ? 'desc' : null;\n  }\n\n  // Simulates a server that receives a sort request and returns sorted rows.\n  private sortOnServer(columnKey: keyof Row, sortOrder: string): Promise<Row[]> {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        const sortedData = [...originalData].sort((rowA, rowB) => {\n          if (rowA[columnKey] === rowB[columnKey]) {\n            return 0;\n          }\n\n          return ((rowA[columnKey] as any) > (rowB[columnKey] as any)) === (sortOrder === 'asc') ? 1 : -1;\n        });\n\n        resolve(sortedData);\n      }, 600);\n    });\n  }\n\n  readonly gridSettings: GridSettings = {\n    columns: [\n      { title: 'Brand', type: 'text', data: 'brand' },\n      { title: 'Model', type: 'text', data: 'model' },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeColumnSort: (\n      currentSortConfig: Handsontable.plugins.ColumnSorting.Config[],\n      destinationSortConfigs: Handsontable.plugins.ColumnSorting.Config[]\n    ) => {\n      const [requestedSort] = destinationSortConfigs;\n\n      if (!requestedSort) {\n        // the sorting was cleared programmatically, restore the original row order\n        this.activeSort = null;\n        this.data = originalData;\n\n        return false;\n      }\n\n      const nextOrder = this.getNextSortOrder(requestedSort.column);\n\n      if (nextOrder === null) {\n        this.activeSort = null;\n        this.status = 'Cleared the sort.';\n        this.data = originalData;\n\n        return false;\n      }\n\n      this.activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n      this.status = 'Sorting on the server...';\n\n      this.sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n        this.data = sortedData;\n        this.status = 'Sorted on the server.';\n      });\n\n      // return `false` to cancel Handsontable's own front-end sort\n      return false;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example11.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example11","exampleTitle":"Use sorting hooks (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Use sorting hooks (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example11></app-example11>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\ninterface Row {\n  brand: string;\n  model: string;\n  price: number;\n  sellDate: string;\n}\n\nconst originalData: Row[] = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys: (keyof Row)[] = ['brand', 'model', 'price', 'sellDate'];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example11',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span>{{ status }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  status = 'Click a column header to sort.';\n  data: Row[] = originalData;\n\n  // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n  // order, so this example cycles ascending -> descending -> unsorted manually.\n  private activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\n  private getNextSortOrder(column: number): 'asc' | 'desc' | null {\n    if (!this.activeSort || this.activeSort.column !== column) {\n      return 'asc';\n    }\n\n    return this.activeSort.sortOrder === 'asc' ? 'desc' : null;\n  }\n\n  // Simulates a server that receives a sort request and returns sorted rows.\n  private sortOnServer(columnKey: keyof Row, sortOrder: string): Promise<Row[]> {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        const sortedData = [...originalData].sort((rowA, rowB) => {\n          if (rowA[columnKey] === rowB[columnKey]) {\n            return 0;\n          }\n\n          return ((rowA[columnKey] as any) > (rowB[columnKey] as any)) === (sortOrder === 'asc') ? 1 : -1;\n        });\n\n        resolve(sortedData);\n      }, 600);\n    });\n  }\n\n  readonly gridSettings: GridSettings = {\n    columns: [\n      { title: 'Brand', type: 'text', data: 'brand' },\n      { title: 'Model', type: 'text', data: 'model' },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeColumnSort: (\n      currentSortConfig: Handsontable.plugins.ColumnSorting.Config[],\n      destinationSortConfigs: Handsontable.plugins.ColumnSorting.Config[]\n    ) => {\n      const [requestedSort] = destinationSortConfigs;\n\n      if (!requestedSort) {\n        // the sorting was cleared programmatically, restore the original row order\n        this.activeSort = null;\n        this.data = originalData;\n\n        return false;\n      }\n\n      const nextOrder = this.getNextSortOrder(requestedSort.column);\n\n      if (nextOrder === null) {\n        this.activeSort = null;\n        this.status = 'Cleared the sort.';\n        this.data = originalData;\n\n        return false;\n      }\n\n      this.activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n      this.status = 'Sorting on the server...';\n\n      this.sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n        this.data = sortedData;\n        this.status = 'Sorted on the server.';\n      });\n\n      // return `false` to cancel Handsontable's own front-end sort\n      return false;\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example11.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example11","exampleTitle":"Use sorting hooks (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example12.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example12.ts.json
index aed341ba0..ab3c3e7ec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example12.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example12.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example12></app-example12>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Builds one grid's settings. Only `sortFixedRows` differs between the two grids.\nconst createSettings = (sortFixedRows: boolean): GridSettings => ({\n  data: getData(),\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  columnSorting: {\n    // `false` is the default: the frozen rows keep their place whatever you sort by.\n    sortFixedRows,\n    // Both grids start sorted by revenue, highest first.\n    initialConfig: { column: 1, sortOrder: 'desc' },\n  },\n  height: 'auto',\n  stretchH: 'all',\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example12',\n  template: `\n    <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <hot-table [settings]=\"defaultSettings\"></hot-table>\n    <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n    <hot-table [settings]=\"allRowsSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly defaultSettings = createSettings(false);\n  readonly allRowsSettings = createSettings(true);\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example12.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example12","exampleTitle":"Frozen rows stay out of the sort by default (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example12></app-example12>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Builds one grid's settings. Only `sortFixedRows` differs between the two grids.\nconst createSettings = (sortFixedRows: boolean): GridSettings => ({\n  data: getData(),\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  columnSorting: {\n    // `false` is the default: the frozen rows keep their place whatever you sort by.\n    sortFixedRows,\n    // Both grids start sorted by revenue, highest first.\n    initialConfig: { column: 1, sortOrder: 'desc' },\n  },\n  height: 'auto',\n  stretchH: 'all',\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example12',\n  template: `\n    <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <hot-table [settings]=\"defaultSettings\"></hot-table>\n    <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n    <hot-table [settings]=\"allRowsSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly defaultSettings = createSettings(false);\n  readonly allRowsSettings = createSettings(true);\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example12.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example12","exampleTitle":"Frozen rows stay out of the sort by default (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example2.ts.json
index dce86da94..56c521457 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Enable sorting (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n// enable sorting for all columns\n    columnSorting: true,\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n        // disable sorting for the 'Brand' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        // disable sorting for the 'Price' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        // disable sorting for the 'Time' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example2.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example2","exampleTitle":"Enable sorting (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Enable sorting (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example2',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n// enable sorting for all columns\n    columnSorting: true,\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n        // disable sorting for the 'Brand' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n        // disable sorting for the 'Price' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n        // disable sorting for the 'Time' column\n        columnSorting: {\n          headerAction: false,\n        },\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example2.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example2","exampleTitle":"Enable sorting (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example3.ts.json
index 102f3f473..f3a39ac8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model<br>(text)',\n        // set the type of the 'Model' column\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price<br>(numeric)',\n        // set the type of the 'Price' column\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Sold on<br>(date)',\n        // set the type of the 'Date' column\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time<br>(time)',\n        // set the type of the 'Time' column\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock<br>(checkbox)',\n        // set the type of the 'In stock' column\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n      {\n        title: 'Size<br>(dropdown)',\n        // set the type of the 'Size' column\n        type: 'dropdown',\n        data: 'size',\n        source: ['XS', 'S', 'M', 'L', 'XL'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Color<br>(autocomplete)',\n        // set the type of the 'Size' column\n        type: 'autocomplete',\n        data: 'color',\n        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Email<br>(password)',\n        // set the type of the 'Email' column\n        type: 'password',\n        data: 'email',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    sanitizer: sanitizeHeader,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example3.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example3","exampleTitle":"Sort different types of data (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example3></app-example3>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\n@Component({\n  selector: 'app-example3',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Model<br>(text)',\n        // set the type of the 'Model' column\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price<br>(numeric)',\n        // set the type of the 'Price' column\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Sold on<br>(date)',\n        // set the type of the 'Date' column\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time<br>(time)',\n        // set the type of the 'Time' column\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock<br>(checkbox)',\n        // set the type of the 'In stock' column\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n      {\n        title: 'Size<br>(dropdown)',\n        // set the type of the 'Size' column\n        type: 'dropdown',\n        data: 'size',\n        source: ['XS', 'S', 'M', 'L', 'XL'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Color<br>(autocomplete)',\n        // set the type of the 'Size' column\n        type: 'autocomplete',\n        data: 'color',\n        source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n        className: 'htCenter',\n      },\n      {\n        title: 'Email<br>(password)',\n        // set the type of the 'Email' column\n        type: 'password',\n        data: 'email',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    sanitizer: sanitizeHeader,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example3.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example3","exampleTitle":"Sort different types of data (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example4.ts.json
index c097e2a3f..727fd5f53 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort by multiple columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable sorting by multiple columns, for all columns\n    multiColumnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example4.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example4","exampleTitle":"Sort by multiple columns (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort by multiple columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example4></app-example4>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example4',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    // enable sorting by multiple columns, for all columns\n    multiColumnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example4.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example4","exampleTitle":"Sort by multiple columns (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example5.ts.json
index b87bcf456..b57553e47 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    multiColumnSorting: {\n      initialConfig: [\n        // at initialization, sort the data by the 'Brand' column, in ascending order\n        {\n          column: 0,\n          sortOrder: 'asc',\n        },\n        // at initialization, sort the data by the 'Model' column, in descending order\n        {\n          column: 1,\n          sortOrder: 'desc',\n        },\n      ],\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example5.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example5","exampleTitle":"Set an initial multi-column sort order (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-example5></app-example5>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example5',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    multiColumnSorting: {\n      initialConfig: [\n        // at initialization, sort the data by the 'Brand' column, in ascending order\n        {\n          column: 0,\n          sortOrder: 'asc',\n        },\n        // at initialization, sort the data by the 'Model' column, in descending order\n        {\n          column: 1,\n          sortOrder: 'desc',\n        },\n      ],\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example5.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example5","exampleTitle":"Set an initial multi-column sort order (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example6.ts.json
index cd4afba6a..e5f77a139 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Add custom sort icons (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .custom-sort-icon-example-1 .columnSorting.sortAction.ascending::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n      }\n\n      .custom-sort-icon-example-1 .columnSorting.sortAction.descending::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n      }\n    }\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    className: 'custom-sort-icon-example-1',\n    columnSorting: {\n      initialConfig: {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example6.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example6","exampleTitle":"Add custom sort icons (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Add custom sort icons (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example6></app-example6>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example6',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .custom-sort-icon-example-1 .columnSorting.sortAction.ascending::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n      }\n\n      .custom-sort-icon-example-1 .columnSorting.sortAction.descending::before {\n        -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n      }\n    }\n  `,\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    className: 'custom-sort-icon-example-1',\n    columnSorting: {\n      initialConfig: {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example6.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example6","exampleTitle":"Add custom sort icons (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example7.ts.json
index 073360092..a98a6cc84 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example7.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example7.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Add custom sort icons (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n        content: '①';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n        content: '②';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n        content: '③';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n        content: '④';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n        content: '⑤';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n        content: '⑥';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n        content: '⑦';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n        width: 10px;\n        font-size: 10px;\n      }\n\n      .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction:before {\n        right: 5px;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Color',\n        type: 'text',\n        data: 'color',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    className: 'custom-sort-icon-example-3',\n    multiColumnSorting: {\n      initialConfig: [\n        {\n          column: 0,\n          sortOrder: 'asc',\n        },\n        {\n          column: 1,\n          sortOrder: 'desc',\n        },\n        {\n          column: 2,\n          sortOrder: 'asc',\n        },\n        {\n          column: 3,\n          sortOrder: 'desc',\n        },\n        {\n          column: 4,\n          sortOrder: 'asc',\n        },\n        {\n          column: 5,\n          sortOrder: 'desc',\n        },\n        {\n          column: 6,\n          sortOrder: 'asc',\n        },\n      ],\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example7.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example7","exampleTitle":"Add custom sort icons (4)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Add custom sort icons (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example7></app-example7>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'app-example7',\n  template: `\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  styles: `\n    :host ::ng-deep {\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n        content: '①';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n        content: '②';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n        content: '③';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n        content: '④';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n        content: '⑤';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n        content: '⑥';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n        content: '⑦';\n      }\n\n      .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n        width: 10px;\n        font-size: 10px;\n      }\n\n      .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction:before {\n        right: 5px;\n      }\n    }\n  `,\n  standalone: true,\n  imports: [HotTableModule],\n})\nexport class AppComponent {\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Color',\n        type: 'text',\n        data: 'color',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    className: 'custom-sort-icon-example-3',\n    multiColumnSorting: {\n      initialConfig: [\n        {\n          column: 0,\n          sortOrder: 'asc',\n        },\n        {\n          column: 1,\n          sortOrder: 'desc',\n        },\n        {\n          column: 2,\n          sortOrder: 'asc',\n        },\n        {\n          column: 3,\n          sortOrder: 'desc',\n        },\n        {\n          column: 4,\n          sortOrder: 'asc',\n        },\n        {\n          column: 5,\n          sortOrder: 'desc',\n        },\n        {\n          column: 6,\n          sortOrder: 'asc',\n        },\n      ],\n    },\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example7.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example7","exampleTitle":"Add custom sort icons (4)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example8.ts.json
index 9f5ff0241..24e0eff2a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example8',\n  template: `\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  styles: `\n    :host ::ng-deep {\n      /* The background is set through the theme's own CSS variables rather than with a plain\n         background-color: the theme's row-striping rule is more specific than a single class,\n         so a direct declaration would be ignored. */\n      .handsontable td.featured-product {\n        --ht-row-cell-odd-background-color: #fff8e1;\n        --ht-row-cell-even-background-color: #fff8e1;\n\n        font-weight: 600;\n      }\n    }\n  `,\n})\nexport class AppComponent {\n  readonly gridSettings: GridSettings = {\n    data: products,\n    columns: [\n      { data: 'name', type: 'text' },\n      {\n        data: 'price',\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { data: 'inStock', type: 'numeric' },\n    ],\n    colHeaders: ['Product', 'Price', 'In stock'],\n    height: 'auto',\n    stretchH: 'all',\n    columnSorting: true,\n    // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting. Move the\n    // featured rows back to the top of the view. The rule reads the data, not a row position,\n    // so you pin a row by flagging it rather than by knowing where it sits.\n    // Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n    // while the grid is being created.\n    afterColumnSort(this: Handsontable) {\n      const featuredRows = products\n        .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n        .filter((visualRow): visualRow is number => visualRow !== null);\n\n      // Pass every index in one call: each move shifts the rows after it.\n      this.rowIndexMapper.moveIndexes(featuredRows, 0);\n    },\n    // `cells()` receives a physical row index, so it reads the source array directly.\n    cells(row: number) {\n      return products[row]?.featured ? { className: 'featured-product' } : {};\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example8.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example8","exampleTitle":"Exclude rows that are not frozen (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example8></app-example8>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example8',\n  template: `\n    <div>\n      <hot-table [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n  styles: `\n    :host ::ng-deep {\n      /* The background is set through the theme's own CSS variables rather than with a plain\n         background-color: the theme's row-striping rule is more specific than a single class,\n         so a direct declaration would be ignored. */\n      .handsontable td.featured-product {\n        --ht-row-cell-odd-background-color: #fff8e1;\n        --ht-row-cell-even-background-color: #fff8e1;\n\n        font-weight: 600;\n      }\n    }\n  `,\n})\nexport class AppComponent {\n  readonly gridSettings: GridSettings = {\n    data: products,\n    columns: [\n      { data: 'name', type: 'text' },\n      {\n        data: 'price',\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n      },\n      { data: 'inStock', type: 'numeric' },\n    ],\n    colHeaders: ['Product', 'Price', 'In stock'],\n    height: 'auto',\n    stretchH: 'all',\n    columnSorting: true,\n    // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting. Move the\n    // featured rows back to the top of the view. The rule reads the data, not a row position,\n    // so you pin a row by flagging it rather than by knowing where it sits.\n    // Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n    // while the grid is being created.\n    afterColumnSort(this: Handsontable) {\n      const featuredRows = products\n        .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n        .filter((visualRow): visualRow is number => visualRow !== null);\n\n      // Pass every index in one call: each move shifts the rows after it.\n      this.rowIndexMapper.moveIndexes(featuredRows, 0);\n    },\n    // `cells()` receives a physical row index, so it reads the source array directly.\n    cells(row: number) {\n      return products[row]?.featured ? { className: 'featured-product' } : {};\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example8.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example8","exampleTitle":"Exclude rows that are not frozen (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example9.ts.json
index 4e0b99c10..2124cdb83 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__angular__example9.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example9></app-example9>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {ColumnSorting} from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example9',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"sortAscBrand()\">Sort by the \"Brand\" column, in ascending order</button>\n        <button (click)=\"unsort()\">Go back to the original order</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  getColumnSortingPlugin(): ColumnSorting {\n    return this.hotTable.hotInstance!.getPlugin('columnSorting')\n  }\n\n  sortAscBrand() {\n    this.getColumnSortingPlugin().sort({\n      column: 0,\n      sortOrder: 'asc',\n    });\n  }\n\n  unsort() {\n    this.getColumnSortingPlugin().clearSort();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example9.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example9","exampleTitle":"Sort data programmatically (2)","docPermalink":"/rows-sorting","lang":"Angular"}
+{"framework":"angular","displayName":"Rows ▸ Rows sorting · Sort data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example9></app-example9>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {ColumnSorting} from 'handsontable/plugins';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example9',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button (click)=\"sortAscBrand()\">Sort by the \"Brand\" column, in ascending order</button>\n        <button (click)=\"unsort()\">Go back to the original order</button>\n      </div>\n    </div>\n\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    columns: [\n      {\n        title: 'Brand',\n        type: 'text',\n        data: 'brand',\n      },\n      {\n        title: 'Model',\n        type: 'text',\n        data: 'model',\n      },\n      {\n        title: 'Price',\n        type: 'numeric',\n        data: 'price',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n      {\n        title: 'Date',\n        type: 'intl-date',\n        data: 'sellDate',\n        locale: 'en-US',\n        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n        className: 'htRight',\n      },\n      {\n        title: 'Time',\n        type: 'intl-time',\n        data: 'sellTime',\n        locale: 'en-US',\n        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n        className: 'htRight',\n      },\n      {\n        title: 'In stock',\n        type: 'checkbox',\n        data: 'inStock',\n        className: 'htCenter',\n      },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  getColumnSortingPlugin(): ColumnSorting {\n    return this.hotTable.hotInstance!.getPlugin('columnSorting')\n  }\n\n  sortAscBrand() {\n    this.getColumnSortingPlugin().sort({\n      column: 0,\n      sortOrder: 'asc',\n    });\n  }\n\n  unsort() {\n    this.getColumnSortingPlugin().clearSort();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example9.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example9","exampleTitle":"Sort data programmatically (2)","docPermalink":"/rows-sorting","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json
index b51456825..29942a385 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Add custom sort icons · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Add custom sort icons · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json
index 29d7381ea..62cc20c1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Add custom sort icons · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Add custom sort icons · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json
index fa839ad6d..fff813c09 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons3');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons3');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json
index 4fa7cddcc..b8e71ecfd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons3')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomSortIcons3')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json
index 8ad251a68..e15ed3e51 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Enable sorting · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableSortingForColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Enable sorting · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableSortingForColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json
index b1add19f7..547891201 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Enable sorting · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableSortingForColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Enable sorting · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableSortingForColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json
index e8ad05915..6adbebb13 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products = [\n    { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n    { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n    { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n    { name: 'Road Tire Tube', price: 59, inStock: 1 },\n    { name: 'Racing Socks', price: 30, inStock: 5 },\n    { name: 'Water Bottle', price: 12.5, inStock: 24 },\n    { name: 'Bike Light', price: 45, inStock: 8 },\n    { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\nconst container = document.querySelector('#exampleExcludeRowsFromSorting');\nnew Handsontable(container, {\n    data: products,\n    columns: [\n        { data: 'name', type: 'text' },\n        {\n            data: 'price',\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { data: 'inStock', type: 'numeric' },\n    ],\n    colHeaders: ['Product', 'Price', 'In stock'],\n    height: 'auto',\n    stretchH: 'all',\n    columnSorting: true,\n    // `afterColumnSort()` is a Handsontable hook: it fires after every sort. Move the featured\n    // rows back to the top of the view. The rule reads the data, not a row position, so you pin\n    // a row by flagging it rather than by knowing where it sits.\n    // Read the grid from `this`, not from a variable: a sort set in `initialConfig` runs inside\n    // the constructor, before any variable holding the grid has been assigned.\n    afterColumnSort() {\n        const featuredRows = products\n            .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n            .filter((visualRow) => visualRow !== null);\n        // Pass every index in one call: each move shifts the rows after it.\n        this.rowIndexMapper.moveIndexes(featuredRows, 0);\n    },\n    // `cells()` receives a physical row index, so it reads the source array directly.\n    cells(row) {\n        return products[row]?.featured ? { className: 'featured-product' } : {};\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products = [\n    { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n    { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n    { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n    { name: 'Road Tire Tube', price: 59, inStock: 1 },\n    { name: 'Racing Socks', price: 30, inStock: 5 },\n    { name: 'Water Bottle', price: 12.5, inStock: 24 },\n    { name: 'Bike Light', price: 45, inStock: 8 },\n    { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\nconst container = document.querySelector('#exampleExcludeRowsFromSorting');\nnew Handsontable(container, {\n    data: products,\n    columns: [\n        { data: 'name', type: 'text' },\n        {\n            data: 'price',\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { data: 'inStock', type: 'numeric' },\n    ],\n    colHeaders: ['Product', 'Price', 'In stock'],\n    height: 'auto',\n    stretchH: 'all',\n    columnSorting: true,\n    // `afterColumnSort()` is a Handsontable hook: it fires after every sort. Move the featured\n    // rows back to the top of the view. The rule reads the data, not a row position, so you pin\n    // a row by flagging it rather than by knowing where it sits.\n    // Read the grid from `this`, not from a variable: a sort set in `initialConfig` runs inside\n    // the constructor, before any variable holding the grid has been assigned.\n    afterColumnSort() {\n        const featuredRows = products\n            .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n            .filter((visualRow) => visualRow !== null);\n        // Pass every index in one call: each move shifts the rows after it.\n        this.rowIndexMapper.moveIndexes(featuredRows, 0);\n    },\n    // `cells()` receives a physical row index, so it reads the source array directly.\n    cells(row) {\n        return products[row]?.featured ? { className: 'featured-product' } : {};\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json
index a1e997dbd..d626fcbbd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\nconst container = document.querySelector('#exampleExcludeRowsFromSorting')!;\n\nnew Handsontable(container, {\n  data: products,\n  columns: [\n    { data: 'name', type: 'text' },\n    {\n      data: 'price',\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'Price', 'In stock'],\n  height: 'auto',\n  stretchH: 'all',\n  columnSorting: true,\n  // `afterColumnSort()` is a Handsontable hook: it fires after every sort. Move the featured\n  // rows back to the top of the view. The rule reads the data, not a row position, so you pin\n  // a row by flagging it rather than by knowing where it sits.\n  // Read the grid from `this`, not from a variable: a sort set in `initialConfig` runs inside\n  // the constructor, before any variable holding the grid has been assigned.\n  afterColumnSort(this: Handsontable) {\n    const featuredRows = products\n      .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n      .filter((visualRow): visualRow is number => visualRow !== null);\n\n    // Pass every index in one call: each move shifts the rows after it.\n    this.rowIndexMapper.moveIndexes(featuredRows, 0);\n  },\n  // `cells()` receives a physical row index, so it reads the source array directly.\n  cells(row) {\n    return products[row]?.featured ? { className: 'featured-product' } : {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\nconst container = document.querySelector('#exampleExcludeRowsFromSorting')!;\n\nnew Handsontable(container, {\n  data: products,\n  columns: [\n    { data: 'name', type: 'text' },\n    {\n      data: 'price',\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'Price', 'In stock'],\n  height: 'auto',\n  stretchH: 'all',\n  columnSorting: true,\n  // `afterColumnSort()` is a Handsontable hook: it fires after every sort. Move the featured\n  // rows back to the top of the view. The rule reads the data, not a row position, so you pin\n  // a row by flagging it rather than by knowing where it sits.\n  // Read the grid from `this`, not from a variable: a sort set in `initialConfig` runs inside\n  // the constructor, before any variable holding the grid has been assigned.\n  afterColumnSort(this: Handsontable) {\n    const featuredRows = products\n      .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n      .filter((visualRow): visualRow is number => visualRow !== null);\n\n    // Pass every index in one call: each move shifts the rows after it.\n    this.rowIndexMapper.moveIndexes(featuredRows, 0);\n  },\n  // `cells()` receives a physical row index, so it reads the source array directly.\n  cells(row) {\n    return products[row]?.featured ? { className: 'featured-product' } : {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json
index 0137d927b..4aae67128 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleInitialSortOrder');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleInitialSortOrder.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleInitialSortOrder');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleInitialSortOrder.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json
index 000723644..e3ef8de32 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleInitialSortOrder')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleInitialSortOrder.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleInitialSortOrder')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleInitialSortOrder.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json
index 4cdb5c530..58e44dd0a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort_asc\">Sort by the \"Brand\" column, in ascending order</button>\n      <button id=\"unsort\">Go back to the original order</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPI');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst columnSorting = hot.getPlugin('columnSorting');\nconst buttonSortAscending = document.querySelector('#sort_asc');\n\nbuttonSortAscending.addEventListener('click', () => {\n  columnSorting.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n});\n\nconst buttonUnsort = document.querySelector('#unsort');\n\nbuttonUnsort.addEventListener('click', () => {\n  columnSorting.clearSort();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPI.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort_asc\">Sort by the \"Brand\" column, in ascending order</button>\n      <button id=\"unsort\">Go back to the original order</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPI');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst columnSorting = hot.getPlugin('columnSorting');\nconst buttonSortAscending = document.querySelector('#sort_asc');\n\nbuttonSortAscending.addEventListener('click', () => {\n  columnSorting.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n});\n\nconst buttonUnsort = document.querySelector('#unsort');\n\nbuttonUnsort.addEventListener('click', () => {\n  columnSorting.clearSort();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPI.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json
index 0cd2205b9..ead866c50 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort_asc\">Sort by the \"Brand\" column, in ascending order</button>\n      <button id=\"unsort\">Go back to the original order</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ColumnSorting } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPI')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst columnSorting: ColumnSorting = hot.getPlugin('columnSorting');\n\nconst buttonSortAscending = document.querySelector('#sort_asc')!;\n\nbuttonSortAscending.addEventListener('click', () => {\n  columnSorting.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n});\n\nconst buttonUnsort = document.querySelector('#unsort')!;\n\nbuttonUnsort.addEventListener('click', () => {\n  columnSorting.clearSort();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPI.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort_asc\">Sort by the \"Brand\" column, in ascending order</button>\n      <button id=\"unsort\">Go back to the original order</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ColumnSorting } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPI')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst columnSorting: ColumnSorting = hot.getPlugin('columnSorting');\n\nconst buttonSortAscending = document.querySelector('#sort_asc')!;\n\nbuttonSortAscending.addEventListener('click', () => {\n  columnSorting.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n});\n\nconst buttonUnsort = document.querySelector('#unsort')!;\n\nbuttonUnsort.addEventListener('click', () => {\n  columnSorting.clearSort();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPI.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json
index 8a22131f0..dd8c788f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort\">Sort</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPIMultipleColumns');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst multiColumnSorting = hot.getPlugin('multiColumnSorting');\nconst buttonSort = document.querySelector('#sort');\n\nbuttonSort.addEventListener('click', () => {\n  multiColumnSorting.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort\">Sort</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPIMultipleColumns');\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst multiColumnSorting = hot.getPlugin('multiColumnSorting');\nconst buttonSort = document.querySelector('#sort');\n\nbuttonSort.addEventListener('click', () => {\n  multiColumnSorting.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json
index 31398778e..1ec450745 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort\">Sort</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { MultiColumnSorting } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPIMultipleColumns')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst multiColumnSorting: MultiColumnSorting = hot.getPlugin('multiColumnSorting');\n\nconst buttonSort = document.querySelector('#sort')!;\n\nbuttonSort.addEventListener('click', () => {\n  multiColumnSorting.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"sort\">Sort</button>\n    </div>\n  </div>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { MultiColumnSorting } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByAPIMultipleColumns')!;\n\nconst hot = new Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst multiColumnSorting: MultiColumnSorting = hot.getPlugin('multiColumnSorting');\n\nconst buttonSort = document.querySelector('#sort')!;\n\nbuttonSort.addEventListener('click', () => {\n  multiColumnSorting.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json
index ad1cdf281..2546cb800 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByMultipleColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByMultipleColumns');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json
index faa2b65e8..935644d1e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByMultipleColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortByMultipleColumns')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json
index 1119ce2e0..1b67bd4fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#exampleSortDifferentTypes');\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sort different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html) => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#exampleSortDifferentTypes');\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json
index 54b23b510..b8150d07b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#exampleSortDifferentTypes')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sort different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst container = document.querySelector('#exampleSortDifferentTypes')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.js.json
index fd53af136..cfe9eaf1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n  <div id=\"exampleSortFixedRows1\"></div>\n  <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n  <div id=\"exampleSortFixedRows2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n    ['Target', 30000, 225],\n    ['North', 42300, 318],\n    ['South', 18750, 142],\n    ['East', 27900, 205],\n    ['West', 35100, 264],\n    ['Total', 124050, 929],\n];\nconst createGrid = (container, sortFixedRows) => new Handsontable(container, {\n    data: getData(),\n    colHeaders: ['Region', 'Revenue', 'Orders'],\n    columns: [\n        { type: 'text' },\n        {\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n            },\n        },\n        { type: 'numeric' },\n    ],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    columnSorting: {\n        // `false` is the default: the frozen rows keep their place whatever you sort by.\n        sortFixedRows,\n        // Both grids start sorted by revenue, highest first.\n        initialConfig: { column: 1, sortOrder: 'desc' },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    licenseKey: 'non-commercial-and-evaluation',\n});\ncreateGrid(document.querySelector('#exampleSortFixedRows1'), false);\ncreateGrid(document.querySelector('#exampleSortFixedRows2'), true);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortFixedRows.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n  <div id=\"exampleSortFixedRows1\"></div>\n  <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n  <div id=\"exampleSortFixedRows2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n    ['Target', 30000, 225],\n    ['North', 42300, 318],\n    ['South', 18750, 142],\n    ['East', 27900, 205],\n    ['West', 35100, 264],\n    ['Total', 124050, 929],\n];\nconst createGrid = (container, sortFixedRows) => new Handsontable(container, {\n    data: getData(),\n    colHeaders: ['Region', 'Revenue', 'Orders'],\n    columns: [\n        { type: 'text' },\n        {\n            type: 'numeric',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n            },\n        },\n        { type: 'numeric' },\n    ],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    columnSorting: {\n        // `false` is the default: the frozen rows keep their place whatever you sort by.\n        sortFixedRows,\n        // Both grids start sorted by revenue, highest first.\n        initialConfig: { column: 1, sortOrder: 'desc' },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    licenseKey: 'non-commercial-and-evaluation',\n});\ncreateGrid(document.querySelector('#exampleSortFixedRows1'), false);\ncreateGrid(document.querySelector('#exampleSortFixedRows2'), true);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortFixedRows.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.ts.json
index e4cb30ade..07b0b032f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortFixedRows.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n  <div id=\"exampleSortFixedRows1\"></div>\n  <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n  <div id=\"exampleSortFixedRows2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\nconst createGrid = (container: HTMLElement, sortFixedRows: boolean) =>\n  new Handsontable(container, {\n    data: getData(),\n    colHeaders: ['Region', 'Revenue', 'Orders'],\n    columns: [\n      { type: 'text' },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n        },\n      },\n      { type: 'numeric' },\n    ],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    columnSorting: {\n      // `false` is the default: the frozen rows keep their place whatever you sort by.\n      sortFixedRows,\n      // Both grids start sorted by revenue, highest first.\n      initialConfig: { column: 1, sortOrder: 'desc' },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    licenseKey: 'non-commercial-and-evaluation',\n  });\n\ncreateGrid(document.querySelector('#exampleSortFixedRows1')!, false);\ncreateGrid(document.querySelector('#exampleSortFixedRows2')!, true);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortFixedRows.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n  <div id=\"exampleSortFixedRows1\"></div>\n  <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n  <div id=\"exampleSortFixedRows2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\nconst createGrid = (container: HTMLElement, sortFixedRows: boolean) =>\n  new Handsontable(container, {\n    data: getData(),\n    colHeaders: ['Region', 'Revenue', 'Orders'],\n    columns: [\n      { type: 'text' },\n      {\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n        },\n      },\n      { type: 'numeric' },\n    ],\n    fixedRowsTop: 1,\n    fixedRowsBottom: 1,\n    columnSorting: {\n      // `false` is the default: the frozen rows keep their place whatever you sort by.\n      sortFixedRows,\n      // Both grids start sorted by revenue, highest first.\n      initialConfig: { column: 1, sortOrder: 'desc' },\n    },\n    height: 'auto',\n    stretchH: 'all',\n    licenseKey: 'non-commercial-and-evaluation',\n  });\n\ncreateGrid(document.querySelector('#exampleSortFixedRows1')!, false);\ncreateGrid(document.querySelector('#exampleSortFixedRows2')!, true);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortFixedRows.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json
index fa3fe0c35..9d4d8e5ec 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sorting demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingDemo');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingDemo.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Sorting demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingDemo');\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingDemo.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json
index dcd319cd5..21ed040cd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sorting demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingDemo')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingDemo.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Sorting demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingDemo')!;\n\nnew Handsontable(container, {\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingDemo.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json
index d6d96c7dc..99fe4006f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <span id=\"exampleSortingHooksStatus\">Click a column header to sort.</span>\n    </div>\n  </div>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSortingHooks');\nconst status = document.querySelector('#exampleSortingHooksStatus');\nconst data = [\n    { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n    { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n    { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n    { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n    { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort = null;\nfunction getNextSortOrder(column) {\n    if (!activeSort || activeSort.column !== column) {\n        return 'asc';\n    }\n    return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey, sortOrder) {\n    return new Promise((resolve) => {\n        setTimeout(() => {\n            const sortedData = [...data].sort((rowA, rowB) => {\n                if (rowA[columnKey] === rowB[columnKey]) {\n                    return 0;\n                }\n                return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n            });\n            resolve(sortedData);\n        }, 600);\n    });\n}\nconst hot = new Handsontable(container, {\n    data,\n    columns: [\n        { title: 'Brand', type: 'text', data: 'brand' },\n        { title: 'Model', type: 'text', data: 'model' },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n        const [requestedSort] = destinationSortConfigs;\n        if (!requestedSort) {\n            // the sorting was cleared programmatically, restore the original row order\n            activeSort = null;\n            hot.loadData(data);\n            return false;\n        }\n        const nextOrder = getNextSortOrder(requestedSort.column);\n        if (nextOrder === null) {\n            activeSort = null;\n            status.textContent = 'Cleared the sort.';\n            hot.loadData(data);\n            return false;\n        }\n        activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n        status.textContent = 'Sorting on the server...';\n        sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n            hot.loadData(sortedData);\n            status.textContent = 'Sorted on the server.';\n        });\n        // return `false` to cancel Handsontable's own front-end sort\n        return false;\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <span id=\"exampleSortingHooksStatus\">Click a column header to sort.</span>\n    </div>\n  </div>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSortingHooks');\nconst status = document.querySelector('#exampleSortingHooksStatus');\nconst data = [\n    { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n    { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n    { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n    { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n    { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort = null;\nfunction getNextSortOrder(column) {\n    if (!activeSort || activeSort.column !== column) {\n        return 'asc';\n    }\n    return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey, sortOrder) {\n    return new Promise((resolve) => {\n        setTimeout(() => {\n            const sortedData = [...data].sort((rowA, rowB) => {\n                if (rowA[columnKey] === rowB[columnKey]) {\n                    return 0;\n                }\n                return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n            });\n            resolve(sortedData);\n        }, 600);\n    });\n}\nconst hot = new Handsontable(container, {\n    data,\n    columns: [\n        { title: 'Brand', type: 'text', data: 'brand' },\n        { title: 'Model', type: 'text', data: 'model' },\n        {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n        },\n    ],\n    columnSorting: true,\n    height: 'auto',\n    stretchH: 'all',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n        const [requestedSort] = destinationSortConfigs;\n        if (!requestedSort) {\n            // the sorting was cleared programmatically, restore the original row order\n            activeSort = null;\n            hot.loadData(data);\n            return false;\n        }\n        const nextOrder = getNextSortOrder(requestedSort.column);\n        if (nextOrder === null) {\n            activeSort = null;\n            status.textContent = 'Cleared the sort.';\n            hot.loadData(data);\n            return false;\n        }\n        activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n        status.textContent = 'Sorting on the server...';\n        sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n            hot.loadData(sortedData);\n            status.textContent = 'Sorted on the server.';\n        });\n        // return `false` to cancel Handsontable's own front-end sort\n        return false;\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json
index d579ee686..b635bec96 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <span id=\"exampleSortingHooksStatus\">Click a column header to sort.</span>\n    </div>\n  </div>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingHooks')!;\nconst status = document.querySelector('#exampleSortingHooksStatus')!;\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\nfunction getNextSortOrder(column: number): 'asc' | 'desc' | null {\n  if (!activeSort || activeSort.column !== column) {\n    return 'asc';\n  }\n\n  return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst hot = new Handsontable(container, {\n  data,\n  columns: [\n    { title: 'Brand', type: 'text', data: 'brand' },\n    { title: 'Model', type: 'text', data: 'model' },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n    const [requestedSort] = destinationSortConfigs;\n\n    if (!requestedSort) {\n      // the sorting was cleared programmatically, restore the original row order\n      activeSort = null;\n      hot.loadData(data);\n\n      return false;\n    }\n\n    const nextOrder = getNextSortOrder(requestedSort.column);\n\n    if (nextOrder === null) {\n      activeSort = null;\n      status.textContent = 'Cleared the sort.';\n      hot.loadData(data);\n\n      return false;\n    }\n\n    activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n    status.textContent = 'Sorting on the server...';\n\n    sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n      hot.loadData(sortedData);\n      status.textContent = 'Sorted on the server.';\n    });\n\n    // return `false` to cancel Handsontable's own front-end sort\n    return false;\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <span id=\"exampleSortingHooksStatus\">Click a column header to sort.</span>\n    </div>\n  </div>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingHooks')!;\nconst status = document.querySelector('#exampleSortingHooksStatus')!;\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\nfunction getNextSortOrder(column: number): 'asc' | 'desc' | null {\n  if (!activeSort || activeSort.column !== column) {\n    return 'asc';\n  }\n\n  return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst hot = new Handsontable(container, {\n  data,\n  columns: [\n    { title: 'Brand', type: 'text', data: 'brand' },\n    { title: 'Model', type: 'text', data: 'model' },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n    const [requestedSort] = destinationSortConfigs;\n\n    if (!requestedSort) {\n      // the sorting was cleared programmatically, restore the original row order\n      activeSort = null;\n      hot.loadData(data);\n\n      return false;\n    }\n\n    const nextOrder = getNextSortOrder(requestedSort.column);\n\n    if (nextOrder === null) {\n      activeSort = null;\n      status.textContent = 'Cleared the sort.';\n      hot.loadData(data);\n\n      return false;\n    }\n\n    activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n    status.textContent = 'Sorting on the server...';\n\n    sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n      hot.loadData(sortedData);\n      status.textContent = 'Sorted on the server.';\n    });\n\n    // return `false` to cancel Handsontable's own front-end sort\n    return false;\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json
index 512a60c62..dd9971886 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Add custom sort icons · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomSortIcons\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      columnSorting={{\n        initialConfig: {\n          column: 1,\n          sortOrder: 'desc',\n        },\n      }}\n      className=\"custom-sort-icon-example-1\"\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleCustomSortIcons.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Add custom sort icons · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomSortIcons\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      columnSorting={{\n        initialConfig: {\n          column: 1,\n          sortOrder: 'desc',\n        },\n      }}\n      className=\"custom-sort-icon-example-1\"\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleCustomSortIcons.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json
index ad543e611..36d8eedfa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomSortIcons3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    color: 'White',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Frame',\n    color: 'Black',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    color: 'Red',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    color: 'Green',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    color: 'Blue',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Color',\n          type: 'text',\n          data: 'color',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      multiColumnSorting={{\n        initialConfig: [\n          {\n            column: 0,\n            sortOrder: 'asc',\n          },\n          {\n            column: 1,\n            sortOrder: 'desc',\n          },\n          {\n            column: 2,\n            sortOrder: 'asc',\n          },\n          {\n            column: 3,\n            sortOrder: 'desc',\n          },\n          {\n            column: 4,\n            sortOrder: 'asc',\n          },\n          {\n            column: 5,\n            sortOrder: 'desc',\n          },\n          {\n            column: 6,\n            sortOrder: 'asc',\n          },\n        ],\n      }}\n      className=\"custom-sort-icon-example-3\"\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleCustomSortIcons3.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomSortIcons3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    color: 'White',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Frame',\n    color: 'Black',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    color: 'Red',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    color: 'Green',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    color: 'Blue',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Color',\n          type: 'text',\n          data: 'color',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      multiColumnSorting={{\n        initialConfig: [\n          {\n            column: 0,\n            sortOrder: 'asc',\n          },\n          {\n            column: 1,\n            sortOrder: 'desc',\n          },\n          {\n            column: 2,\n            sortOrder: 'asc',\n          },\n          {\n            column: 3,\n            sortOrder: 'desc',\n          },\n          {\n            column: 4,\n            sortOrder: 'asc',\n          },\n          {\n            column: 5,\n            sortOrder: 'desc',\n          },\n          {\n            column: 6,\n            sortOrder: 'asc',\n          },\n        ],\n      }}\n      className=\"custom-sort-icon-example-3\"\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleCustomSortIcons3.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json
index 42822fe03..835c6b070 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Enable sorting · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleEnableSortingForColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // enable sorting for all columns\n      columnSorting={true}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n          // disable sorting for the 'Brand' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n          // disable sorting for the 'Price' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n          // disable sorting for the 'Time' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleEnableSortingForColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Enable sorting · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleEnableSortingForColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      // enable sorting for all columns\n      columnSorting={true}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n          // disable sorting for the 'Brand' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n          // disable sorting for the 'Price' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n          // disable sorting for the 'Time' column\n          columnSorting: {\n            headerAction: false,\n          },\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleEnableSortingForColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json
index 9f7b63d99..5aeb5d898 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromSorting\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\n// Move the featured rows back to the top of the view. The rule reads the data, not a row\n// position, so you pin a row by flagging it rather than by knowing where it sits.\n// Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n// while the grid is being created - a component ref is not filled in yet at that point.\nfunction pinFeaturedRows(this: Handsontable) {\n  const featuredRows = products\n    .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n    .filter((visualRow): visualRow is number => visualRow !== null);\n\n  // Pass every index in one call: each move shifts the rows after it.\n  this.rowIndexMapper.moveIndexes(featuredRows, 0);\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={products}\n      columns={[\n        { data: 'name', type: 'text' },\n        {\n          data: 'price',\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { data: 'inStock', type: 'numeric' },\n      ]}\n      colHeaders={['Product', 'Price', 'In stock']}\n      height=\"auto\"\n      stretchH=\"all\"\n      columnSorting={true}\n      // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting\n      afterColumnSort={pinFeaturedRows}\n      // `cells()` receives a physical row index, so it reads the source array directly.\n      cells={(row: number) => (products[row]?.featured ? { className: 'featured-product' } : {})}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleExcludeRowsFromSorting.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromSorting\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\n// Move the featured rows back to the top of the view. The rule reads the data, not a row\n// position, so you pin a row by flagging it rather than by knowing where it sits.\n// Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n// while the grid is being created - a component ref is not filled in yet at that point.\nfunction pinFeaturedRows(this: Handsontable) {\n  const featuredRows = products\n    .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n    .filter((visualRow): visualRow is number => visualRow !== null);\n\n  // Pass every index in one call: each move shifts the rows after it.\n  this.rowIndexMapper.moveIndexes(featuredRows, 0);\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={products}\n      columns={[\n        { data: 'name', type: 'text' },\n        {\n          data: 'price',\n          type: 'numeric',\n          locale: 'en-US',\n          numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n        },\n        { data: 'inStock', type: 'numeric' },\n      ]}\n      colHeaders={['Product', 'Price', 'In stock']}\n      height=\"auto\"\n      stretchH=\"all\"\n      columnSorting={true}\n      // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting\n      afterColumnSort={pinFeaturedRows}\n      // `cells()` receives a physical row index, so it reads the source array directly.\n      cells={(row: number) => (products[row]?.featured ? { className: 'featured-product' } : {})}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/react/exampleExcludeRowsFromSorting.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json
index 4f2cbfdc6..85633d2e3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleInitialSortOrder\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      multiColumnSorting={{\n        initialConfig: [\n          {\n            // at initialization, sort the data by the 'Brand' column, in ascending order\n            column: 0,\n            sortOrder: 'asc',\n          },\n          // at initialization, sort the data by the 'Model' column, in descending order\n          {\n            column: 1,\n            sortOrder: 'desc',\n          },\n        ],\n      }}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleInitialSortOrder.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleInitialSortOrder\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      multiColumnSorting={{\n        initialConfig: [\n          {\n            // at initialization, sort the data by the 'Brand' column, in ascending order\n            column: 0,\n            sortOrder: 'asc',\n          },\n          // at initialization, sort the data by the 'Model' column, in descending order\n          {\n            column: 1,\n            sortOrder: 'desc',\n          },\n        ],\n      }}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleInitialSortOrder.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json
index 6cc224a27..dfaef4893 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort data programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByAPI\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const sortAsc = () => {\n    // get the `ColumnSorting` plugin\n    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');\n\n    columnSorting?.sort({\n      column: 0,\n      sortOrder: 'asc',\n    });\n  };\n\n  const unsort = () => {\n    // get the `ColumnSorting` plugin\n    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');\n\n    columnSorting?.clearSort();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={sortAsc}>Sort by the \"Brand\" column, in ascending order</button>\n          <button onClick={unsort}>Go back to the original order</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        columnSorting={true}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByAPI.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort data programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByAPI\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const sortAsc = () => {\n    // get the `ColumnSorting` plugin\n    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');\n\n    columnSorting?.sort({\n      column: 0,\n      sortOrder: 'asc',\n    });\n  };\n\n  const unsort = () => {\n    // get the `ColumnSorting` plugin\n    const columnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('columnSorting');\n\n    columnSorting?.clearSort();\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={sortAsc}>Sort by the \"Brand\" column, in ascending order</button>\n          <button onClick={unsort}>Go back to the original order</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        columnSorting={true}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByAPI.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json
index 5d21b7a5d..e9898561e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByAPIMultipleColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const sort = () => {\n    // get the `MultiColumnSorting` plugin\n    const multiColumnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('multiColumnSorting');\n\n    multiColumnSorting?.sort([\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ]);\n  };\n\n  return (\n    <>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        multiColumnSorting={true}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={sort}>Sort</button>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByAPIMultipleColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByAPIMultipleColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  const hotTableComponentRef = useRef<HotTableRef>(null);\n  const sort = () => {\n    // get the `MultiColumnSorting` plugin\n    const multiColumnSorting = hotTableComponentRef.current?.hotInstance?.getPlugin('multiColumnSorting');\n\n    multiColumnSorting?.sort([\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ]);\n  };\n\n  return (\n    <>\n      <HotTable\n        ref={hotTableComponentRef}\n        data={data}\n        columns={[\n          {\n            title: 'Brand',\n            type: 'text',\n            data: 'brand',\n          },\n          {\n            title: 'Model',\n            type: 'text',\n            data: 'model',\n          },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: {\n              style: 'currency',\n              currency: 'USD',\n              minimumFractionDigits: 2,\n            },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n          {\n            title: 'Time',\n            type: 'intl-time',\n            data: 'sellTime',\n            locale: 'en-US',\n            timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n            className: 'htRight',\n          },\n          {\n            title: 'In stock',\n            type: 'checkbox',\n            data: 'inStock',\n            className: 'htCenter',\n          },\n        ]}\n        multiColumnSorting={true}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button onClick={sort}>Sort</button>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByAPIMultipleColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json
index e401db979..b53c52a6f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByMultipleColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 30,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 279.99,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 59,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable sorting by multiple columns, for all columns\n      multiColumnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByMultipleColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortByMultipleColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'HL Mountain Frame',\n    price: 30,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Jetpulse',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 279.99,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'HL Road Tire',\n    price: 59,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable sorting by multiple columns, for all columns\n      multiColumnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortByMultipleColumns.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json
index 158a0c219..3c8069c8b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort different types of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  {\n    model: 'Racing Socks',\n    size: 'S',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n    color: 'Black',\n    email: '8576@all.xyz',\n  },\n  {\n    model: 'HL Mountain Shirt',\n    size: 'XS',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n    color: 'White',\n    email: 'tayn@all.xyz',\n  },\n  {\n    model: 'Cycling Cap',\n    size: 'L',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n    color: 'Green',\n    email: '6lights@far.com',\n  },\n  {\n    model: 'Ski Jacket',\n    size: 'M',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n    color: 'Blue',\n    email: 'raj@fq1my2c.com',\n  },\n  {\n    model: 'HL Goggles',\n    size: 'XL',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n    color: 'Black',\n    email: 'da@pdc.ga',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Model<br>(text)',\n          // set the type of the 'Model' column\n          type: 'text', // 'text' is the default type, so you can omit this line\n          data: 'model',\n        },\n        {\n          title: 'Price<br>(numeric)',\n          // set the type of the 'Price' column\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Sold on<br>(date)',\n          // set the type of the 'Date' column\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time<br>(time)',\n          // set the type of the 'Time' column\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock<br>(checkbox)',\n          // set the type of the 'In stock' column\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n        {\n          title: 'Size<br>(dropdown)',\n          // set the type of the 'Size' column\n          type: 'dropdown',\n          data: 'size',\n          source: ['XS', 'S', 'M', 'L', 'XL'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Color<br>(autocomplete)',\n          // set the type of the 'Size' column\n          type: 'autocomplete',\n          data: 'color',\n          source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Email<br>(password)',\n          // set the type of the 'Email' column\n          type: 'password',\n          data: 'email',\n        },\n      ]}\n      columnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      sanitizer={sanitizeHeader}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortDifferentTypes.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Sort different types of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst data = [\n  {\n    model: 'Racing Socks',\n    size: 'S',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n    color: 'Black',\n    email: '8576@all.xyz',\n  },\n  {\n    model: 'HL Mountain Shirt',\n    size: 'XS',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n    color: 'White',\n    email: 'tayn@all.xyz',\n  },\n  {\n    model: 'Cycling Cap',\n    size: 'L',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n    color: 'Green',\n    email: '6lights@far.com',\n  },\n  {\n    model: 'Ski Jacket',\n    size: 'M',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n    color: 'Blue',\n    email: 'raj@fq1my2c.com',\n  },\n  {\n    model: 'HL Goggles',\n    size: 'XL',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n    color: 'Black',\n    email: 'da@pdc.ga',\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Model<br>(text)',\n          // set the type of the 'Model' column\n          type: 'text', // 'text' is the default type, so you can omit this line\n          data: 'model',\n        },\n        {\n          title: 'Price<br>(numeric)',\n          // set the type of the 'Price' column\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Sold on<br>(date)',\n          // set the type of the 'Date' column\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time<br>(time)',\n          // set the type of the 'Time' column\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock<br>(checkbox)',\n          // set the type of the 'In stock' column\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n        {\n          title: 'Size<br>(dropdown)',\n          // set the type of the 'Size' column\n          type: 'dropdown',\n          data: 'size',\n          source: ['XS', 'S', 'M', 'L', 'XL'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Color<br>(autocomplete)',\n          // set the type of the 'Size' column\n          type: 'autocomplete',\n          data: 'color',\n          source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n          className: 'htCenter',\n        },\n        {\n          title: 'Email<br>(password)',\n          // set the type of the 'Email' column\n          type: 'password',\n          data: 'email',\n        },\n      ]}\n      columnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      sanitizer={sanitizeHeader}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortDifferentTypes.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortFixedRows.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortFixedRows.tsx.json
index bf35e0a2a..1a6b2684a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortFixedRows.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortFixedRows.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortFixedRows\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortFixedRows\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Everything the two grids share. Only `sortFixedRows` differs between them.\nconst sharedSettings: GridSettings = {\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  height: 'auto',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Both grids start sorted by revenue, highest first.\nconst initialConfig = { column: 1, sortOrder: 'desc' as const };\n// `sortFixedRows: false` is the default: the frozen rows keep their place whatever you sort by.\nconst defaultSorting = { initialConfig };\nconst allRowsSorting = { sortFixedRows: true, initialConfig };\n\nconst defaultData = getData();\nconst allRowsData = getData();\n\nconst ExampleComponent = () => (\n  <>\n    <h3 className=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <HotTable {...sharedSettings} data={defaultData} columnSorting={defaultSorting} />\n    <h3 className=\"demo-preview\">\n      With <code>sortFixedRows: true</code>: the frozen rows are sorted too\n    </h3>\n    <HotTable {...sharedSettings} data={allRowsData} columnSorting={allRowsSorting} />\n  </>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortFixedRows.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortFixedRows\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortFixedRows\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Everything the two grids share. Only `sortFixedRows` differs between them.\nconst sharedSettings: GridSettings = {\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  height: 'auto',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Both grids start sorted by revenue, highest first.\nconst initialConfig = { column: 1, sortOrder: 'desc' as const };\n// `sortFixedRows: false` is the default: the frozen rows keep their place whatever you sort by.\nconst defaultSorting = { initialConfig };\nconst allRowsSorting = { sortFixedRows: true, initialConfig };\n\nconst defaultData = getData();\nconst allRowsData = getData();\n\nconst ExampleComponent = () => (\n  <>\n    <h3 className=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <HotTable {...sharedSettings} data={defaultData} columnSorting={defaultSorting} />\n    <h3 className=\"demo-preview\">\n      With <code>sortFixedRows: true</code>: the frozen rows are sorted too\n    </h3>\n    <HotTable {...sharedSettings} data={allRowsData} columnSorting={allRowsSorting} />\n  </>\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortFixedRows.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json
index 8d4b77965..0aa399499 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Sorting demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortingDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable sorting for all columns\n      columnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortingDemo.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Sorting demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortingDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import sorting as an individual module, see the 'Import the sorting module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  {\n    brand: 'Jetpulse',\n    model: 'Racing Socks',\n    price: 30,\n    sellDate: '2023-10-11',\n    sellTime: '01:23',\n    inStock: false,\n  },\n  {\n    brand: 'Gigabox',\n    model: 'HL Mountain Frame',\n    price: 1890.9,\n    sellDate: '2023-05-03',\n    sellTime: '11:27',\n    inStock: false,\n  },\n  {\n    brand: 'Camido',\n    model: 'Cycling Cap',\n    price: 130.1,\n    sellDate: '2023-03-27',\n    sellTime: '03:17',\n    inStock: true,\n  },\n  {\n    brand: 'Chatterpoint',\n    model: 'Road Tire Tube',\n    price: 59,\n    sellDate: '2023-08-28',\n    sellTime: '08:01',\n    inStock: true,\n  },\n  {\n    brand: 'Eidel',\n    model: 'HL Road Tire',\n    price: 279.99,\n    sellDate: '2023-10-02',\n    sellTime: '13:23',\n    inStock: true,\n  },\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      columns={[\n        {\n          title: 'Brand',\n          type: 'text',\n          data: 'brand',\n        },\n        {\n          title: 'Model',\n          type: 'text',\n          data: 'model',\n        },\n        {\n          title: 'Price',\n          type: 'numeric',\n          data: 'price',\n          locale: 'en-US',\n          numericFormat: {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: 2,\n          },\n        },\n        {\n          title: 'Date',\n          type: 'intl-date',\n          data: 'sellDate',\n          locale: 'en-US',\n          dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n          className: 'htRight',\n        },\n        {\n          title: 'Time',\n          type: 'intl-time',\n          data: 'sellTime',\n          locale: 'en-US',\n          timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n          className: 'htRight',\n        },\n        {\n          title: 'In stock',\n          type: 'checkbox',\n          data: 'inStock',\n          className: 'htCenter',\n        },\n      ]}\n      // enable sorting for all columns\n      columnSorting={true}\n      height=\"auto\"\n      stretchH=\"all\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortingDemo.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json
index d37f818df..9a15b2e1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Rows ▸ Rows sorting · Use sorting hooks · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortingHooks\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst ExampleComponent = () => {\n  // `data` is kept in state (instead of loaded imperatively) so a `status` update doesn't\n  // make HotTable re-apply the original `data` prop and undo the sort.\n  const [gridData, setGridData] = useState(data);\n  const [status, setStatus] = useState('Click a column header to sort.');\n\n  // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n  // order, so this example cycles ascending -> descending -> unsorted manually.\n  const activeSortRef = useRef<{ column: number; sortOrder: 'asc' | 'desc' } | null>(null);\n\n  const getNextSortOrder = (column: number): 'asc' | 'desc' | null => {\n    const activeSort = activeSortRef.current;\n\n    if (!activeSort || activeSort.column !== column) {\n      return 'asc';\n    }\n\n    return activeSort.sortOrder === 'asc' ? 'desc' : null;\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <span>{status}</span>\n        </div>\n      </div>\n      <HotTable\n        data={gridData}\n        columns={[\n          { title: 'Brand', type: 'text', data: 'brand' },\n          { title: 'Model', type: 'text', data: 'model' },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n        ]}\n        columnSorting={true}\n        beforeColumnSort={(currentSortConfig, destinationSortConfigs) => {\n          const [requestedSort] = destinationSortConfigs;\n\n          if (!requestedSort) {\n            // the sorting was cleared programmatically, restore the original row order\n            activeSortRef.current = null;\n            setGridData(data);\n\n            return false;\n          }\n\n          const nextOrder = getNextSortOrder(requestedSort.column);\n\n          if (nextOrder === null) {\n            activeSortRef.current = null;\n            setStatus('Cleared the sort.');\n            setGridData(data);\n\n            return false;\n          }\n\n          activeSortRef.current = { column: requestedSort.column, sortOrder: nextOrder };\n          setStatus('Sorting on the server...');\n\n          sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n            setGridData(sortedData);\n            setStatus('Sorted on the server.');\n          });\n\n          // return `false` to cancel Handsontable's own front-end sort\n          return false;\n        }}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortingHooks.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"React (TS)"}
+{"framework":"react","displayName":"Rows ▸ Rows sorting · Use sorting hooks · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortingHooks\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst ExampleComponent = () => {\n  // `data` is kept in state (instead of loaded imperatively) so a `status` update doesn't\n  // make HotTable re-apply the original `data` prop and undo the sort.\n  const [gridData, setGridData] = useState(data);\n  const [status, setStatus] = useState('Click a column header to sort.');\n\n  // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n  // order, so this example cycles ascending -> descending -> unsorted manually.\n  const activeSortRef = useRef<{ column: number; sortOrder: 'asc' | 'desc' } | null>(null);\n\n  const getNextSortOrder = (column: number): 'asc' | 'desc' | null => {\n    const activeSort = activeSortRef.current;\n\n    if (!activeSort || activeSort.column !== column) {\n      return 'asc';\n    }\n\n    return activeSort.sortOrder === 'asc' ? 'desc' : null;\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <span>{status}</span>\n        </div>\n      </div>\n      <HotTable\n        data={gridData}\n        columns={[\n          { title: 'Brand', type: 'text', data: 'brand' },\n          { title: 'Model', type: 'text', data: 'model' },\n          {\n            title: 'Price',\n            type: 'numeric',\n            data: 'price',\n            locale: 'en-US',\n            numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n          },\n          {\n            title: 'Date',\n            type: 'intl-date',\n            data: 'sellDate',\n            locale: 'en-US',\n            dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n            className: 'htRight',\n          },\n        ]}\n        columnSorting={true}\n        beforeColumnSort={(currentSortConfig, destinationSortConfigs) => {\n          const [requestedSort] = destinationSortConfigs;\n\n          if (!requestedSort) {\n            // the sorting was cleared programmatically, restore the original row order\n            activeSortRef.current = null;\n            setGridData(data);\n\n            return false;\n          }\n\n          const nextOrder = getNextSortOrder(requestedSort.column);\n\n          if (nextOrder === null) {\n            activeSortRef.current = null;\n            setStatus('Cleared the sort.');\n            setGridData(data);\n\n            return false;\n          }\n\n          activeSortRef.current = { column: requestedSort.column, sortOrder: nextOrder };\n          setStatus('Sorting on the server...');\n\n          sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n            setGridData(sortedData);\n            setStatus('Sorted on the server.');\n          });\n\n          // return `false` to cancel Handsontable's own front-end sort\n          return false;\n        }}\n        height=\"auto\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortingHooks.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json
index 56df36a2a..0db3f6cf0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Add custom sort icons · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomSortIcons\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomSortIcons\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleCustomSortIcons.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Add custom sort icons · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomSortIcons\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-1',\n  columnSorting: {\n    initialConfig: {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomSortIcons\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".custom-sort-icon-example-1.handsontable .columnSorting.sortAction.ascending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 21V9M8 13l4-4 4 4'/%3E%3Cpath d='M21 12a9 9 0 0 0-18 0'/%3E%3C/svg%3E\");\n}\n\n.custom-sort-icon-example-1.handsontable .columnSorting.sortAction.descending::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 3v12M16 11l-4 4-4-4'/%3E%3Cpath d='M3 12a9 9 0 0 0 18 0'/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleCustomSortIcons.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons","exampleTitle":"Add custom sort icons","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json
index b3ae37ce4..27fa6236e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomSortIcons3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomSortIcons3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleCustomSortIcons3.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Add custom sort icons (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleCustomSortIcons3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomSortIcons3\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      color: 'White',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Frame',\n      color: 'Black',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      color: 'Red',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      color: 'Green',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      color: 'Blue',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Color',\n      type: 'text',\n      data: 'color',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  className: 'custom-sort-icon-example-3',\n  multiColumnSorting: {\n    initialConfig: [\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n      {\n        column: 2,\n        sortOrder: 'asc',\n      },\n      {\n        column: 3,\n        sortOrder: 'desc',\n      },\n      {\n        column: 4,\n        sortOrder: 'asc',\n      },\n      {\n        column: 5,\n        sortOrder: 'desc',\n      },\n      {\n        column: 6,\n        sortOrder: 'asc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleCustomSortIcons3\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-1::after {\n  content: '①';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-2::after {\n  content: '②';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-3::after {\n  content: '③';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-4::after {\n  content: '④';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-5::after {\n  content: '⑤';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-6::after {\n  content: '⑥';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting.sort-7::after {\n  content: '⑦';\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable span.colHeader.columnSorting::after {\n  width: 10px;\n  font-size: 10px;\n}\n\n#exampleCustomSortIcons3 .custom-sort-icon-example-3 .handsontable .columnSorting.sortAction::before {\n  right: 5px;\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleCustomSortIcons3.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleCustomSortIcons3","exampleTitle":"Add custom sort icons (3)","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json
index 924d57a5c..2deddc158 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Enable sorting · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleEnableSortingForColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleEnableSortingForColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleEnableSortingForColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Enable sorting · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleEnableSortingForColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleEnableSortingForColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n      // disable sorting for the 'Brand' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n      // disable sorting for the 'Price' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n      // disable sorting for the 'Time' column\n      columnSorting: {\n        headerAction: false,\n      },\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleEnableSortingForColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleEnableSortingForColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleEnableSortingForColumns","exampleTitle":"Enable sorting","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json
index cee5ecf7b..32e95e293 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromSorting\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\nconst hotSettings: GridSettings = {\n  data: products,\n  columns: [\n    { data: 'name', type: 'text' },\n    {\n      data: 'price',\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'Price', 'In stock'],\n  height: 'auto',\n  stretchH: 'all',\n  columnSorting: true,\n  // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting. Move the featured\n  // rows back to the top of the view. The rule reads the data, not a row position, so you pin a\n  // row by flagging it rather than by knowing where it sits.\n  // Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n  // while the grid is being created - a template ref is not filled in yet at that point.\n  afterColumnSort(this: Handsontable) {\n    const featuredRows = products\n      .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n      .filter((visualRow): visualRow is number => visualRow !== null);\n\n    // Pass every index in one call: each move shifts the rows after it.\n    this.rowIndexMapper.moveIndexes(featuredRows, 0);\n  },\n  // `cells()` receives a physical row index, so it reads the source array directly.\n  cells(row) {\n    return products[row]?.featured ? { className: 'featured-product' } : {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"exampleExcludeRowsFromSorting\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleExcludeRowsFromSorting.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Exclude rows that are not frozen · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleExcludeRowsFromSorting\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromSorting\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  price: number;\n  inStock: number;\n  featured?: boolean;\n};\n\n// The two featured products always stay at the top, whichever column you sort by.\n// No row here is frozen: rows frozen with `fixedRowsTop` or `fixedRowsBottom` are already\n// left out of sorting, and need no code at all.\nconst products: Product[] = [\n  { name: 'HL Mountain Frame', price: 1890.9, inStock: 11, featured: true },\n  { name: 'HL Road Tire', price: 279.99, inStock: 3, featured: true },\n  { name: 'Cycling Cap', price: 130.1, inStock: 0 },\n  { name: 'Road Tire Tube', price: 59, inStock: 1 },\n  { name: 'Racing Socks', price: 30, inStock: 5 },\n  { name: 'Water Bottle', price: 12.5, inStock: 24 },\n  { name: 'Bike Light', price: 45, inStock: 8 },\n  { name: 'Chain Lube', price: 9.99, inStock: 17 },\n];\n\nconst hotSettings: GridSettings = {\n  data: products,\n  columns: [\n    { data: 'name', type: 'text' },\n    {\n      data: 'price',\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    { data: 'inStock', type: 'numeric' },\n  ],\n  colHeaders: ['Product', 'Price', 'In stock'],\n  height: 'auto',\n  stretchH: 'all',\n  columnSorting: true,\n  // `afterColumnSort()` is a Handsontable hook: it's fired after each sorting. Move the featured\n  // rows back to the top of the view. The rule reads the data, not a row position, so you pin a\n  // row by flagging it rather than by knowing where it sits.\n  // Handsontable calls a hook with the grid as `this`, which is set even for a sort that runs\n  // while the grid is being created - a template ref is not filled in yet at that point.\n  afterColumnSort(this: Handsontable) {\n    const featuredRows = products\n      .map((product, physicalRow) => (product.featured ? this.toVisualRow(physicalRow) : null))\n      .filter((visualRow): visualRow is number => visualRow !== null);\n\n    // Pass every index in one call: each move shifts the rows after it.\n    this.rowIndexMapper.moveIndexes(featuredRows, 0);\n  },\n  // `cells()` receives a physical row index, so it reads the source array directly.\n  cells(row) {\n    return products[row]?.featured ? { className: 'featured-product' } : {};\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n};\n</script>\n\n<template>\n  <div id=\"exampleExcludeRowsFromSorting\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"/* Marks the featured rows, so you can watch them hold their place while the rest of the list\n   sorts. The background is set through the theme's own CSS variables rather than with a plain\n   `background-color`: the theme's row-striping rule is more specific than a single class, so a\n   direct declaration would be ignored. */\n.handsontable td.featured-product {\n  --ht-row-cell-odd-background-color: #fff8e1;\n  --ht-row-cell-even-background-color: #fff8e1;\n\n  font-weight: 600;\n}"},"docsPath":"guides/rows/rows-sorting/vue/exampleExcludeRowsFromSorting.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleExcludeRowsFromSorting","exampleTitle":"Exclude rows that are not frozen","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json
index d1516f24e..e9f904a48 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleInitialSortOrder\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleInitialSortOrder\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleInitialSortOrder.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Set an initial multi-column sort order · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleInitialSortOrder\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleInitialSortOrder\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: {\n    initialConfig: [\n      // at initialization, sort the data by the 'Brand' column, in ascending order\n      {\n        column: 0,\n        sortOrder: 'asc',\n      },\n      // at initialization, sort the data by the 'Model' column, in descending order\n      {\n        column: 1,\n        sortOrder: 'desc',\n      },\n    ],\n  },\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleInitialSortOrder\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleInitialSortOrder.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleInitialSortOrder","exampleTitle":"Set an initial multi-column sort order","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json
index f373770fc..0fd336277 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByAPI\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sortAscending() {\n  const columnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('columnSorting');\n\n  columnSorting?.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n}\n\nfunction unsort() {\n  const columnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('columnSorting');\n\n  columnSorting?.clearSort();\n}\n</script>\n\n<template>\n  <div id=\"exampleSortByAPI\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"sortAscending\">Sort by the \"Brand\" column, in ascending order</button>\n        <button @click=\"unsort\">Go back to the original order</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByAPI.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByAPI\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByAPI\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sortAscending() {\n  const columnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('columnSorting');\n\n  columnSorting?.sort({\n    column: 0,\n    sortOrder: 'asc',\n  });\n}\n\nfunction unsort() {\n  const columnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('columnSorting');\n\n  columnSorting?.clearSort();\n}\n</script>\n\n<template>\n  <div id=\"exampleSortByAPI\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"sortAscending\">Sort by the \"Brand\" column, in ascending order</button>\n        <button @click=\"unsort\">Go back to the original order</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByAPI.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPI","exampleTitle":"Sort data programmatically","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json
index 0d8aa672e..97665d5bb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByAPIMultipleColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sort() {\n  const multiColumnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('multiColumnSorting');\n\n  multiColumnSorting?.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n}\n</script>\n\n<template>\n  <div id=\"exampleSortByAPIMultipleColumns\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"sort\">Sort</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByAPIMultipleColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort by multiple columns programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByAPIMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByAPIMultipleColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sort() {\n  const multiColumnSorting = (hotRef.value as any)?.hotInstance?.getPlugin('multiColumnSorting');\n\n  multiColumnSorting?.sort([\n    {\n      column: 0,\n      sortOrder: 'asc',\n    },\n    {\n      column: 1,\n      sortOrder: 'desc',\n    },\n  ]);\n}\n</script>\n\n<template>\n  <div id=\"exampleSortByAPIMultipleColumns\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button @click=\"sort\">Sort</button>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByAPIMultipleColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByAPIMultipleColumns","exampleTitle":"Sort by multiple columns programmatically","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json
index 34a7de2b4..4b58f7c5c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByMultipleColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortByMultipleColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByMultipleColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort by multiple columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortByMultipleColumns\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortByMultipleColumns\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'HL Mountain Frame',\n      price: 30,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Jetpulse',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 279.99,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'HL Road Tire',\n      price: 59,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n\n  // enable sorting by multiple columns, for all columns\n  multiColumnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortByMultipleColumns\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortByMultipleColumns.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortByMultipleColumns","exampleTitle":"Sort by multiple columns","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json
index 2b6328442..42211b9ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortDifferentTypes\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});\n</script>\n\n<template>\n  <div id=\"exampleSortDifferentTypes\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortDifferentTypes.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sort different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortDifferentTypes\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortDifferentTypes\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst ALLOWED_TAGS = ['BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];\nconst ALLOWED_ATTRIBUTES = ['colspan', 'rowspan'];\nconst DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];\n\n// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:\n// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting\n// a range degrades to plain text. In production, use a vetted library such as DOMPurify.\n// See https://handsontable.com/docs/security/\nconst sanitizeHeader = (html: string): string => {\n  const template = document.createElement('template');\n\n  template.innerHTML = html;\n\n  template.content.querySelectorAll('*').forEach((element) => {\n    if (DROPPED_TAGS.includes(element.tagName)) {\n      // Unwrapping these would promote their source text into the output\n      element.remove();\n    } else if (ALLOWED_TAGS.includes(element.tagName)) {\n      Array.from(element.attributes).forEach((attribute) => {\n        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {\n          element.removeAttribute(attribute.name);\n        }\n      });\n    } else {\n      // Unwrap a disallowed element, keeping its text content\n      element.replaceWith(...Array.from(element.childNodes));\n    }\n  });\n\n  return template.innerHTML;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      model: 'Racing Socks',\n      size: 'S',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n      color: 'Black',\n      email: '8576@all.xyz',\n    },\n    {\n      model: 'HL Mountain Shirt',\n      size: 'XS',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n      color: 'White',\n      email: 'tayn@all.xyz',\n    },\n    {\n      model: 'Cycling Cap',\n      size: 'L',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n      color: 'Green',\n      email: '6lights@far.com',\n    },\n    {\n      model: 'Ski Jacket',\n      size: 'M',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n      color: 'Blue',\n      email: 'raj@fq1my2c.com',\n    },\n    {\n      model: 'HL Goggles',\n      size: 'XL',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n      color: 'Black',\n      email: 'da@pdc.ga',\n    },\n  ],\n  columns: [\n    {\n      title: 'Model<br>(text)',\n      // set the type of the 'Model' column\n      type: 'text', // 'text' is the default type, so you can omit this line\n      data: 'model',\n    },\n    {\n      title: 'Price<br>(numeric)',\n      // set the type of the 'Price' column\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Sold on<br>(date)',\n      // set the type of the 'Date' column\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time<br>(time)',\n      // set the type of the 'Time' column\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock<br>(checkbox)',\n      // set the type of the 'In stock' column\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n    {\n      title: 'Size<br>(dropdown)',\n      // set the type of the 'Size' column\n      type: 'dropdown',\n      data: 'size',\n      source: ['XS', 'S', 'M', 'L', 'XL'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Color<br>(autocomplete)',\n      // set the type of the 'Size' column\n      type: 'autocomplete',\n      data: 'color',\n      source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n      className: 'htCenter',\n    },\n    {\n      title: 'Email<br>(password)',\n      // set the type of the 'Email' column\n      type: 'password',\n      data: 'email',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  sanitizer: sanitizeHeader,\n});\n</script>\n\n<template>\n  <div id=\"exampleSortDifferentTypes\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortDifferentTypes.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortDifferentTypes","exampleTitle":"Sort different types of data","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortFixedRows.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortFixedRows.vue.json
index 8dd1659df..31748a7fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortFixedRows.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortFixedRows.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortFixedRows\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortFixedRows\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Builds one grid's settings. Only `sortFixedRows` differs between the two grids.\nconst createSettings = (sortFixedRows: boolean): GridSettings => ({\n  data: getData(),\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  columnSorting: {\n    // `false` is the default: the frozen rows keep their place whatever you sort by.\n    sortFixedRows,\n    // Both grids start sorted by revenue, highest first.\n    initialConfig: { column: 1, sortOrder: 'desc' },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst defaultSettings = createSettings(false);\nconst allRowsSettings = createSettings(true);\n</script>\n\n<template>\n  <div id=\"exampleSortFixedRows\">\n    <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <HotTable :settings=\"defaultSettings\" />\n    <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n    <HotTable :settings=\"allRowsSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortFixedRows.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Frozen rows stay out of the sort by default · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortFixedRows\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortFixedRows\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n// The first row holds a target and the last one a total. Both are frozen, so they stay in\n// view while you scroll.\nconst getData = () => [\n  ['Target', 30000, 225],\n  ['North', 42300, 318],\n  ['South', 18750, 142],\n  ['East', 27900, 205],\n  ['West', 35100, 264],\n  ['Total', 124050, 929],\n];\n\n// Builds one grid's settings. Only `sortFixedRows` differs between the two grids.\nconst createSettings = (sortFixedRows: boolean): GridSettings => ({\n  data: getData(),\n  colHeaders: ['Region', 'Revenue', 'Orders'],\n  columns: [\n    { type: 'text' },\n    {\n      type: 'numeric',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,\n      },\n    },\n    { type: 'numeric' },\n  ],\n  fixedRowsTop: 1,\n  fixedRowsBottom: 1,\n  columnSorting: {\n    // `false` is the default: the frozen rows keep their place whatever you sort by.\n    sortFixedRows,\n    // Both grids start sorted by revenue, highest first.\n    initialConfig: { column: 1, sortOrder: 'desc' },\n  },\n  height: 'auto',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst defaultSettings = createSettings(false);\nconst allRowsSettings = createSettings(true);\n</script>\n\n<template>\n  <div id=\"exampleSortFixedRows\">\n    <h3 class=\"demo-preview\">Default: the frozen rows keep their place</h3>\n    <HotTable :settings=\"defaultSettings\" />\n    <h3 class=\"demo-preview\">With <code>sortFixedRows: true</code>: the frozen rows are sorted too</h3>\n    <HotTable :settings=\"allRowsSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortFixedRows.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortFixedRows","exampleTitle":"Frozen rows stay out of the sort by default","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json
index 69ddd0868..9e07bfbef 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sorting demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortingDemo\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortingDemo\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortingDemo.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Sorting demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortingDemo\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortingDemo\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    {\n      brand: 'Jetpulse',\n      model: 'Racing Socks',\n      price: 30,\n      sellDate: '2023-10-11',\n      sellTime: '01:23',\n      inStock: false,\n    },\n    {\n      brand: 'Gigabox',\n      model: 'HL Mountain Frame',\n      price: 1890.9,\n      sellDate: '2023-05-03',\n      sellTime: '11:27',\n      inStock: false,\n    },\n    {\n      brand: 'Camido',\n      model: 'Cycling Cap',\n      price: 130.1,\n      sellDate: '2023-03-27',\n      sellTime: '03:17',\n      inStock: true,\n    },\n    {\n      brand: 'Chatterpoint',\n      model: 'Road Tire Tube',\n      price: 59,\n      sellDate: '2023-08-28',\n      sellTime: '08:01',\n      inStock: true,\n    },\n    {\n      brand: 'Eidel',\n      model: 'HL Road Tire',\n      price: 279.99,\n      sellDate: '2023-10-02',\n      sellTime: '13:23',\n      inStock: true,\n    },\n  ],\n  columns: [\n    {\n      title: 'Brand',\n      type: 'text',\n      data: 'brand',\n    },\n    {\n      title: 'Model',\n      type: 'text',\n      data: 'model',\n    },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n    {\n      title: 'Time',\n      type: 'intl-time',\n      data: 'sellTime',\n      locale: 'en-US',\n      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n      className: 'htRight',\n    },\n    {\n      title: 'In stock',\n      type: 'checkbox',\n      data: 'inStock',\n      className: 'htCenter',\n    },\n  ],\n  // enable sorting for all columns\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortingDemo\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortingDemo.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingDemo","exampleTitle":"Sorting demo","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json
index 9521325d6..6d3b19dbb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Rows ▸ Rows sorting · Use sorting hooks · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortingHooks\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst status = ref('Click a column header to sort.');\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\nfunction getNextSortOrder(column: number): 'asc' | 'desc' | null {\n  if (!activeSort || activeSort.column !== column) {\n    return 'asc';\n  }\n\n  return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { title: 'Brand', type: 'text', data: 'brand' },\n    { title: 'Model', type: 'text', data: 'model' },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n    const [requestedSort] = destinationSortConfigs;\n\n    if (!requestedSort) {\n      // the sorting was cleared programmatically, restore the original row order\n      activeSort = null;\n      (hotRef.value as any)?.hotInstance?.loadData(data);\n\n      return false;\n    }\n\n    const nextOrder = getNextSortOrder(requestedSort.column);\n\n    if (nextOrder === null) {\n      activeSort = null;\n      status.value = 'Cleared the sort.';\n      (hotRef.value as any)?.hotInstance?.loadData(data);\n\n      return false;\n    }\n\n    activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n    status.value = 'Sorting on the server...';\n\n    sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n      (hotRef.value as any)?.hotInstance?.loadData(sortedData);\n      status.value = 'Sorted on the server.';\n    });\n\n    // return `false` to cancel Handsontable's own front-end sort\n    return false;\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortingHooks\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span>{{ status }}</span>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortingHooks.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"Vue 3"}
+{"framework":"vue","displayName":"Rows ▸ Rows sorting · Use sorting hooks · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleSortingHooks\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortingHooks\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nconst status = ref('Click a column header to sort.');\n\nconst data = [\n  { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n  { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n  { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n  { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n  { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\nfunction getNextSortOrder(column: number): 'asc' | 'desc' | null {\n  if (!activeSort || activeSort.column !== column) {\n    return 'asc';\n  }\n\n  return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n  return new Promise<typeof data>((resolve) => {\n    setTimeout(() => {\n      const sortedData = [...data].sort((rowA: any, rowB: any) => {\n        if (rowA[columnKey] === rowB[columnKey]) {\n          return 0;\n        }\n\n        return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n      });\n\n      resolve(sortedData);\n    }, 600);\n  });\n}\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  columns: [\n    { title: 'Brand', type: 'text', data: 'brand' },\n    { title: 'Model', type: 'text', data: 'model' },\n    {\n      title: 'Price',\n      type: 'numeric',\n      data: 'price',\n      locale: 'en-US',\n      numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n    },\n    {\n      title: 'Date',\n      type: 'intl-date',\n      data: 'sellDate',\n      locale: 'en-US',\n      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n      className: 'htRight',\n    },\n  ],\n  columnSorting: true,\n  height: 'auto',\n  stretchH: 'all',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n    const [requestedSort] = destinationSortConfigs;\n\n    if (!requestedSort) {\n      // the sorting was cleared programmatically, restore the original row order\n      activeSort = null;\n      (hotRef.value as any)?.hotInstance?.loadData(data);\n\n      return false;\n    }\n\n    const nextOrder = getNextSortOrder(requestedSort.column);\n\n    if (nextOrder === null) {\n      activeSort = null;\n      status.value = 'Cleared the sort.';\n      (hotRef.value as any)?.hotInstance?.loadData(data);\n\n      return false;\n    }\n\n    activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n    status.value = 'Sorting on the server...';\n\n    sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n      (hotRef.value as any)?.hotInstance?.loadData(sortedData);\n      status.value = 'Sorted on the server.';\n    });\n\n    // return `false` to cancel Handsontable's own front-end sort\n    return false;\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"exampleSortingHooks\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span>{{ status }}</span>\n      </div>\n    </div>\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortingHooks.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example1.ts.json
index f0c7d714b..0759f54f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Styling ▸ Theme customization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n  .override-theme .ht-theme-main {\n    --ht-accent-color: #2c78d4;\n    --ht-foreground-color: #1a2533;\n    --ht-background-color: #f8f9fa;\n    --ht-row-header-odd-background-color: #f8f9fa;\n    --ht-row-header-even-background-color: #e9ecef;\n    --ht-row-cell-odd-background-color: #f8f9fa;\n    --ht-row-cell-even-background-color: #e9ecef;\n    --ht-cell-horizontal-border-color: #cbd5e0;\n    --ht-cell-vertical-border-color: #cbd5e0;\n    --ht-border-radius: 8px;\n  }\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <example1-demo></example1-demo>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport 'handsontable/styles/ht-theme-main.css';\n\n@Component({\n  selector: 'example1-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    theme: 'ht-theme-main',\n    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n    columns: [\n      { data: 0, type: 'text' },\n      { data: 1, type: 'text' },\n      { data: 2, type: 'text' },\n      { data: 3, type: 'numeric' },\n      { data: 4, type: 'text' }\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/styling/theme-customization/angular/example1.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"Angular"}
+{"framework":"angular","displayName":"Styling ▸ Theme customization · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n<style>\n  .override-theme .ht-theme-main {\n    --ht-accent-color: #2c78d4;\n    --ht-foreground-color: #1a2533;\n    --ht-background-color: #f8f9fa;\n    --ht-row-header-odd-background-color: #f8f9fa;\n    --ht-row-header-even-background-color: #e9ecef;\n    --ht-row-cell-odd-background-color: #f8f9fa;\n    --ht-row-cell-even-background-color: #e9ecef;\n    --ht-cell-horizontal-border-color: #cbd5e0;\n    --ht-cell-vertical-border-color: #cbd5e0;\n    --ht-border-radius: 8px;\n  }\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <example1-demo></example1-demo>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport 'handsontable/styles/ht-theme-main.css';\n\n@Component({\n  selector: 'example1-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    theme: 'ht-theme-main',\n    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n    columns: [\n      { data: 0, type: 'text' },\n      { data: 1, type: 'text' },\n      { data: 2, type: 'text' },\n      { data: 3, type: 'numeric' },\n      { data: 4, type: 'text' }\n    ],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/styling/theme-customization/angular/example1.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example2.ts.json
index 41762a313..4ffba2599 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Styling ▸ Theme customization · Theme API example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <example2-demo></example2-demo>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\n@Component({\n  selector: 'example2-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    theme: myTheme,\n    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n    columns: [\n      { data: 0, type: 'text' },\n      { data: 1, type: 'text' },\n      { data: 2, type: 'text' },\n      { data: 3, type: 'numeric' },\n      { data: 4, type: 'text' }\n    ],\n    rowHeaders: true,\n    dropdownMenu: true,\n    width: '100%',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/styling/theme-customization/angular/example2.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"Angular"}
+{"framework":"angular","displayName":"Styling ▸ Theme customization · Theme API example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <example2-demo></example2-demo>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\n@Component({\n  selector: 'example2-demo',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data: Array<Array<string | number>> = [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    theme: myTheme,\n    colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n    columns: [\n      { data: 0, type: 'text' },\n      { data: 1, type: 'text' },\n      { data: 2, type: 'text' },\n      { data: 3, type: 'numeric' },\n      { data: 4, type: 'text' }\n    ],\n    rowHeaders: true,\n    dropdownMenu: true,\n    width: '100%',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation'\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/styling/theme-customization/angular/example2.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.js.json
index e28c8b0c2..02f972690 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Styling ▸ Theme customization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.override-theme .ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <div id=\"example1\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/styling/theme-customization/javascript/example1.js","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Styling ▸ Theme customization · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.override-theme .ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <div id=\"example1\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/styling/theme-customization/javascript/example1.js","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.ts.json
index 30509c9ee..495d92c32 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Styling ▸ Theme customization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.override-theme .ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <div id=\"example1\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/styling/theme-customization/javascript/example1.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Styling ▸ Theme customization · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n<style>\n.override-theme .ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme override-theme\">\n    <div id=\"example1\"></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/styling/theme-customization/javascript/example1.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.js.json
index ba1c84377..ca2b8935b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Styling ▸ Theme customization · Theme API example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  theme: myTheme,\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/styling/theme-customization/javascript/example2.js","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Styling ▸ Theme customization · Theme API example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n  theme: myTheme,\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/styling/theme-customization/javascript/example2.js","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.ts.json
index 9c1390148..c92760ed3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Styling ▸ Theme customization · Theme API example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  theme: myTheme,\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/styling/theme-customization/javascript/example2.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Styling ▸ Theme customization · Theme API example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  theme: myTheme,\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/styling/theme-customization/javascript/example2.ts","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example1.tsx.json
index 683a186e6..f34c28d8e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Styling ▸ Theme customization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n  ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n  ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n  ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n  ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <>\n      <style>{`\n        .ht-theme-main {\n          --ht-accent-color: #2c78d4;\n          --ht-foreground-color: #1a2533;\n          --ht-background-color: #f8f9fa;\n          --ht-row-header-odd-background-color: #f8f9fa;\n          --ht-row-header-even-background-color: #e9ecef;\n          --ht-row-cell-odd-background-color: #f8f9fa;\n          --ht-row-cell-even-background-color: #e9ecef;\n          --ht-cell-horizontal-border-color: #cbd5e0;\n          --ht-cell-vertical-border-color: #cbd5e0;\n          --ht-border-radius: 8px;\n        }\n      `}</style>\n\n      <HotTable\n        themeName=\"ht-theme-main\"\n        data={data}\n        colHeaders={['Name', 'Email', 'City', 'Age', 'Position']}\n        columns={[\n          { data: 0, type: 'text' },\n          { data: 1, type: 'text' },\n          { data: 2, type: 'text' },\n          { data: 3, type: 'numeric' },\n          { data: 4, type: 'text' },\n        ]}\n        rowHeaders={true}\n        width=\"100%\"\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/styling/theme-customization/react/example1.tsx","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"React (TS)"}
+{"framework":"react","displayName":"Styling ▸ Theme customization · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n  ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n  ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n  ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n  ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <>\n      <style>{`\n        .ht-theme-main {\n          --ht-accent-color: #2c78d4;\n          --ht-foreground-color: #1a2533;\n          --ht-background-color: #f8f9fa;\n          --ht-row-header-odd-background-color: #f8f9fa;\n          --ht-row-header-even-background-color: #e9ecef;\n          --ht-row-cell-odd-background-color: #f8f9fa;\n          --ht-row-cell-even-background-color: #e9ecef;\n          --ht-cell-horizontal-border-color: #cbd5e0;\n          --ht-cell-vertical-border-color: #cbd5e0;\n          --ht-border-radius: 8px;\n        }\n      `}</style>\n\n      <HotTable\n        themeName=\"ht-theme-main\"\n        data={data}\n        colHeaders={['Name', 'Email', 'City', 'Age', 'Position']}\n        columns={[\n          { data: 0, type: 'text' },\n          { data: 1, type: 'text' },\n          { data: 2, type: 'text' },\n          { data: 3, type: 'numeric' },\n          { data: 4, type: 'text' },\n        ]}\n        rowHeaders={true}\n        width=\"100%\"\n        height=\"auto\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/styling/theme-customization/react/example1.tsx","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example2.tsx.json
index eb1c48ba5..13ca2b9c4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Styling ▸ Theme customization · Theme API example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register Handsontable's modules\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst data = [\n  ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n  ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n  ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n  ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n  ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      theme={myTheme}\n      data={data}\n      colHeaders={['Name', 'Email', 'City', 'Age', 'Position']}\n      columns={[\n        { data: 0, type: 'text' },\n        { data: 1, type: 'text' },\n        { data: 2, type: 'text' },\n        { data: 3, type: 'numeric' },\n        { data: 4, type: 'text' },\n      ]}\n      rowHeaders={true}\n      dropdownMenu={true}\n      width=\"100%\"\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/styling/theme-customization/react/example2.tsx","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"React (TS)"}
+{"framework":"react","displayName":"Styling ▸ Theme customization · Theme API example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme } from 'handsontable/themes';\n\n// Register Handsontable's modules\nregisterAllModules();\n\n// Register the main theme with custom parameters\nconst myTheme = registerTheme(horizonTheme);\n\n// Configure theme parameters using the params() method\nmyTheme.params({\n  colors: {\n    primary: {\n      500: '#9333ea', // Change primary color\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\n// Set color scheme and density type\nmyTheme.setColorScheme('light');\nmyTheme.setDensityType('default');\n\nconst data = [\n  ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n  ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n  ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n  ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n  ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      theme={myTheme}\n      data={data}\n      colHeaders={['Name', 'Email', 'City', 'Age', 'Position']}\n      columns={[\n        { data: 0, type: 'text' },\n        { data: 1, type: 'text' },\n        { data: 2, type: 'text' },\n        { data: 3, type: 'numeric' },\n        { data: 4, type: 'text' },\n      ]}\n      rowHeaders={true}\n      dropdownMenu={true}\n      width=\"100%\"\n      height=\"auto\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/styling/theme-customization/react/example2.tsx","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example1.vue.json
index 1d175d86d..e4a866755 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Styling ▸ Theme customization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example1\" class=\"disable-auto-theme override-theme\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>"},"docsPath":"guides/styling/theme-customization/vue/example1.vue","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"Vue 3"}
+{"framework":"vue","displayName":"Styling ▸ Theme customization · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport 'handsontable/styles/ht-theme-main.css';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: 'ht-theme-main',\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example1\" class=\"disable-auto-theme override-theme\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>\n\n<style>\n.ht-theme-main {\n  --ht-accent-color: #2c78d4;\n  --ht-foreground-color: #1a2533;\n  --ht-background-color: #f8f9fa;\n  --ht-row-header-odd-background-color: #f8f9fa;\n  --ht-row-header-even-background-color: #e9ecef;\n  --ht-row-cell-odd-background-color: #f8f9fa;\n  --ht-row-cell-even-background-color: #e9ecef;\n  --ht-cell-horizontal-border-color: #cbd5e0;\n  --ht-cell-vertical-border-color: #cbd5e0;\n  --ht-border-radius: 8px;\n}\n</style>"},"docsPath":"guides/styling/theme-customization/vue/example1.vue","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/theme-customization","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example2.vue.json
index 6d58dcff9..41bb79ef9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__theme-customization__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Styling ▸ Theme customization · Theme API example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nregisterTheme(horizonTheme);\n\ngetTheme('horizon')?.params({\n  colors: {\n    primary: {\n      500: '#9333ea',\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: getTheme('horizon')?.setColorScheme('light').setDensityType('default'),\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example2\" class=\"disable-auto-theme\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/styling/theme-customization/vue/example2.vue","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"Vue 3"}
+{"framework":"vue","displayName":"Styling ▸ Theme customization · Theme API example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { horizonTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nregisterTheme(horizonTheme);\n\ngetTheme('horizon')?.params({\n  colors: {\n    primary: {\n      500: '#9333ea',\n    },\n  },\n  tokens: {\n    fontSize: '16px',\n    iconSize: 'sizing.size_5',\n    accentColor: ['colors.primary.500', 'colors.primary.600'],\n  },\n});\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: getTheme('horizon')?.setColorScheme('light').setDensityType('default'),\n  data: [\n    ['John Doe', 'johndoe@example.com', 'New York', 32, 'Engineer'],\n    ['Jane Smith', 'janesmith@example.com', 'Los Angeles', 29, 'Designer'],\n    ['Sam Wilson', 'samwilson@example.com', 'Chicago', 41, 'Manager'],\n    ['Emily Johnson', 'emilyj@example.com', 'San Francisco', 35, 'Developer'],\n    ['Michael Brown', 'mbrown@example.com', 'Boston', 38, 'Analyst'],\n  ],\n  colHeaders: ['Name', 'Email', 'City', 'Age', 'Position'],\n  columns: [\n    { data: 0, type: 'text' },\n    { data: 1, type: 'text' },\n    { data: 2, type: 'text' },\n    { data: 3, type: 'numeric' },\n    { data: 4, type: 'text' },\n  ],\n  rowHeaders: true,\n  dropdownMenu: true,\n  width: '100%',\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n</script>\n\n<template>\n  <div id=\"example2\" class=\"disable-auto-theme\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/styling/theme-customization/vue/example2.vue","breadcrumb":["Styling","Theme customization"],"guide":"guides/styling/theme-customization/theme-customization.md","guideTitle":"Theme customization","exampleId":"example2","exampleTitle":"Theme API example","docPermalink":"/theme-customization","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__angular__example1.ts.json
index a47149f6e..4007fb594 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Styling ▸ Themes · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme\">\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, NON_COMMERCIAL_LICENSE, HotTableModule} from '@handsontable/angular-wrapper';\nimport {PredefinedMenuItemKey} from 'handsontable/plugins/contextMenu';\nimport {mainTheme, horizonTheme, classicTheme, registerTheme, getTheme, ThemeColorScheme} from 'handsontable/themes';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.ts\nexport const data = [\n  [\n    false,\n    'Tagcat',\n    'United Kingdom',\n    'Classic Vest',\n    '2025-10-11',\n    '01-2331942',\n    true,\n    '172',\n    2,\n    2,\n  ],\n  [\n    true,\n    'Zoomzone',\n    'Indonesia',\n    'Cycling Cap',\n    '2025-05-03',\n    '88-2768633',\n    true,\n    '188',\n    6,\n    2,\n  ],\n  [\n    true,\n    'Meeveo',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-03-27',\n    '51-6775945',\n    true,\n    '162',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Buzzdog',\n    'Philippines',\n    'HL Mountain Frame',\n    '2025-08-29',\n    '44-4028109',\n    true,\n    '133',\n    7,\n    1,\n  ],\n  [\n    true,\n    'Katz',\n    'India',\n    'Half-Finger Gloves',\n    '2025-10-02',\n    '08-2758492',\n    true,\n    '87',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Jaxbean',\n    'China',\n    'HL Road Frame',\n    '2025-09-28',\n    '84-3557705',\n    false,\n    '26',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Wikido',\n    'Brazil',\n    'HL Touring Frame',\n    '2025-06-24',\n    '20-9397637',\n    false,\n    '110',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Browsedrive',\n    'United States',\n    'LL Mountain Frame',\n    '2025-03-13',\n    '36-0079556',\n    true,\n    '50',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Twinder',\n    'United Kingdom',\n    'LL Road Frame',\n    '2025-04-06',\n    '41-1489542',\n    false,\n    '160',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Jetwire',\n    'China',\n    'LL Touring Frame',\n    '2025-02-01',\n    '37-1531629',\n    true,\n    '30',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Chatterpoint',\n    'China',\n    'Long-Sleeve Logo Jersey',\n    '2025-07-14',\n    '25-5083429',\n    true,\n    '39',\n    7,\n    2,\n  ],\n  [\n    false,\n    'Twinder',\n    'Egypt',\n    \"Men's Bib-Shorts\",\n    '2025-08-31',\n    '04-4281278',\n    false,\n    '96',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Midel',\n    'United States',\n    \"Men's Sports Shorts\",\n    '2025-06-27',\n    '55-1711908',\n    true,\n    '108',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yodo',\n    'India',\n    'ML Mountain Frame',\n    '2025-03-16',\n    '58-8360815',\n    false,\n    '46',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Camido',\n    'Russia',\n    'ML Mountain Frame-W',\n    '2025-09-13',\n    '10-3786104',\n    true,\n    '97',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eire',\n    'Thailand',\n    'ML Road Frame',\n    '2025-04-10',\n    '45-1186054',\n    true,\n    '161',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Vinte',\n    'United Kingdom',\n    'ML Road Frame-W',\n    '2025-01-22',\n    '62-6202742',\n    true,\n    '58',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Twitterlist',\n    'China',\n    'Mountain Bike Socks',\n    '2025-11-09',\n    '88-9646223',\n    true,\n    '92',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eidel',\n    'Bangladesh',\n    'Mountain-100',\n    '2025-09-19',\n    '45-5588112',\n    true,\n    '5',\n    6,\n    5,\n  ],\n  [\n    false,\n    'Trunyx',\n    'Nigeria',\n    'Mountain-200',\n    '2025-03-09',\n    '66-6271819',\n    true,\n    '158',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Katz',\n    'Turkey',\n    'Mountain-300',\n    '2025-03-05',\n    '38-9245023',\n    false,\n    '121',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Kaymbo',\n    'United States',\n    'Mountain-400-W',\n    '2025-12-24',\n    '44-5916927',\n    false,\n    '61',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Ozu',\n    'Pakistan',\n    'Mountain-500',\n    '2025-06-13',\n    '31-5449914',\n    true,\n    '155',\n    2,\n    2,\n  ],\n  [\n    false,\n    'Rhynyx',\n    'India',\n    'Racing Socks',\n    '2025-12-05',\n    '19-9413869',\n    true,\n    '162',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Flashset',\n    'Iran',\n    'Road-150',\n    '2025-12-14',\n    '25-9807605',\n    false,\n    '46',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Yata',\n    'Congo (Kinshasa)',\n    'Road-250',\n    '2025-06-12',\n    '74-4291983',\n    true,\n    '47',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Brainlounge',\n    'Vietnam',\n    'Road-350-W',\n    '2025-03-10',\n    '83-0980643',\n    true,\n    '104',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Babblestorm',\n    'United States',\n    'Road-450',\n    '2025-10-10',\n    '19-2878430',\n    true,\n    '101',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Youspan',\n    'Brazil',\n    'Road-550-W',\n    '2025-12-16',\n    '19-1838230',\n    true,\n    '150',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Nlounge',\n    'China',\n    'Road-650',\n    '2025-10-31',\n    '32-2267938',\n    true,\n    '42',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Twinte',\n    'India',\n    'Road-750',\n    '2025-08-17',\n    '79-2821972',\n    true,\n    '144',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Oyonder',\n    'United Kingdom',\n    'Short-Sleeve Classic Jersey',\n    '2025-12-04',\n    '46-6597557',\n    true,\n    '195',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Gigabox',\n    'Pakistan',\n    'Sport-100',\n    '2025-02-03',\n    '15-1793960',\n    true,\n    '199',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Livetube',\n    'France',\n    'Touring-1000',\n    '2025-05-16',\n    '86-0811003',\n    true,\n    '110',\n    4,\n    5,\n  ],\n  [\n    false,\n    'Voomm',\n    'United Kingdom',\n    'Touring-2000',\n    '2025-07-15',\n    '95-3068680',\n    true,\n    '51',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Voonyx',\n    'China',\n    'Touring-3000',\n    '2025-11-27',\n    '35-3085360',\n    false,\n    '69',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Zoombeat',\n    'United States',\n    \"Women's Mountain Shorts\",\n    '2025-11-03',\n    '56-8673088',\n    false,\n    '53',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Roomm',\n    'China',\n    \"Women's Tights\",\n    '2025-03-16',\n    '76-0085918',\n    true,\n    '168',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'Mountain-400',\n    '2025-05-16',\n    '03-0893276',\n    false,\n    '58',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Jetpulse',\n    'United States',\n    'Road-550',\n    '2025-02-08',\n    '79-9013306',\n    true,\n    '152',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Katz',\n    'Peru',\n    'Road-350',\n    '2025-02-15',\n    '55-7799920',\n    true,\n    '66',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogidoo',\n    'India',\n    'LL Mountain Front Wheel',\n    '2025-06-04',\n    '07-0881122',\n    false,\n    '112',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Divavu',\n    'Colombia',\n    'Touring Rear Wheel',\n    '2025-02-24',\n    '58-6157387',\n    true,\n    '50',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Mydeo',\n    'China',\n    'Touring Front Wheel',\n    '2025-12-07',\n    '12-2810010',\n    false,\n    '31',\n    3,\n    5,\n  ],\n  [\n    false,\n    'Browsebug',\n    'Japan',\n    'ML Mountain Front Wheel',\n    '2025-01-14',\n    '64-9249984',\n    true,\n    '132',\n    5,\n    5,\n  ],\n  [\n    false,\n    'Layo',\n    'China',\n    'HL Mountain Front Wheel',\n    '2025-04-24',\n    '45-0739652',\n    true,\n    '45',\n    1,\n    5,\n  ],\n  [\n    false,\n    'Snaptags',\n    'United Kingdom',\n    'LL Touring Handlebars',\n    '2025-08-06',\n    '09-5712761',\n    true,\n    '197',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogilith',\n    'China',\n    'HL Touring Handlebars',\n    '2025-05-31',\n    '01-7345008',\n    true,\n    '190',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Reallinks',\n    'United Kingdom',\n    'LL Road Front Wheel',\n    '2025-05-14',\n    '62-1065350',\n    true,\n    '184',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United States',\n    'ML Road Front Wheel',\n    '2025-03-23',\n    '44-7241323',\n    true,\n    '169',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Devify',\n    'China',\n    'HL Road Front Wheel',\n    '2025-12-12',\n    '52-0295699',\n    false,\n    '152',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Youopia',\n    'Angola',\n    'LL Mountain Handlebars',\n    '2025-04-01',\n    '52-2650922',\n    false,\n    '182',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Ainyx',\n    'China',\n    'Touring Pedal',\n    '2025-02-27',\n    '48-3618525',\n    true,\n    '141',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Browsetype',\n    'Malaysia',\n    'ML Mountain Handlebars',\n    '2025-04-28',\n    '51-8893923',\n    true,\n    '169',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Handlebars',\n    '2025-08-22',\n    '68-5911361',\n    false,\n    '39',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Bubbletube',\n    'China',\n    'LL Road Handlebars',\n    '2025-10-04',\n    '41-5880042',\n    true,\n    '71',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Fadeo',\n    'Vietnam',\n    'ML Road Handlebars',\n    '2025-04-23',\n    '90-5913983',\n    true,\n    '148',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yadel',\n    'United Kingdom',\n    'HL Road Handlebars',\n    '2025-04-18',\n    '92-0960699',\n    true,\n    '116',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Blognation',\n    'China',\n    'LL Headset',\n    '2025-01-10',\n    '06-9493898',\n    true,\n    '96',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Devpoint',\n    'China',\n    'ML Headset',\n    '2025-12-25',\n    '69-5878565',\n    true,\n    '35',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Aibox',\n    'United Kingdom',\n    'HL Headset',\n    '2025-03-18',\n    '13-1133017',\n    true,\n    '16',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Brightdog',\n    'China',\n    'LL Mountain Pedal',\n    '2025-09-11',\n    '39-6530433',\n    true,\n    '194',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Gabcube',\n    'Nigeria',\n    'ML Mountain Pedal',\n    '2025-04-22',\n    '96-6860388',\n    true,\n    '24',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Pedal',\n    '2025-06-05',\n    '30-0356137',\n    true,\n    '170',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Tambee',\n    'China',\n    'ML Touring Seat/Saddle',\n    '2025-02-22',\n    '93-9058255',\n    true,\n    '184',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Cogilith',\n    'India',\n    'LL Touring Seat/Saddle',\n    '2025-04-06',\n    '82-9268909',\n    false,\n    '153',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Dynabox',\n    'Hong Kong',\n    'HL Touring Seat/Saddle',\n    '2025-01-10',\n    '20-6913815',\n    false,\n    '88',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Shuffledrive',\n    'Sudan',\n    'LL Road Pedal',\n    '2025-09-16',\n    '08-8238817',\n    true,\n    '57',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Fivechat',\n    'China',\n    'ML Road Pedal',\n    '2025-08-26',\n    '44-7370350',\n    false,\n    '62',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Meembee',\n    'United States',\n    'HL Road Pedal',\n    '2025-12-27',\n    '01-3525949',\n    true,\n    '123',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Dynazzy',\n    'United Kingdom',\n    'LL Mountain Seat/Saddle 1',\n    '2025-12-15',\n    '04-2414623',\n    true,\n    '77',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Eare',\n    'China',\n    'ML Mountain Seat/Saddle 1',\n    '2025-04-04',\n    '15-1917509',\n    false,\n    '199',\n    9,\n    4,\n  ],\n  [\n    false,\n    'Yozio',\n    'China',\n    'HL Mountain Seat/Saddle 1',\n    '2025-03-15',\n    '06-2526845',\n    true,\n    '149',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Quinu',\n    \"Xi'an\",\n    '425-777-7829',\n    '2025-02-22',\n    '83-1713558',\n    false,\n    '191',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Jazzy',\n    'United Kingdom',\n    'ML Road Seat/Saddle 1',\n    '2025-08-07',\n    '00-8892524',\n    true,\n    '150',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Thoughtsphere',\n    'China',\n    'HL Road Seat/Saddle 1',\n    '2025-11-28',\n    '39-5538991',\n    true,\n    '130',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'ML Road Rear Wheel',\n    '2025-12-29',\n    '06-9002973',\n    true,\n    '179',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United Kingdom',\n    'HL Road Rear Wheel',\n    '2025-09-06',\n    '73-6104901',\n    true,\n    '98',\n    5,\n    3,\n  ],\n  [\n    false,\n    'Tanoodle',\n    'Chile',\n    'LL Mountain Seat/Saddle 2',\n    '2025-05-24',\n    '68-7384479',\n    true,\n    '175',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Feednation',\n    'China',\n    'ML Mountain Seat/Saddle 2',\n    '2025-11-21',\n    '26-7757763',\n    true,\n    '11',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Kayveo',\n    'China',\n    'HL Mountain Seat/Saddle 2',\n    '2025-06-21',\n    '07-4873562',\n    false,\n    '184',\n    7,\n    4,\n  ],\n  [\n    false,\n    'Meevee',\n    'Saudi Arabia',\n    'LL Road Seat/Saddle 1',\n    '2025-11-16',\n    '46-5819554',\n    false,\n    '27',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Twitterworks',\n    'China',\n    'ML Road Seat/Saddle 2',\n    '2025-04-19',\n    '01-2666826',\n    true,\n    '186',\n    3,\n    2,\n  ],\n  [\n    false,\n    'Wikizz',\n    'Tanzania',\n    'HL Road Seat/Saddle 2',\n    '2025-03-08',\n    '54-7090503',\n    true,\n    '20',\n    3,\n    3,\n  ],\n  [\n    false,\n    'Yoveo',\n    'United States',\n    'LL Mountain Tire',\n    '2025-10-14',\n    '78-7658520',\n    false,\n    '153',\n    2,\n    1,\n  ],\n  [\n    false,\n    'Yakidoo',\n    'China',\n    'ML Mountain Tire',\n    '2025-10-12',\n    '23-9926318',\n    true,\n    '161',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Oyope',\n    'China',\n    'HL Mountain Tire',\n    '2025-09-20',\n    '20-0179517',\n    true,\n    '98',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Skipstorm',\n    'United States',\n    'LL Road Tire',\n    '2025-10-01',\n    '02-9543343',\n    true,\n    '30',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Minyx',\n    'United States',\n    'ML Road Tire',\n    '2025-07-07',\n    '98-3938169',\n    true,\n    '73',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Miboo',\n    'China',\n    'HL Road Tire',\n    '2025-07-25',\n    '68-5197934',\n    true,\n    '158',\n    9,\n    1,\n  ],\n  [\n    false,\n    'Realfire',\n    'United States',\n    'Touring Tire',\n    '2025-08-27',\n    '39-8260460',\n    true,\n    '122',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Shufflester',\n    'China',\n    'Mountain Tire Tube',\n    '2025-06-08',\n    '45-9776170',\n    true,\n    '33',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Ntag',\n    'China',\n    'Road Tire Tube',\n    '2025-12-06',\n    '45-0858451',\n    true,\n    '107',\n    6,\n    2,\n  ],\n  [\n    false,\n    'Jabberbean',\n    'United States',\n    'Touring Tire Tube',\n    '2025-04-26',\n    '15-4247305',\n    true,\n    '15',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Thoughtblab',\n    'China',\n    'LL Bottom Bracket',\n    '2025-05-21',\n    '15-8534931',\n    true,\n    '168',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Jabbertype',\n    'China',\n    'Classic Vest',\n    '2025-07-25',\n    '23-1251557',\n    true,\n    '135',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Buzzshare',\n    'United Kingdom',\n    'Cycling Cap',\n    '2025-07-07',\n    '86-5920601',\n    true,\n    '11',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Roodel',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-01-13',\n    '48-1055459',\n    true,\n    '41',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Zoovu',\n    'China',\n    'Half-Finger Gloves',\n    '2025-06-03',\n    '12-7842022',\n    true,\n    '144',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Photofeed',\n    'China',\n    'HL Mountain Frame',\n    '2025-07-14',\n    '94-5088099',\n    true,\n    '106',\n    1,\n    4,\n  ],\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" (click)=\"$event.stopPropagation()\">\n          <button class=\"theme-dropdown-trigger\" type=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"menuOpen\" (click)=\"menuOpen = !menuOpen\">\n            <span class=\"theme-dropdown-colors\">\n              <span class=\"color\" [style.background]=\"triggerColors.fg\"></span>\n              <span class=\"color\" [style.background]=\"triggerColors.bg\"></span>\n              <span class=\"color\" [style.background]=\"triggerColors.accent\"></span>\n            </span>\n            <span class=\"theme-dropdown-label\">{{currentThemeLabel}}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (menuOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (option of themeOptions; track option.value) {\n                <li role=\"option\" [attr.aria-selected]=\"option.value === selectedTheme\" (click)=\"selectTheme(option.value)\">\n                  <span [class]=\"'theme-dropdown-colors ' + option.themeClass\">\n                    <span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span>\n                    <span class=\"color\" style=\"background: var(--ht-background-color);\"></span>\n                    <span class=\"color\" style=\"background: var(--ht-accent-color);\"></span>\n                  </span>\n                  {{option.label}}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = data;\n\n  hotSettings!: GridSettings;\n\n  menuOpen = false;\n  selectedTheme = 'horizon-light';\n  triggerColors: {fg: string; bg: string; accent: string} = {fg: '', bg: '', accent: ''};\n\n  themeOptions: Array<{value: string; label: string; themeClass: string}> = [\n    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },\n    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },\n    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },\n    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },\n    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },\n    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' }\n  ];\n\n  get currentThemeLabel(): string {\n    return this.themeOptions.find(o => o.value === this.selectedTheme)?.label ?? '';\n  }\n\n  ngOnInit() {\n    this.hotSettings = {\n      theme: getTheme('main') ?? mainTheme,\n      height: 450,\n      colWidths: [180, 220, 140, 120, 120, 120, 140],\n      colHeaders: [\n        'Company Name',\n        'Name',\n        'Sell date',\n        'In stock',\n        'Quantity',\n        'Order ID',\n        'Country',\n      ],\n      contextMenu: [\n        'cut',\n        'copy',\n        '---------',\n        'row_above',\n        'row_below',\n        'remove_row',\n        '---------',\n        'alignment',\n        'make_read_only',\n        'clear_column',\n      ] as PredefinedMenuItemKey[],\n      columns: [\n        {\n          data: 1,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 3,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 4,\n          type: 'intl-date',\n          locale: 'en-GB',\n          dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 6,\n          type: 'checkbox',\n          className: 'htCenter',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 7,\n          type: 'numeric',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 5,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 2,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n      ],\n      dropdownMenu: true,\n      hiddenColumns: {\n        indicators: true,\n      },\n      multiColumnSorting: true,\n      filters: true,\n      rowHeaders: true,\n      manualRowMove: true,\n      headerClassName: 'htLeft',\n      autoWrapRow: true,\n      autoWrapCol: true,\n      manualRowResize: true,\n      manualColumnResize: true,\n      navigableHeaders: true,\n      licenseKey: NON_COMMERCIAL_LICENSE\n    }\n  }\n\n  ngAfterViewInit() {\n    const currentTheme = document\n      .querySelector('html')\n      ?.classList.contains('theme-dark')\n      ? 'horizon-dark'\n      : 'horizon-light';\n\n    this.selectedTheme = currentTheme;\n    this.setTheme(currentTheme);\n  }\n\n  selectTheme(value: string): void {\n    this.selectedTheme = value;\n    this.menuOpen = false;\n    this.setTheme(value);\n  }\n\n  setTheme = (theme: string) => {\n    const [themeName, colorScheme] = theme.split('-');\n    const scheme: ThemeColorScheme = (colorScheme as ThemeColorScheme) ?? 'auto';\n\n    this.hotTable.hotInstance?.updateSettings({\n      theme: getTheme(themeName)?.setColorScheme(scheme)\n    });\n\n    const gridEl = this.hotTable.hotInstance?.rootElement;\n\n    if (gridEl) {\n      const helper = document.createElement('div');\n\n      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n      gridEl.appendChild(helper);\n\n      const resolve = (varName: string) => {\n        helper.style.color = `var(${varName})`;\n\n        return getComputedStyle(helper).color;\n      };\n\n      this.triggerColors = {\n        fg: resolve('--ht-foreground-color'),\n        bg: resolve('--ht-background-color'),\n        accent: resolve('--ht-accent-color'),\n      };\n\n      gridEl.removeChild(helper);\n\n      const container = gridEl.closest('.disable-auto-theme') as HTMLElement | null;\n\n      if (container) container.dataset['colorScheme'] = colorScheme ?? 'auto';\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/angular/example1.ts","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/themes","lang":"Angular"}
+{"framework":"angular","displayName":"Styling ▸ Themes · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div class=\"disable-auto-theme\">\n    <app-example1></app-example1>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, NON_COMMERCIAL_LICENSE, HotTableModule} from '@handsontable/angular-wrapper';\nimport {PredefinedMenuItemKey} from 'handsontable/plugins/contextMenu';\nimport {mainTheme, horizonTheme, classicTheme, registerTheme, getTheme, ThemeColorScheme} from 'handsontable/themes';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.ts\nexport const data = [\n  [\n    false,\n    'Tagcat',\n    'United Kingdom',\n    'Classic Vest',\n    '2025-10-11',\n    '01-2331942',\n    true,\n    '172',\n    2,\n    2,\n  ],\n  [\n    true,\n    'Zoomzone',\n    'Indonesia',\n    'Cycling Cap',\n    '2025-05-03',\n    '88-2768633',\n    true,\n    '188',\n    6,\n    2,\n  ],\n  [\n    true,\n    'Meeveo',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-03-27',\n    '51-6775945',\n    true,\n    '162',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Buzzdog',\n    'Philippines',\n    'HL Mountain Frame',\n    '2025-08-29',\n    '44-4028109',\n    true,\n    '133',\n    7,\n    1,\n  ],\n  [\n    true,\n    'Katz',\n    'India',\n    'Half-Finger Gloves',\n    '2025-10-02',\n    '08-2758492',\n    true,\n    '87',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Jaxbean',\n    'China',\n    'HL Road Frame',\n    '2025-09-28',\n    '84-3557705',\n    false,\n    '26',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Wikido',\n    'Brazil',\n    'HL Touring Frame',\n    '2025-06-24',\n    '20-9397637',\n    false,\n    '110',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Browsedrive',\n    'United States',\n    'LL Mountain Frame',\n    '2025-03-13',\n    '36-0079556',\n    true,\n    '50',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Twinder',\n    'United Kingdom',\n    'LL Road Frame',\n    '2025-04-06',\n    '41-1489542',\n    false,\n    '160',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Jetwire',\n    'China',\n    'LL Touring Frame',\n    '2025-02-01',\n    '37-1531629',\n    true,\n    '30',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Chatterpoint',\n    'China',\n    'Long-Sleeve Logo Jersey',\n    '2025-07-14',\n    '25-5083429',\n    true,\n    '39',\n    7,\n    2,\n  ],\n  [\n    false,\n    'Twinder',\n    'Egypt',\n    \"Men's Bib-Shorts\",\n    '2025-08-31',\n    '04-4281278',\n    false,\n    '96',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Midel',\n    'United States',\n    \"Men's Sports Shorts\",\n    '2025-06-27',\n    '55-1711908',\n    true,\n    '108',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yodo',\n    'India',\n    'ML Mountain Frame',\n    '2025-03-16',\n    '58-8360815',\n    false,\n    '46',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Camido',\n    'Russia',\n    'ML Mountain Frame-W',\n    '2025-09-13',\n    '10-3786104',\n    true,\n    '97',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eire',\n    'Thailand',\n    'ML Road Frame',\n    '2025-04-10',\n    '45-1186054',\n    true,\n    '161',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Vinte',\n    'United Kingdom',\n    'ML Road Frame-W',\n    '2025-01-22',\n    '62-6202742',\n    true,\n    '58',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Twitterlist',\n    'China',\n    'Mountain Bike Socks',\n    '2025-11-09',\n    '88-9646223',\n    true,\n    '92',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Eidel',\n    'Bangladesh',\n    'Mountain-100',\n    '2025-09-19',\n    '45-5588112',\n    true,\n    '5',\n    6,\n    5,\n  ],\n  [\n    false,\n    'Trunyx',\n    'Nigeria',\n    'Mountain-200',\n    '2025-03-09',\n    '66-6271819',\n    true,\n    '158',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Katz',\n    'Turkey',\n    'Mountain-300',\n    '2025-03-05',\n    '38-9245023',\n    false,\n    '121',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Kaymbo',\n    'United States',\n    'Mountain-400-W',\n    '2025-12-24',\n    '44-5916927',\n    false,\n    '61',\n    5,\n    4,\n  ],\n  [\n    false,\n    'Ozu',\n    'Pakistan',\n    'Mountain-500',\n    '2025-06-13',\n    '31-5449914',\n    true,\n    '155',\n    2,\n    2,\n  ],\n  [\n    false,\n    'Rhynyx',\n    'India',\n    'Racing Socks',\n    '2025-12-05',\n    '19-9413869',\n    true,\n    '162',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Flashset',\n    'Iran',\n    'Road-150',\n    '2025-12-14',\n    '25-9807605',\n    false,\n    '46',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Yata',\n    'Congo (Kinshasa)',\n    'Road-250',\n    '2025-06-12',\n    '74-4291983',\n    true,\n    '47',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Brainlounge',\n    'Vietnam',\n    'Road-350-W',\n    '2025-03-10',\n    '83-0980643',\n    true,\n    '104',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Babblestorm',\n    'United States',\n    'Road-450',\n    '2025-10-10',\n    '19-2878430',\n    true,\n    '101',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Youspan',\n    'Brazil',\n    'Road-550-W',\n    '2025-12-16',\n    '19-1838230',\n    true,\n    '150',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Nlounge',\n    'China',\n    'Road-650',\n    '2025-10-31',\n    '32-2267938',\n    true,\n    '42',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Twinte',\n    'India',\n    'Road-750',\n    '2025-08-17',\n    '79-2821972',\n    true,\n    '144',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Oyonder',\n    'United Kingdom',\n    'Short-Sleeve Classic Jersey',\n    '2025-12-04',\n    '46-6597557',\n    true,\n    '195',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Gigabox',\n    'Pakistan',\n    'Sport-100',\n    '2025-02-03',\n    '15-1793960',\n    true,\n    '199',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Livetube',\n    'France',\n    'Touring-1000',\n    '2025-05-16',\n    '86-0811003',\n    true,\n    '110',\n    4,\n    5,\n  ],\n  [\n    false,\n    'Voomm',\n    'United Kingdom',\n    'Touring-2000',\n    '2025-07-15',\n    '95-3068680',\n    true,\n    '51',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Voonyx',\n    'China',\n    'Touring-3000',\n    '2025-11-27',\n    '35-3085360',\n    false,\n    '69',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Zoombeat',\n    'United States',\n    \"Women's Mountain Shorts\",\n    '2025-11-03',\n    '56-8673088',\n    false,\n    '53',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Roomm',\n    'China',\n    \"Women's Tights\",\n    '2025-03-16',\n    '76-0085918',\n    true,\n    '168',\n    1,\n    1,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'Mountain-400',\n    '2025-05-16',\n    '03-0893276',\n    false,\n    '58',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Jetpulse',\n    'United States',\n    'Road-550',\n    '2025-02-08',\n    '79-9013306',\n    true,\n    '152',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Katz',\n    'Peru',\n    'Road-350',\n    '2025-02-15',\n    '55-7799920',\n    true,\n    '66',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogidoo',\n    'India',\n    'LL Mountain Front Wheel',\n    '2025-06-04',\n    '07-0881122',\n    false,\n    '112',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Divavu',\n    'Colombia',\n    'Touring Rear Wheel',\n    '2025-02-24',\n    '58-6157387',\n    true,\n    '50',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Mydeo',\n    'China',\n    'Touring Front Wheel',\n    '2025-12-07',\n    '12-2810010',\n    false,\n    '31',\n    3,\n    5,\n  ],\n  [\n    false,\n    'Browsebug',\n    'Japan',\n    'ML Mountain Front Wheel',\n    '2025-01-14',\n    '64-9249984',\n    true,\n    '132',\n    5,\n    5,\n  ],\n  [\n    false,\n    'Layo',\n    'China',\n    'HL Mountain Front Wheel',\n    '2025-04-24',\n    '45-0739652',\n    true,\n    '45',\n    1,\n    5,\n  ],\n  [\n    false,\n    'Snaptags',\n    'United Kingdom',\n    'LL Touring Handlebars',\n    '2025-08-06',\n    '09-5712761',\n    true,\n    '197',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Cogilith',\n    'China',\n    'HL Touring Handlebars',\n    '2025-05-31',\n    '01-7345008',\n    true,\n    '190',\n    4,\n    3,\n  ],\n  [\n    false,\n    'Reallinks',\n    'United Kingdom',\n    'LL Road Front Wheel',\n    '2025-05-14',\n    '62-1065350',\n    true,\n    '184',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United States',\n    'ML Road Front Wheel',\n    '2025-03-23',\n    '44-7241323',\n    true,\n    '169',\n    3,\n    4,\n  ],\n  [\n    false,\n    'Devify',\n    'China',\n    'HL Road Front Wheel',\n    '2025-12-12',\n    '52-0295699',\n    false,\n    '152',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Youopia',\n    'Angola',\n    'LL Mountain Handlebars',\n    '2025-04-01',\n    '52-2650922',\n    false,\n    '182',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Ainyx',\n    'China',\n    'Touring Pedal',\n    '2025-02-27',\n    '48-3618525',\n    true,\n    '141',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Browsetype',\n    'Malaysia',\n    'ML Mountain Handlebars',\n    '2025-04-28',\n    '51-8893923',\n    true,\n    '169',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Handlebars',\n    '2025-08-22',\n    '68-5911361',\n    false,\n    '39',\n    7,\n    1,\n  ],\n  [\n    false,\n    'Bubbletube',\n    'China',\n    'LL Road Handlebars',\n    '2025-10-04',\n    '41-5880042',\n    true,\n    '71',\n    8,\n    3,\n  ],\n  [\n    false,\n    'Fadeo',\n    'Vietnam',\n    'ML Road Handlebars',\n    '2025-04-23',\n    '90-5913983',\n    true,\n    '148',\n    10,\n    3,\n  ],\n  [\n    false,\n    'Yadel',\n    'United Kingdom',\n    'HL Road Handlebars',\n    '2025-04-18',\n    '92-0960699',\n    true,\n    '116',\n    8,\n    1,\n  ],\n  [\n    false,\n    'Blognation',\n    'China',\n    'LL Headset',\n    '2025-01-10',\n    '06-9493898',\n    true,\n    '96',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Devpoint',\n    'China',\n    'ML Headset',\n    '2025-12-25',\n    '69-5878565',\n    true,\n    '35',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Aibox',\n    'United Kingdom',\n    'HL Headset',\n    '2025-03-18',\n    '13-1133017',\n    true,\n    '16',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Brightdog',\n    'China',\n    'LL Mountain Pedal',\n    '2025-09-11',\n    '39-6530433',\n    true,\n    '194',\n    2,\n    5,\n  ],\n  [\n    false,\n    'Gabcube',\n    'Nigeria',\n    'ML Mountain Pedal',\n    '2025-04-22',\n    '96-6860388',\n    true,\n    '24',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Muxo',\n    'China',\n    'HL Mountain Pedal',\n    '2025-06-05',\n    '30-0356137',\n    true,\n    '170',\n    4,\n    4,\n  ],\n  [\n    false,\n    'Tambee',\n    'China',\n    'ML Touring Seat/Saddle',\n    '2025-02-22',\n    '93-9058255',\n    true,\n    '184',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Cogilith',\n    'India',\n    'LL Touring Seat/Saddle',\n    '2025-04-06',\n    '82-9268909',\n    false,\n    '153',\n    10,\n    4,\n  ],\n  [\n    false,\n    'Dynabox',\n    'Hong Kong',\n    'HL Touring Seat/Saddle',\n    '2025-01-10',\n    '20-6913815',\n    false,\n    '88',\n    10,\n    1,\n  ],\n  [\n    false,\n    'Shuffledrive',\n    'Sudan',\n    'LL Road Pedal',\n    '2025-09-16',\n    '08-8238817',\n    true,\n    '57',\n    9,\n    2,\n  ],\n  [\n    false,\n    'Fivechat',\n    'China',\n    'ML Road Pedal',\n    '2025-08-26',\n    '44-7370350',\n    false,\n    '62',\n    4,\n    1,\n  ],\n  [\n    false,\n    'Meembee',\n    'United States',\n    'HL Road Pedal',\n    '2025-12-27',\n    '01-3525949',\n    true,\n    '123',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Dynazzy',\n    'United Kingdom',\n    'LL Mountain Seat/Saddle 1',\n    '2025-12-15',\n    '04-2414623',\n    true,\n    '77',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Eare',\n    'China',\n    'ML Mountain Seat/Saddle 1',\n    '2025-04-04',\n    '15-1917509',\n    false,\n    '199',\n    9,\n    4,\n  ],\n  [\n    false,\n    'Yozio',\n    'China',\n    'HL Mountain Seat/Saddle 1',\n    '2025-03-15',\n    '06-2526845',\n    true,\n    '149',\n    8,\n    2,\n  ],\n  [\n    false,\n    'Quinu',\n    \"Xi'an\",\n    '425-777-7829',\n    '2025-02-22',\n    '83-1713558',\n    false,\n    '191',\n    9,\n    5,\n  ],\n  [\n    false,\n    'Jazzy',\n    'United Kingdom',\n    'ML Road Seat/Saddle 1',\n    '2025-08-07',\n    '00-8892524',\n    true,\n    '150',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Thoughtsphere',\n    'China',\n    'HL Road Seat/Saddle 1',\n    '2025-11-28',\n    '39-5538991',\n    true,\n    '130',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Leenti',\n    'China',\n    'ML Road Rear Wheel',\n    '2025-12-29',\n    '06-9002973',\n    true,\n    '179',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Quaxo',\n    'United Kingdom',\n    'HL Road Rear Wheel',\n    '2025-09-06',\n    '73-6104901',\n    true,\n    '98',\n    5,\n    3,\n  ],\n  [\n    false,\n    'Tanoodle',\n    'Chile',\n    'LL Mountain Seat/Saddle 2',\n    '2025-05-24',\n    '68-7384479',\n    true,\n    '175',\n    2,\n    3,\n  ],\n  [\n    false,\n    'Feednation',\n    'China',\n    'ML Mountain Seat/Saddle 2',\n    '2025-11-21',\n    '26-7757763',\n    true,\n    '11',\n    1,\n    3,\n  ],\n  [\n    false,\n    'Kayveo',\n    'China',\n    'HL Mountain Seat/Saddle 2',\n    '2025-06-21',\n    '07-4873562',\n    false,\n    '184',\n    7,\n    4,\n  ],\n  [\n    false,\n    'Meevee',\n    'Saudi Arabia',\n    'LL Road Seat/Saddle 1',\n    '2025-11-16',\n    '46-5819554',\n    false,\n    '27',\n    9,\n    3,\n  ],\n  [\n    false,\n    'Twitterworks',\n    'China',\n    'ML Road Seat/Saddle 2',\n    '2025-04-19',\n    '01-2666826',\n    true,\n    '186',\n    3,\n    2,\n  ],\n  [\n    false,\n    'Wikizz',\n    'Tanzania',\n    'HL Road Seat/Saddle 2',\n    '2025-03-08',\n    '54-7090503',\n    true,\n    '20',\n    3,\n    3,\n  ],\n  [\n    false,\n    'Yoveo',\n    'United States',\n    'LL Mountain Tire',\n    '2025-10-14',\n    '78-7658520',\n    false,\n    '153',\n    2,\n    1,\n  ],\n  [\n    false,\n    'Yakidoo',\n    'China',\n    'ML Mountain Tire',\n    '2025-10-12',\n    '23-9926318',\n    true,\n    '161',\n    8,\n    5,\n  ],\n  [\n    false,\n    'Oyope',\n    'China',\n    'HL Mountain Tire',\n    '2025-09-20',\n    '20-0179517',\n    true,\n    '98',\n    10,\n    5,\n  ],\n  [\n    false,\n    'Skipstorm',\n    'United States',\n    'LL Road Tire',\n    '2025-10-01',\n    '02-9543343',\n    true,\n    '30',\n    7,\n    3,\n  ],\n  [\n    false,\n    'Minyx',\n    'United States',\n    'ML Road Tire',\n    '2025-07-07',\n    '98-3938169',\n    true,\n    '73',\n    10,\n    2,\n  ],\n  [\n    false,\n    'Miboo',\n    'China',\n    'HL Road Tire',\n    '2025-07-25',\n    '68-5197934',\n    true,\n    '158',\n    9,\n    1,\n  ],\n  [\n    false,\n    'Realfire',\n    'United States',\n    'Touring Tire',\n    '2025-08-27',\n    '39-8260460',\n    true,\n    '122',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Shufflester',\n    'China',\n    'Mountain Tire Tube',\n    '2025-06-08',\n    '45-9776170',\n    true,\n    '33',\n    2,\n    4,\n  ],\n  [\n    false,\n    'Ntag',\n    'China',\n    'Road Tire Tube',\n    '2025-12-06',\n    '45-0858451',\n    true,\n    '107',\n    6,\n    2,\n  ],\n  [\n    false,\n    'Jabberbean',\n    'United States',\n    'Touring Tire Tube',\n    '2025-04-26',\n    '15-4247305',\n    true,\n    '15',\n    1,\n    2,\n  ],\n  [\n    false,\n    'Thoughtblab',\n    'China',\n    'LL Bottom Bracket',\n    '2025-05-21',\n    '15-8534931',\n    true,\n    '168',\n    5,\n    2,\n  ],\n  [\n    false,\n    'Jabbertype',\n    'China',\n    'Classic Vest',\n    '2025-07-25',\n    '23-1251557',\n    true,\n    '135',\n    4,\n    2,\n  ],\n  [\n    false,\n    'Buzzshare',\n    'United Kingdom',\n    'Cycling Cap',\n    '2025-07-07',\n    '86-5920601',\n    true,\n    '11',\n    1,\n    4,\n  ],\n  [\n    false,\n    'Roodel',\n    'United States',\n    'Full-Finger Gloves',\n    '2025-01-13',\n    '48-1055459',\n    true,\n    '41',\n    6,\n    4,\n  ],\n  [\n    false,\n    'Zoovu',\n    'China',\n    'Half-Finger Gloves',\n    '2025-06-03',\n    '12-7842022',\n    true,\n    '144',\n    6,\n    1,\n  ],\n  [\n    false,\n    'Photofeed',\n    'China',\n    'HL Mountain Frame',\n    '2025-07-14',\n    '94-5088099',\n    true,\n    '106',\n    1,\n    4,\n  ],\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example1',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" (click)=\"$event.stopPropagation()\">\n          <button class=\"theme-dropdown-trigger\" type=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"menuOpen\" (click)=\"menuOpen = !menuOpen\">\n            <span class=\"theme-dropdown-colors\">\n              <span class=\"color\" [style.background]=\"triggerColors.fg\"></span>\n              <span class=\"color\" [style.background]=\"triggerColors.bg\"></span>\n              <span class=\"color\" [style.background]=\"triggerColors.accent\"></span>\n            </span>\n            <span class=\"theme-dropdown-label\">{{currentThemeLabel}}</span>\n            <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n          </button>\n          @if (menuOpen) {\n            <ul class=\"theme-dropdown-menu\" role=\"listbox\">\n              @for (option of themeOptions; track option.value) {\n                <li role=\"option\" [attr.aria-selected]=\"option.value === selectedTheme\" (click)=\"selectTheme(option.value)\">\n                  <span [class]=\"'theme-dropdown-colors ' + option.themeClass\">\n                    <span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span>\n                    <span class=\"color\" style=\"background: var(--ht-background-color);\"></span>\n                    <span class=\"color\" style=\"background: var(--ht-accent-color);\"></span>\n                  </span>\n                  {{option.label}}\n                </li>\n              }\n            </ul>\n          }\n        </div>\n      </div>\n    </div>\n    <hot-table\n      [settings]=\"hotSettings!\" [data]=\"hotData\">\n    </hot-table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n  readonly hotData = data;\n\n  hotSettings!: GridSettings;\n\n  menuOpen = false;\n  selectedTheme = 'horizon-light';\n  triggerColors: {fg: string; bg: string; accent: string} = {fg: '', bg: '', accent: ''};\n\n  themeOptions: Array<{value: string; label: string; themeClass: string}> = [\n    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },\n    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },\n    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },\n    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },\n    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },\n    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' }\n  ];\n\n  get currentThemeLabel(): string {\n    return this.themeOptions.find(o => o.value === this.selectedTheme)?.label ?? '';\n  }\n\n  ngOnInit() {\n    this.hotSettings = {\n      theme: getTheme('main') ?? mainTheme,\n      height: 450,\n      colWidths: [180, 220, 140, 120, 120, 120, 140],\n      colHeaders: [\n        'Company Name',\n        'Name',\n        'Sell date',\n        'In stock',\n        'Quantity',\n        'Order ID',\n        'Country',\n      ],\n      contextMenu: [\n        'cut',\n        'copy',\n        '---------',\n        'row_above',\n        'row_below',\n        'remove_row',\n        '---------',\n        'alignment',\n        'make_read_only',\n        'clear_column',\n      ] as PredefinedMenuItemKey[],\n      columns: [\n        {\n          data: 1,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 3,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 4,\n          type: 'intl-date',\n          locale: 'en-GB',\n          dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 6,\n          type: 'checkbox',\n          className: 'htCenter',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 7,\n          type: 'numeric',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 5,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n        {\n          data: 2,\n          type: 'text',\n          headerClassName: 'htLeft',\n        },\n      ],\n      dropdownMenu: true,\n      hiddenColumns: {\n        indicators: true,\n      },\n      multiColumnSorting: true,\n      filters: true,\n      rowHeaders: true,\n      manualRowMove: true,\n      headerClassName: 'htLeft',\n      autoWrapRow: true,\n      autoWrapCol: true,\n      manualRowResize: true,\n      manualColumnResize: true,\n      navigableHeaders: true,\n      licenseKey: NON_COMMERCIAL_LICENSE\n    }\n  }\n\n  ngAfterViewInit() {\n    const currentTheme = document\n      .querySelector('html')\n      ?.classList.contains('theme-dark')\n      ? 'horizon-dark'\n      : 'horizon-light';\n\n    this.selectedTheme = currentTheme;\n    this.setTheme(currentTheme);\n  }\n\n  selectTheme(value: string): void {\n    this.selectedTheme = value;\n    this.menuOpen = false;\n    this.setTheme(value);\n  }\n\n  setTheme = (theme: string) => {\n    const [themeName, colorScheme] = theme.split('-');\n    const scheme: ThemeColorScheme = (colorScheme as ThemeColorScheme) ?? 'auto';\n\n    this.hotTable.hotInstance?.updateSettings({\n      theme: getTheme(themeName)?.setColorScheme(scheme)\n    });\n\n    const gridEl = this.hotTable.hotInstance?.rootElement;\n\n    if (gridEl) {\n      const helper = document.createElement('div');\n\n      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n      gridEl.appendChild(helper);\n\n      const resolve = (varName: string) => {\n        helper.style.color = `var(${varName})`;\n\n        return getComputedStyle(helper).color;\n      };\n\n      this.triggerColors = {\n        fg: resolve('--ht-foreground-color'),\n        bg: resolve('--ht-background-color'),\n        accent: resolve('--ht-accent-color'),\n      };\n\n      gridEl.removeChild(helper);\n\n      const container = gridEl.closest('.disable-auto-theme') as HTMLElement | null;\n\n      if (container) container.dataset['colorScheme'] = colorScheme ?? 'auto';\n    }\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/angular/example1.ts","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/themes","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.js.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.js.json
index 2d7ac67f5..307b53a2c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Styling ▸ Themes · Built-in themes · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"themeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"themeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"theme-dropdown-colors\" id=\"triggerColors\">\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n          </span>\n          <span class=\"theme-dropdown-label\" id=\"triggerLabel\">Horizon Light</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"themeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"main-light\">\n            <span class=\"theme-dropdown-colors ht-theme-main\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Light\n          </li>\n          <li role=\"option\" data-value=\"main-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-main-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Dark\n          </li>\n          <li role=\"option\" data-value=\"horizon-light\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Light\n          </li>\n          <li role=\"option\" data-value=\"horizon-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Dark\n          </li>\n          <li role=\"option\" data-value=\"classic-light\">\n            <span class=\"theme-dropdown-colors ht-theme-classic\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Light\n          </li>\n          <li role=\"option\" data-value=\"classic-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-classic-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Dark\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"exampleTheme\" class=\"disable-auto-theme\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nconst example = document.getElementById('exampleTheme');\nconst isDark = document.documentElement.getAttribute('data-theme') === 'dark';\nconst hotInstance = new Handsontable(example, {\n  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    {\n      data: 1,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 3,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 7,\n      type: 'numeric',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 5,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 2,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Theme dropdown\nconst dropdown = document.getElementById('themeDropdown');\nconst trigger = document.getElementById('themeTrigger');\nconst triggerLabel = document.getElementById('triggerLabel');\nconst triggerColors = document.getElementById('triggerColors');\nconst menu = document.getElementById('themeMenu');\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst setTheme = (value) => {\n  const [themeName, colorScheme] = value.split('-');\n\n  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });\n\n  // Propagate the selected color scheme to the container so the docs CSS can read it\n  // via data-color-scheme and apply the right color-scheme property with higher specificity\n  // than the static ht-theme-*.css declarations.\n  example.dataset.colorScheme = colorScheme || 'auto';\n\n  // Update trigger label\n  const item = menu.querySelector(`[data-value=\"${value}\"]`);\n\n  if (item) {\n    triggerLabel.textContent = item.textContent.trim();\n  }\n\n  // Update trigger color dots by resolving computed grid styles\n  const hotRoot = document.querySelector('#exampleTheme .handsontable');\n\n  if (hotRoot) {\n    const helper = document.createElement('div');\n\n    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n    hotRoot.appendChild(helper);\n\n    const resolve = (varName) => {\n      helper.style.color = `var(${varName})`;\n\n      return getComputedStyle(helper).color;\n    };\n\n    const fg = resolve('--ht-foreground-color');\n    const bg = resolve('--ht-background-color');\n    const accent = resolve('--ht-accent-color');\n\n    hotRoot.removeChild(helper);\n\n    const dots = triggerColors.querySelectorAll('.color');\n\n    if (dots.length >= 3) {\n      dots[0].style.background = fg;\n      dots[1].style.background = bg;\n      dots[2].style.background = accent;\n    }\n  }\n\n  // Update aria-selected\n  menu.querySelectorAll('li').forEach((li) => {\n    li.setAttribute('aria-selected', li.dataset.value === value ? 'true' : 'false');\n  });\n};\n\n// Toggle dropdown\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Select item\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    setTheme(item.dataset.value);\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on outside click\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on Escape\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});\n\n// Set initial theme\nsetTheme(currentTheme);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/javascript/exampleTheme.js","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Styling ▸ Themes · Built-in themes · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"themeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"themeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"theme-dropdown-colors\" id=\"triggerColors\">\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n          </span>\n          <span class=\"theme-dropdown-label\" id=\"triggerLabel\">Horizon Light</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"themeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"main-light\">\n            <span class=\"theme-dropdown-colors ht-theme-main\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Light\n          </li>\n          <li role=\"option\" data-value=\"main-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-main-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Dark\n          </li>\n          <li role=\"option\" data-value=\"horizon-light\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Light\n          </li>\n          <li role=\"option\" data-value=\"horizon-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Dark\n          </li>\n          <li role=\"option\" data-value=\"classic-light\">\n            <span class=\"theme-dropdown-colors ht-theme-classic\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Light\n          </li>\n          <li role=\"option\" data-value=\"classic-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-classic-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Dark\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"exampleTheme\" class=\"disable-auto-theme\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nconst example = document.getElementById('exampleTheme');\nconst isDark = document.documentElement.getAttribute('data-theme') === 'dark';\nconst hotInstance = new Handsontable(example, {\n  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    {\n      data: 1,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 3,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 7,\n      type: 'numeric',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 5,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 2,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Theme dropdown\nconst dropdown = document.getElementById('themeDropdown');\nconst trigger = document.getElementById('themeTrigger');\nconst triggerLabel = document.getElementById('triggerLabel');\nconst triggerColors = document.getElementById('triggerColors');\nconst menu = document.getElementById('themeMenu');\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst setTheme = (value) => {\n  const [themeName, colorScheme] = value.split('-');\n\n  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });\n\n  // Propagate the selected color scheme to the container so the docs CSS can read it\n  // via data-color-scheme and apply the right color-scheme property with higher specificity\n  // than the static ht-theme-*.css declarations.\n  example.dataset.colorScheme = colorScheme || 'auto';\n\n  // Update trigger label\n  const item = menu.querySelector(`[data-value=\"${value}\"]`);\n\n  if (item) {\n    triggerLabel.textContent = item.textContent.trim();\n  }\n\n  // Update trigger color dots by resolving computed grid styles\n  const hotRoot = document.querySelector('#exampleTheme .handsontable');\n\n  if (hotRoot) {\n    const helper = document.createElement('div');\n\n    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n    hotRoot.appendChild(helper);\n\n    const resolve = (varName) => {\n      helper.style.color = `var(${varName})`;\n\n      return getComputedStyle(helper).color;\n    };\n\n    const fg = resolve('--ht-foreground-color');\n    const bg = resolve('--ht-background-color');\n    const accent = resolve('--ht-accent-color');\n\n    hotRoot.removeChild(helper);\n\n    const dots = triggerColors.querySelectorAll('.color');\n\n    if (dots.length >= 3) {\n      dots[0].style.background = fg;\n      dots[1].style.background = bg;\n      dots[2].style.background = accent;\n    }\n  }\n\n  // Update aria-selected\n  menu.querySelectorAll('li').forEach((li) => {\n    li.setAttribute('aria-selected', li.dataset.value === value ? 'true' : 'false');\n  });\n};\n\n// Toggle dropdown\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Select item\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('li[data-value]');\n\n  if (item) {\n    setTheme(item.dataset.value);\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on outside click\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on Escape\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});\n\n// Set initial theme\nsetTheme(currentTheme);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/javascript/exampleTheme.js","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.ts.json
index d6bcafdde..20eb4643f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__javascript__exampleTheme.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Styling ▸ Themes · Built-in themes · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"themeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"themeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"theme-dropdown-colors\" id=\"triggerColors\">\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n          </span>\n          <span class=\"theme-dropdown-label\" id=\"triggerLabel\">Horizon Light</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"themeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"main-light\">\n            <span class=\"theme-dropdown-colors ht-theme-main\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Light\n          </li>\n          <li role=\"option\" data-value=\"main-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-main-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Dark\n          </li>\n          <li role=\"option\" data-value=\"horizon-light\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Light\n          </li>\n          <li role=\"option\" data-value=\"horizon-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Dark\n          </li>\n          <li role=\"option\" data-value=\"classic-light\">\n            <span class=\"theme-dropdown-colors ht-theme-classic\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Light\n          </li>\n          <li role=\"option\" data-value=\"classic-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-classic-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Dark\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"exampleTheme\" class=\"disable-auto-theme\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport { PredefinedMenuItemKey } from 'handsontable/plugins/contextMenu';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst example = document.getElementById('exampleTheme')!;\nconst isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n\nconst hotInstance = new Handsontable(example, {\n  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ] as PredefinedMenuItemKey[],\n  columns: [\n    {\n      data: 1,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 3,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 7,\n      type: 'numeric',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 5,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 2,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Theme dropdown\nconst dropdown = document.getElementById('themeDropdown')!;\nconst trigger = document.getElementById('themeTrigger')!;\nconst triggerLabel = document.getElementById('triggerLabel')!;\nconst triggerColors = document.getElementById('triggerColors')!;\nconst menu = document.getElementById('themeMenu')!;\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst setTheme = (value: string) => {\n  const [themeName, colorScheme] = value.split('-');\n\n  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });\n  example.dataset.colorScheme = colorScheme || 'auto';\n\n  // Update trigger label\n  const item = menu.querySelector(`[data-value=\"${value}\"]`);\n\n  if (item) {\n    triggerLabel.textContent = item.textContent!.trim();\n  }\n\n  // Update trigger color dots by resolving computed grid styles\n  const hotRoot = document.querySelector('#exampleTheme .handsontable');\n\n  if (hotRoot) {\n    const helper = document.createElement('div');\n\n    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n    hotRoot.appendChild(helper);\n\n    const resolve = (varName: string) => {\n      helper.style.color = `var(${varName})`;\n\n      return getComputedStyle(helper).color;\n    };\n\n    const fg = resolve('--ht-foreground-color');\n    const bg = resolve('--ht-background-color');\n    const accent = resolve('--ht-accent-color');\n\n    hotRoot.removeChild(helper);\n\n    const dots = triggerColors.querySelectorAll<HTMLElement>('.color');\n\n    if (dots.length >= 3) {\n      dots[0].style.background = fg;\n      dots[1].style.background = bg;\n      dots[2].style.background = accent;\n    }\n  }\n\n  // Update aria-selected\n  menu.querySelectorAll('li').forEach((li) => {\n    li.setAttribute('aria-selected', (li as HTMLElement).dataset.value === value ? 'true' : 'false');\n  });\n};\n\n// Toggle dropdown\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Select item\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (item) {\n    setTheme(item.dataset.value!);\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on outside click\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on Escape\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});\n\n// Set initial theme\nsetTheme(currentTheme);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/javascript/exampleTheme.ts","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Styling ▸ Themes · Built-in themes · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <div class=\"theme-dropdown\" id=\"themeDropdown\">\n        <button class=\"theme-dropdown-trigger\" id=\"themeTrigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span class=\"theme-dropdown-colors\" id=\"triggerColors\">\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n            <span class=\"color\"></span>\n          </span>\n          <span class=\"theme-dropdown-label\" id=\"triggerLabel\">Horizon Light</span>\n          <svg class=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6l6 -6\"/></svg>\n        </button>\n        <ul class=\"theme-dropdown-menu\" id=\"themeMenu\" role=\"listbox\" hidden>\n          <li role=\"option\" data-value=\"main-light\">\n            <span class=\"theme-dropdown-colors ht-theme-main\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Light\n          </li>\n          <li role=\"option\" data-value=\"main-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-main-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Main Dark\n          </li>\n          <li role=\"option\" data-value=\"horizon-light\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Light\n          </li>\n          <li role=\"option\" data-value=\"horizon-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-horizon-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Horizon Dark\n          </li>\n          <li role=\"option\" data-value=\"classic-light\">\n            <span class=\"theme-dropdown-colors ht-theme-classic\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Light\n          </li>\n          <li role=\"option\" data-value=\"classic-dark\">\n            <span class=\"theme-dropdown-colors ht-theme-classic-dark\"><span class=\"color\" style=\"background: var(--ht-foreground-color);\"></span><span class=\"color\" style=\"background: var(--ht-background-color);\"></span><span class=\"color\" style=\"background: var(--ht-accent-color);\"></span></span>\n            Classic Dark\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div id=\"exampleTheme\" class=\"disable-auto-theme\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport { PredefinedMenuItemKey } from 'handsontable/plugins/contextMenu';\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst example = document.getElementById('exampleTheme')!;\nconst isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n\nconst hotInstance = new Handsontable(example, {\n  theme: getTheme('horizon').setColorScheme(isDark ? 'dark' : 'light'),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ] as PredefinedMenuItemKey[],\n  columns: [\n    {\n      data: 1,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 3,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 4,\n      type: 'intl-date',\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 6,\n      type: 'checkbox',\n      className: 'htCenter',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 7,\n      type: 'numeric',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 5,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 2,\n      type: 'text',\n      headerClassName: 'htLeft',\n    },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: {\n    indicators: true,\n  },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Theme dropdown\nconst dropdown = document.getElementById('themeDropdown')!;\nconst trigger = document.getElementById('themeTrigger')!;\nconst triggerLabel = document.getElementById('triggerLabel')!;\nconst triggerColors = document.getElementById('triggerColors')!;\nconst menu = document.getElementById('themeMenu')!;\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst setTheme = (value: string) => {\n  const [themeName, colorScheme] = value.split('-');\n\n  hotInstance.updateSettings({ theme: getTheme(themeName).setColorScheme(colorScheme || 'auto') });\n  example.dataset.colorScheme = colorScheme || 'auto';\n\n  // Update trigger label\n  const item = menu.querySelector(`[data-value=\"${value}\"]`);\n\n  if (item) {\n    triggerLabel.textContent = item.textContent!.trim();\n  }\n\n  // Update trigger color dots by resolving computed grid styles\n  const hotRoot = document.querySelector('#exampleTheme .handsontable');\n\n  if (hotRoot) {\n    const helper = document.createElement('div');\n\n    helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n    hotRoot.appendChild(helper);\n\n    const resolve = (varName: string) => {\n      helper.style.color = `var(${varName})`;\n\n      return getComputedStyle(helper).color;\n    };\n\n    const fg = resolve('--ht-foreground-color');\n    const bg = resolve('--ht-background-color');\n    const accent = resolve('--ht-accent-color');\n\n    hotRoot.removeChild(helper);\n\n    const dots = triggerColors.querySelectorAll<HTMLElement>('.color');\n\n    if (dots.length >= 3) {\n      dots[0].style.background = fg;\n      dots[1].style.background = bg;\n      dots[2].style.background = accent;\n    }\n  }\n\n  // Update aria-selected\n  menu.querySelectorAll('li').forEach((li) => {\n    li.setAttribute('aria-selected', (li as HTMLElement).dataset.value === value ? 'true' : 'false');\n  });\n};\n\n// Toggle dropdown\ntrigger.addEventListener('click', () => {\n  const isOpen = !menu.hidden;\n\n  menu.hidden = isOpen;\n  trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Select item\nmenu.addEventListener('click', (e) => {\n  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n  if (item) {\n    setTheme(item.dataset.value!);\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on outside click\ndocument.addEventListener('click', (e) => {\n  if (!dropdown.contains(e.target as Node)) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\n\n// Close on Escape\ndocument.addEventListener('keydown', (e) => {\n  if (e.key === 'Escape' && !menu.hidden) {\n    menu.hidden = true;\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});\n\n// Set initial theme\nsetTheme(currentTheme);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/javascript/exampleTheme.ts","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__react__exampleTheme.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__react__exampleTheme.tsx.json
index 05ccdbac3..77763089d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__react__exampleTheme.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__react__exampleTheme.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Styling ▸ Themes · Built-in themes · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleTheme\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleTheme\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\n\n// register Handsontable's modules\nregisterAllModules();\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef(null);\n  const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'horizon-dark'\n    : 'horizon-light';\n\n  const [themeName, setThemeName] = useState(currentTheme);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const themeOptions = [\n    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },\n    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },\n    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },\n    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },\n    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },\n    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' },\n  ];\n\n  const currentOption = themeOptions.find((o) => o.value === themeName) || themeOptions[0];\n  const [dotColors, setDotColors] = useState({ fg: '', bg: '', accent: '' });\n\n  useEffect(() => {\n    const [, colorScheme] = themeName.split('-');\n    const container = document.getElementById('exampleTheme');\n\n    if (container) container.dataset.colorScheme = colorScheme || 'auto';\n  }, [themeName]);\n\n  useEffect(() => {\n    const gridEl = hotRef.current?.hotInstance?.rootElement;\n\n    if (gridEl) {\n      const helper = document.createElement('div');\n\n      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n      gridEl.appendChild(helper);\n\n      const resolve = (varName: string) => {\n        helper.style.color = `var(${varName})`;\n\n        return getComputedStyle(helper).color;\n      };\n\n      setDotColors({\n        fg: resolve('--ht-foreground-color'),\n        bg: resolve('--ht-background-color'),\n        accent: resolve('--ht-accent-color'),\n      });\n\n      gridEl.removeChild(helper);\n    }\n  }, [themeName]);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" onClick={(e) => e.stopPropagation()}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={menuOpen}\n              onClick={() => setMenuOpen(!menuOpen)}\n            >\n              <span className=\"theme-dropdown-colors\">\n                <span className=\"color\" style={{ background: dotColors.fg }} />\n                <span className=\"color\" style={{ background: dotColors.bg }} />\n                <span className=\"color\" style={{ background: dotColors.accent }} />\n              </span>\n              <span className=\"theme-dropdown-label\">{currentOption.label}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\" /></svg>\n            </button>\n            {menuOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {themeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={opt.value === themeName}\n                    onClick={() => {\n                      setThemeName(opt.value);\n                      setMenuOpen(false);\n                    }}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        key={themeName}\n        ref={hotRef}\n        theme={getTheme(themeName.split('-')[0]).setColorScheme(themeName.split('-')[1] || 'auto')}\n        data={data}\n        height={450}\n        colWidths={[180, 220, 140, 120, 120, 120, 140]}\n        colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}\n        contextMenu={[\n          'cut',\n          'copy',\n          '---------',\n          'row_above',\n          'row_below',\n          'remove_row',\n          '---------',\n          'alignment',\n          'make_read_only',\n          'clear_column',\n        ]}\n        columns={[\n          {\n            data: 1,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 3,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 4,\n            type: 'intl-date',\n            allowInvalid: false,\n            locale: 'en-GB',\n            dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 6,\n            type: 'checkbox',\n            className: 'htCenter',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 7,\n            type: 'numeric',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 5,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 2,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n        ]}\n        dropdownMenu={true}\n        hiddenColumns={{\n          indicators: true,\n        }}\n        multiColumnSorting={true}\n        filters={true}\n        rowHeaders={true}\n        manualRowMove={true}\n        headerClassName=\"htLeft\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        manualRowResize={true}\n        manualColumnResize={true}\n        navigableHeaders={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/react/exampleTheme.tsx","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"React (TS)"}
+{"framework":"react","displayName":"Styling ▸ Themes · Built-in themes · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"exampleTheme\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleTheme\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\n\n// register Handsontable's modules\nregisterAllModules();\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\n// constants.js\nexport const data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef(null);\n  const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'horizon-dark'\n    : 'horizon-light';\n\n  const [themeName, setThemeName] = useState(currentTheme);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const themeOptions = [\n    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },\n    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },\n    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },\n    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },\n    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },\n    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' },\n  ];\n\n  const currentOption = themeOptions.find((o) => o.value === themeName) || themeOptions[0];\n  const [dotColors, setDotColors] = useState({ fg: '', bg: '', accent: '' });\n\n  useEffect(() => {\n    const [, colorScheme] = themeName.split('-');\n    const container = document.getElementById('exampleTheme');\n\n    if (container) container.dataset.colorScheme = colorScheme || 'auto';\n  }, [themeName]);\n\n  useEffect(() => {\n    const gridEl = hotRef.current?.hotInstance?.rootElement;\n\n    if (gridEl) {\n      const helper = document.createElement('div');\n\n      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n      gridEl.appendChild(helper);\n\n      const resolve = (varName: string) => {\n        helper.style.color = `var(${varName})`;\n\n        return getComputedStyle(helper).color;\n      };\n\n      setDotColors({\n        fg: resolve('--ht-foreground-color'),\n        bg: resolve('--ht-background-color'),\n        accent: resolve('--ht-accent-color'),\n      });\n\n      gridEl.removeChild(helper);\n    }\n  }, [themeName]);\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <div className=\"theme-dropdown\" onClick={(e) => e.stopPropagation()}>\n            <button\n              className=\"theme-dropdown-trigger\"\n              type=\"button\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={menuOpen}\n              onClick={() => setMenuOpen(!menuOpen)}\n            >\n              <span className=\"theme-dropdown-colors\">\n                <span className=\"color\" style={{ background: dotColors.fg }} />\n                <span className=\"color\" style={{ background: dotColors.bg }} />\n                <span className=\"color\" style={{ background: dotColors.accent }} />\n              </span>\n              <span className=\"theme-dropdown-label\">{currentOption.label}</span>\n              <svg className=\"theme-dropdown-chevron\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6l6 -6\" /></svg>\n            </button>\n            {menuOpen && (\n              <ul className=\"theme-dropdown-menu\" role=\"listbox\">\n                {themeOptions.map((opt) => (\n                  <li\n                    key={opt.value}\n                    role=\"option\"\n                    aria-selected={opt.value === themeName}\n                    onClick={() => {\n                      setThemeName(opt.value);\n                      setMenuOpen(false);\n                    }}\n                  >\n                    {opt.label}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        </div>\n      </div>\n      <HotTable\n        key={themeName}\n        ref={hotRef}\n        theme={getTheme(themeName.split('-')[0]).setColorScheme(themeName.split('-')[1] || 'auto')}\n        data={data}\n        height={450}\n        colWidths={[180, 220, 140, 120, 120, 120, 140]}\n        colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}\n        contextMenu={[\n          'cut',\n          'copy',\n          '---------',\n          'row_above',\n          'row_below',\n          'remove_row',\n          '---------',\n          'alignment',\n          'make_read_only',\n          'clear_column',\n        ]}\n        columns={[\n          {\n            data: 1,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 3,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 4,\n            type: 'intl-date',\n            allowInvalid: false,\n            locale: 'en-GB',\n            dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 6,\n            type: 'checkbox',\n            className: 'htCenter',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 7,\n            type: 'numeric',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 5,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n          {\n            data: 2,\n            type: 'text',\n            headerClassName: 'htLeft',\n          },\n        ]}\n        dropdownMenu={true}\n        hiddenColumns={{\n          indicators: true,\n        }}\n        multiColumnSorting={true}\n        filters={true}\n        rowHeaders={true}\n        manualRowMove={true}\n        headerClassName=\"htLeft\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        manualRowResize={true}\n        manualColumnResize={true}\n        navigableHeaders={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 9999;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/react/exampleTheme.tsx","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__vue__exampleTheme.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__vue__exampleTheme.vue.json
index 0f235a231..3dae70ae2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__vue__exampleTheme.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__styling__themes__vue__exampleTheme.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Styling ▸ Themes · Built-in themes · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleTheme\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleTheme\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\nconst data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst themeName = ref(currentTheme);\nconst menuOpen = ref(false);\nconst dotColors = ref({ fg: '', bg: '', accent: '' });\n\nconst themeOptions = [\n  { value: 'main-light', label: 'Main Light' },\n  { value: 'main-dark', label: 'Main Dark' },\n  { value: 'horizon-light', label: 'Horizon Light' },\n  { value: 'horizon-dark', label: 'Horizon Dark' },\n  { value: 'classic-light', label: 'Classic Light' },\n  { value: 'classic-dark', label: 'Classic Dark' },\n];\n\nconst currentOption = computed(\n  () => themeOptions.find((o) => o.value === themeName.value) ?? themeOptions[0],\n);\n\nfunction resolveTheme(name: string) {\n  const [theme, scheme] = name.split('-');\n\n  return getTheme(theme)?.setColorScheme(scheme || 'auto');\n}\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: resolveTheme(themeName.value),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    { data: 1, type: 'text', headerClassName: 'htLeft' },\n    { data: 3, type: 'text', headerClassName: 'htLeft' },\n    {\n      data: 4,\n      type: 'intl-date',\n      allowInvalid: false,\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    { data: 6, type: 'checkbox', className: 'htCenter', headerClassName: 'htLeft' },\n    { data: 7, type: 'numeric', headerClassName: 'htLeft' },\n    { data: 5, type: 'text', headerClassName: 'htLeft' },\n    { data: 2, type: 'text', headerClassName: 'htLeft' },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: { indicators: true },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nfunction updateDotColors() {\n  const gridEl = hotRef.value?.hotInstance?.rootElement;\n\n  if (!gridEl) {\n    return;\n  }\n\n  const helper = document.createElement('div');\n\n  helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n  gridEl.appendChild(helper);\n\n  const resolve = (varName: string) => {\n    helper.style.color = 'var(' + varName + ')';\n\n    return getComputedStyle(helper).color;\n  };\n\n  dotColors.value = {\n    fg: resolve('--ht-foreground-color'),\n    bg: resolve('--ht-background-color'),\n    accent: resolve('--ht-accent-color'),\n  };\n\n  gridEl.removeChild(helper);\n}\n\nwatch(themeName, async () => {\n  const [, colorScheme] = themeName.value.split('-');\n  const container = document.getElementById('exampleTheme');\n\n  if (container) {\n    container.dataset.colorScheme = colorScheme || 'auto';\n  }\n\n  await nextTick();\n  updateDotColors();\n}, { immediate: true });\n\nfunction selectTheme(value: string) {\n  themeName.value = value;\n  menuOpen.value = false;\n}\n\nfunction toggleMenu() {\n  menuOpen.value = !menuOpen.value;\n}\n</script>\n\n<template>\n  <div id=\"exampleTheme\" class=\"disable-auto-theme\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" @click.stop>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"menuOpen\"\n            @click=\"toggleMenu\"\n          >\n            <span class=\"theme-dropdown-colors\">\n              <span class=\"color\" :style=\"{ background: dotColors.fg }\" />\n              <span class=\"color\" :style=\"{ background: dotColors.bg }\" />\n              <span class=\"color\" :style=\"{ background: dotColors.accent }\" />\n            </span>\n            <span class=\"theme-dropdown-label\">{{ currentOption.label }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"menuOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"opt.value === themeName\"\n              @click=\"selectTheme(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable :key=\"themeName\" ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 100;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/vue/exampleTheme.vue","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"Vue 3"}
+{"framework":"vue","displayName":"Styling ▸ Themes · Built-in themes · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"exampleTheme\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleTheme\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nregisterTheme(mainTheme);\nregisterTheme(horizonTheme);\nregisterTheme(classicTheme);\n\nconst data: (string | number | boolean)[][] = [\n  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n  [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n  [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n  [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n  [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n  [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'\n  ? 'horizon-dark'\n  : 'horizon-light';\n\nconst themeName = ref(currentTheme);\nconst menuOpen = ref(false);\nconst dotColors = ref({ fg: '', bg: '', accent: '' });\n\nconst themeOptions = [\n  { value: 'main-light', label: 'Main Light' },\n  { value: 'main-dark', label: 'Main Dark' },\n  { value: 'horizon-light', label: 'Horizon Light' },\n  { value: 'horizon-dark', label: 'Horizon Dark' },\n  { value: 'classic-light', label: 'Classic Light' },\n  { value: 'classic-dark', label: 'Classic Dark' },\n];\n\nconst currentOption = computed(\n  () => themeOptions.find((o) => o.value === themeName.value) ?? themeOptions[0],\n);\n\nfunction resolveTheme(name: string) {\n  const [theme, scheme] = name.split('-');\n\n  return getTheme(theme)?.setColorScheme(scheme || 'auto');\n}\n\nconst hotSettings = computed<GridSettings>(() => ({\n  theme: resolveTheme(themeName.value),\n  data,\n  height: 450,\n  colWidths: [180, 220, 140, 120, 120, 120, 140],\n  colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n  contextMenu: [\n    'cut',\n    'copy',\n    '---------',\n    'row_above',\n    'row_below',\n    'remove_row',\n    '---------',\n    'alignment',\n    'make_read_only',\n    'clear_column',\n  ],\n  columns: [\n    { data: 1, type: 'text', headerClassName: 'htLeft' },\n    { data: 3, type: 'text', headerClassName: 'htLeft' },\n    {\n      data: 4,\n      type: 'intl-date',\n      allowInvalid: false,\n      locale: 'en-GB',\n      dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n      headerClassName: 'htLeft',\n    },\n    { data: 6, type: 'checkbox', className: 'htCenter', headerClassName: 'htLeft' },\n    { data: 7, type: 'numeric', headerClassName: 'htLeft' },\n    { data: 5, type: 'text', headerClassName: 'htLeft' },\n    { data: 2, type: 'text', headerClassName: 'htLeft' },\n  ],\n  dropdownMenu: true,\n  hiddenColumns: { indicators: true },\n  multiColumnSorting: true,\n  filters: true,\n  rowHeaders: true,\n  manualRowMove: true,\n  headerClassName: 'htLeft',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  manualRowResize: true,\n  manualColumnResize: true,\n  navigableHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nfunction updateDotColors() {\n  const gridEl = hotRef.value?.hotInstance?.rootElement;\n\n  if (!gridEl) {\n    return;\n  }\n\n  const helper = document.createElement('div');\n\n  helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';\n  gridEl.appendChild(helper);\n\n  const resolve = (varName: string) => {\n    helper.style.color = 'var(' + varName + ')';\n\n    return getComputedStyle(helper).color;\n  };\n\n  dotColors.value = {\n    fg: resolve('--ht-foreground-color'),\n    bg: resolve('--ht-background-color'),\n    accent: resolve('--ht-accent-color'),\n  };\n\n  gridEl.removeChild(helper);\n}\n\nwatch(themeName, async () => {\n  const [, colorScheme] = themeName.value.split('-');\n  const container = document.getElementById('exampleTheme');\n\n  if (container) {\n    container.dataset.colorScheme = colorScheme || 'auto';\n  }\n\n  await nextTick();\n  updateDotColors();\n}, { immediate: true });\n\nfunction selectTheme(value: string) {\n  themeName.value = value;\n  menuOpen.value = false;\n}\n\nfunction toggleMenu() {\n  menuOpen.value = !menuOpen.value;\n}\n</script>\n\n<template>\n  <div id=\"exampleTheme\" class=\"disable-auto-theme\">\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <div class=\"theme-dropdown\" @click.stop>\n          <button\n            class=\"theme-dropdown-trigger\"\n            type=\"button\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"menuOpen\"\n            @click=\"toggleMenu\"\n          >\n            <span class=\"theme-dropdown-colors\">\n              <span class=\"color\" :style=\"{ background: dotColors.fg }\" />\n              <span class=\"color\" :style=\"{ background: dotColors.bg }\" />\n              <span class=\"color\" :style=\"{ background: dotColors.accent }\" />\n            </span>\n            <span class=\"theme-dropdown-label\">{{ currentOption.label }}</span>\n            <svg\n              class=\"theme-dropdown-chevron\"\n              aria-hidden=\"true\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M6 9l6 6l6 -6\" />\n            </svg>\n          </button>\n          <ul v-if=\"menuOpen\" class=\"theme-dropdown-menu\" role=\"listbox\">\n            <li\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              role=\"option\"\n              :aria-selected=\"opt.value === themeName\"\n              @click=\"selectTheme(opt.value)\"\n            >\n              {{ opt.label }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <HotTable :key=\"themeName\" ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":"/* Theme dropdown */\n.theme-dropdown {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.theme-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-2, #555555);\n  cursor: pointer;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 500;\n  padding: 0.4rem 0.625rem;\n  transition: color 0.15s, background-color 0.15s;\n  white-space: nowrap;\n  border-radius: 0;\n}\n\n.theme-dropdown-trigger:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.theme-dropdown-chevron {\n  flex-shrink: 0;\n  margin-inline-start: 0.15rem;\n  transition: transform 0.15s;\n}\n\n.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {\n  transform: rotate(180deg);\n}\n\n.theme-dropdown-menu {\n  background: var(--sl-color-bg-nav, #ffffff);\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  box-shadow: none;\n  inset-inline-start: 0;\n  list-style: none;\n  margin: 0;\n  min-width: 100%;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 100;\n}\n\n.theme-dropdown-menu[hidden] {\n  display: none !important;\n}\n\n.theme-dropdown-menu li {\n  align-items: center;\n  color: var(--sl-color-text, #333333);\n  display: flex;\n  font-size: var(--sl-text-sm, 0.875rem);\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  transition: background 0.1s, color 0.1s;\n  white-space: nowrap;\n  list-style: none;\n  margin: 0;\n}\n\n.theme-dropdown-menu li .theme-dropdown-colors {\n  display: none;\n}\n\n.theme-dropdown-menu li:last-child {\n  border-bottom: none;\n}\n\n.theme-dropdown-menu li:hover,\n.theme-dropdown-menu li:focus-visible {\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-white, #333333);\n  outline: none;\n}\n\n.theme-dropdown-menu li[aria-selected='true'] {\n  color: var(--sl-color-white, #333333);\n  box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Color dots */\n.theme-dropdown-colors {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.theme-dropdown-colors .color {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: 1px solid var(--sl-color-gray-4, #bbbbbb);\n}"},"docsPath":"guides/styling/themes/vue/exampleTheme.vue","breadcrumb":["Styling","Themes"],"guide":"guides/styling/themes/themes.md","guideTitle":"Themes","exampleId":"exampleTheme","exampleTitle":"Built-in themes","docPermalink":"/themes","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/manifest.json b/runner/apps/authoring/public/docs-examples/next/manifest.json
index 7cbe3d147..041579a86 100644
--- a/runner/apps/authoring/public/docs-examples/next/manifest.json
+++ b/runner/apps/authoring/public/docs-examples/next/manifest.json
@@ -2,8 +2,8 @@
   "bucket": "next",
   "docsBranch": "develop",
   "generatedFrom": "handsontable/docs content/guides/** + content/recipes/**",
-  "hotVersion": "0.0.0-next-770903c-20261001",
-  "count": 1547,
+  "hotVersion": "0.0.0-next-b0dc2e1-20261002",
+  "count": 1557,
   "examples": [
     {
       "bucket": "next",
@@ -2752,6 +2752,86 @@
       "framework": "vue",
       "displayName": "Vue 3"
     },
+    {
+      "bucket": "next",
+      "docsPath": "guides/cell-features/clipboard/angular/example6.ts",
+      "file": "guides__cell-features__clipboard__angular__example6.ts.json",
+      "breadcrumb": [
+        "Cell Features",
+        "Clipboard"
+      ],
+      "guide": "guides/cell-features/clipboard/clipboard.md",
+      "guideTitle": "Clipboard",
+      "exampleId": "example6",
+      "exampleTitle": "Clean up pasted content before it is parsed",
+      "docPermalink": "/basic-clipboard",
+      "framework": "angular",
+      "displayName": "Angular"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/cell-features/clipboard/javascript/example6.js",
+      "file": "guides__cell-features__clipboard__javascript__example6.js.json",
+      "breadcrumb": [
+        "Cell Features",
+        "Clipboard"
+      ],
+      "guide": "guides/cell-features/clipboard/clipboard.md",
+      "guideTitle": "Clipboard",
+      "exampleId": "example6",
+      "exampleTitle": "Clean up pasted content before it is parsed",
+      "docPermalink": "/basic-clipboard",
+      "framework": "javascript",
+      "displayName": "JavaScript"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/cell-features/clipboard/react/example6.tsx",
+      "file": "guides__cell-features__clipboard__react__example6.tsx.json",
+      "breadcrumb": [
+        "Cell Features",
+        "Clipboard"
+      ],
+      "guide": "guides/cell-features/clipboard/clipboard.md",
+      "guideTitle": "Clipboard",
+      "exampleId": "example6",
+      "exampleTitle": "Clean up pasted content before it is parsed",
+      "docPermalink": "/basic-clipboard",
+      "framework": "react",
+      "displayName": "React (TS)"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/cell-features/clipboard/javascript/example6.ts",
+      "file": "guides__cell-features__clipboard__javascript__example6.ts.json",
+      "breadcrumb": [
+        "Cell Features",
+        "Clipboard"
+      ],
+      "guide": "guides/cell-features/clipboard/clipboard.md",
+      "guideTitle": "Clipboard",
+      "exampleId": "example6",
+      "exampleTitle": "Clean up pasted content before it is parsed",
+      "docPermalink": "/basic-clipboard",
+      "framework": "typescript",
+      "displayName": "TypeScript"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/cell-features/clipboard/vue/example6.vue",
+      "file": "guides__cell-features__clipboard__vue__example6.vue.json",
+      "breadcrumb": [
+        "Cell Features",
+        "Clipboard"
+      ],
+      "guide": "guides/cell-features/clipboard/clipboard.md",
+      "guideTitle": "Clipboard",
+      "exampleId": "example6",
+      "exampleTitle": "Clean up pasted content before it is parsed",
+      "docPermalink": "/basic-clipboard",
+      "framework": "vue",
+      "displayName": "Vue 3"
+    },
     {
       "bucket": "next",
       "docsPath": "guides/cell-features/comments/angular/example1.ts",
@@ -21984,6 +22064,86 @@
       "framework": "vue",
       "displayName": "Vue 3"
     },
+    {
+      "bucket": "next",
+      "docsPath": "guides/rows/row-height/angular/example5.ts",
+      "file": "guides__rows__row-height__angular__example5.ts.json",
+      "breadcrumb": [
+        "Rows",
+        "Row heights"
+      ],
+      "guide": "guides/rows/row-height/row-height.md",
+      "guideTitle": "Row heights",
+      "exampleId": "example5",
+      "exampleTitle": "Limit the number of lines in a cell",
+      "docPermalink": "/row-height",
+      "framework": "angular",
+      "displayName": "Angular"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/rows/row-height/javascript/example5.js",
+      "file": "guides__rows__row-height__javascript__example5.js.json",
+      "breadcrumb": [
+        "Rows",
+        "Row heights"
+      ],
+      "guide": "guides/rows/row-height/row-height.md",
+      "guideTitle": "Row heights",
+      "exampleId": "example5",
+      "exampleTitle": "Limit the number of lines in a cell",
+      "docPermalink": "/row-height",
+      "framework": "javascript",
+      "displayName": "JavaScript"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/rows/row-height/react/example5.tsx",
+      "file": "guides__rows__row-height__react__example5.tsx.json",
+      "breadcrumb": [
+        "Rows",
+        "Row heights"
+      ],
+      "guide": "guides/rows/row-height/row-height.md",
+      "guideTitle": "Row heights",
+      "exampleId": "example5",
+      "exampleTitle": "Limit the number of lines in a cell",
+      "docPermalink": "/row-height",
+      "framework": "react",
+      "displayName": "React (TS)"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/rows/row-height/javascript/example5.ts",
+      "file": "guides__rows__row-height__javascript__example5.ts.json",
+      "breadcrumb": [
+        "Rows",
+        "Row heights"
+      ],
+      "guide": "guides/rows/row-height/row-height.md",
+      "guideTitle": "Row heights",
+      "exampleId": "example5",
+      "exampleTitle": "Limit the number of lines in a cell",
+      "docPermalink": "/row-height",
+      "framework": "typescript",
+      "displayName": "TypeScript"
+    },
+    {
+      "bucket": "next",
+      "docsPath": "guides/rows/row-height/vue/example5.vue",
+      "file": "guides__rows__row-height__vue__example5.vue.json",
+      "breadcrumb": [
+        "Rows",
+        "Row heights"
+      ],
+      "guide": "guides/rows/row-height/row-height.md",
+      "guideTitle": "Row heights",
+      "exampleId": "example5",
+      "exampleTitle": "Limit the number of lines in a cell",
+      "docPermalink": "/row-height",
+      "framework": "vue",
+      "displayName": "Vue 3"
+    },
     {
       "bucket": "next",
       "docsPath": "guides/rows/row-hiding/angular/example1.ts",
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__angular__example1.ts.json
index d138941e8..c90630620 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-aria-grid></example1-aria-grid></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { getRenderer } from 'handsontable/renderers';\n\nconst colHeaders = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst data = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000,  startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000,  startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000,  startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000,  startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000,  startDate: '2019-08-22' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-aria-grid',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n\n    // Enable ARIA role attributes on grid, row, and cell DOM elements.\n    ariaTags: true,\n\n    // Tab moves focus to the next row (same column) instead of the next cell.\n    tabMoves: { row: 1, col: 0 },\n\n    // Enter confirms the edit and moves to the next row.\n    enterMoves: { row: 1, col: 0 },\n\n    // Prevent wrap-around navigation, which disorients screen reader users.\n    autoWrapRow: false,\n    autoWrapCol: false,\n\n    // Enable column sorting so aria-sort on headers is meaningful.\n    columnSorting: true,\n\n    columns: [\n      { data: 'name' },\n      { data: 'department' },\n      { data: 'role' },\n      { data: 'salary' },\n      { data: 'startDate' },\n    ],\n\n    // Custom renderer that sets aria-label to \"Column Name: cell value\" on every cell.\n    cells() {\n      return {\n        renderer(hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: Handsontable.CellValue, cellProperties: Handsontable.CellProperties) {\n          getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n          TD.setAttribute('aria-label', `${colHeaders[col]}: ${value ?? 'empty'}`);\n        },\n      };\n    },\n\n    afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n      // Set the initial aria-sort state. The columnSorting plugin updates this\n      // attribute automatically when the user sorts a column.\n      if (!TH.hasAttribute('aria-sort')) {\n        TH.setAttribute('aria-sort', 'none');\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/accessibility/aria-grid/angular/example1.ts","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-aria-grid></example1-aria-grid></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { getRenderer } from 'handsontable/renderers';\n\nconst colHeaders = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst data = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000,  startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000,  startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000,  startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000,  startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000,  startDate: '2019-08-22' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-aria-grid',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n\n    // Enable ARIA role attributes on grid, row, and cell DOM elements.\n    ariaTags: true,\n\n    // Tab moves focus to the next row (same column) instead of the next cell.\n    tabMoves: { row: 1, col: 0 },\n\n    // Enter confirms the edit and moves to the next row.\n    enterMoves: { row: 1, col: 0 },\n\n    // Prevent wrap-around navigation, which disorients screen reader users.\n    autoWrapRow: false,\n    autoWrapCol: false,\n\n    // Enable column sorting so aria-sort on headers is meaningful.\n    columnSorting: true,\n\n    columns: [\n      { data: 'name' },\n      { data: 'department' },\n      { data: 'role' },\n      { data: 'salary' },\n      { data: 'startDate' },\n    ],\n\n    // Custom renderer that sets aria-label to \"Column Name: cell value\" on every cell.\n    cells() {\n      return {\n        renderer(hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: Handsontable.CellValue, cellProperties: Handsontable.CellProperties) {\n          getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n          TD.setAttribute('aria-label', `${colHeaders[col]}: ${value ?? 'empty'}`);\n        },\n      };\n    },\n\n    afterGetColHeader(col: number, TH: HTMLTableCellElement) {\n      // Set the initial aria-sort state. The columnSorting plugin updates this\n      // attribute automatically when the user sorts a column.\n      if (!TH.hasAttribute('aria-sort')) {\n        TH.setAttribute('aria-sort', 'none');\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/accessibility/aria-grid/angular/example1.ts","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__javascript__example1.js.json
index b60d62dd9..c53db6b45 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000, startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000, startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000, startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000, startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000, startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000, startDate: '2019-08-22' },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n\n  // Enable ARIA role attributes on grid, row, and cell DOM elements.\n  ariaTags: true,\n\n  // Tab moves focus to the next row (same column) instead of the next cell.\n  tabMoves: { row: 1, col: 0 },\n\n  // Enter confirms the edit and moves to the next row.\n  enterMoves: { row: 1, col: 0 },\n\n  // Prevent wrap-around navigation, which disorients screen reader users.\n  autoWrapRow: false,\n  autoWrapCol: false,\n\n  // Enable column sorting so aria-sort on headers is meaningful.\n  columnSorting: true,\n\n  columns: [\n    { data: 'name' },\n    { data: 'department' },\n    { data: 'role' },\n    { data: 'salary' },\n    { data: 'startDate' },\n  ],\n\n  // Custom renderer that sets aria-label to \"Column Name: cell value\" on every cell.\n  cells() {\n    return {\n      renderer(hotInstance, TD, row, col, prop, value, cellProperties) {\n        getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n        TD.setAttribute('aria-label', `${colHeaders[col]}: ${value || 'empty'}`);\n      },\n    };\n  },\n\n  afterGetColHeader(col, TH) {\n    // Set the initial aria-sort state. The columnSorting plugin updates this\n    // attribute automatically when the user sorts a column.\n    if (!TH.hasAttribute('aria-sort')) {\n      TH.setAttribute('aria-sort', 'none');\n    }\n  },\n\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/accessibility/aria-grid/javascript/example1.js","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000, startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000, startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000, startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000, startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000, startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000, startDate: '2019-08-22' },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n\n  // Enable ARIA role attributes on grid, row, and cell DOM elements.\n  ariaTags: true,\n\n  // Tab moves focus to the next row (same column) instead of the next cell.\n  tabMoves: { row: 1, col: 0 },\n\n  // Enter confirms the edit and moves to the next row.\n  enterMoves: { row: 1, col: 0 },\n\n  // Prevent wrap-around navigation, which disorients screen reader users.\n  autoWrapRow: false,\n  autoWrapCol: false,\n\n  // Enable column sorting so aria-sort on headers is meaningful.\n  columnSorting: true,\n\n  columns: [\n    { data: 'name' },\n    { data: 'department' },\n    { data: 'role' },\n    { data: 'salary' },\n    { data: 'startDate' },\n  ],\n\n  // Custom renderer that sets aria-label to \"Column Name: cell value\" on every cell.\n  cells() {\n    return {\n      renderer(hotInstance, TD, row, col, prop, value, cellProperties) {\n        getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n        TD.setAttribute('aria-label', `${colHeaders[col]}: ${value || 'empty'}`);\n      },\n    };\n  },\n\n  afterGetColHeader(col, TH) {\n    // Set the initial aria-sort state. The columnSorting plugin updates this\n    // attribute automatically when the user sorts a column.\n    if (!TH.hasAttribute('aria-sort')) {\n      TH.setAttribute('aria-sort', 'none');\n    }\n  },\n\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/accessibility/aria-grid/javascript/example1.js","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__react__example1.tsx.json
index a5ae22229..4004c7033 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__aria-grid__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype EmployeeRow = {\n  name: string;\n  department: string;\n  role: string;\n  salary: number;\n  startDate: string;\n};\n\nconst data: EmployeeRow[] = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000,  startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000,  startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000,  startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000,  startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000,  startDate: '2019-08-22' },\n];\n/* end:skip-in-preview */\n\nconst colHeaders: string[] = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={colHeaders}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      ariaTags={true}\n      tabMoves={{ row: 1, col: 0 }}\n      enterMoves={{ row: 1, col: 0 }}\n      autoWrapRow={false}\n      autoWrapCol={false}\n      columnSorting={true}\n      columns={[\n        { data: 'name' },\n        { data: 'department' },\n        { data: 'role' },\n        { data: 'salary' },\n        { data: 'startDate' },\n      ]}\n      cells={function(): Handsontable.CellMeta {\n        return {\n          renderer(\n            hotInstance: Handsontable,\n            TD: HTMLTableCellElement,\n            row: number,\n            col: number,\n            prop: string | number,\n            value: Handsontable.CellValue,\n            cellProperties: Handsontable.CellProperties,\n          ): void {\n            getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n            TD.setAttribute('aria-label', `${colHeaders[col]}: ${value ?? 'empty'}`);\n          },\n        };\n      }}\n      afterGetColHeader={function(col: number, TH: HTMLTableCellElement): void {\n        if (!TH.hasAttribute('aria-sort')) {\n          TH.setAttribute('aria-sort', 'none');\n        }\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/accessibility/aria-grid/react/example1.tsx","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Accessibility ▸ ARIA-friendly grid · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype EmployeeRow = {\n  name: string;\n  department: string;\n  role: string;\n  salary: number;\n  startDate: string;\n};\n\nconst data: EmployeeRow[] = [\n  { name: 'Ana García',    department: 'Engineering',  role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12' },\n  { name: 'James Okafor',  department: 'Product',      role: 'Product Manager',    salary: 105000, startDate: '2020-07-01' },\n  { name: 'Li Wei',        department: 'Design',       role: 'UX Designer',        salary: 88000,  startDate: '2021-01-15' },\n  { name: 'Priya Sharma',  department: 'Engineering',  role: 'Tech Lead',          salary: 120000, startDate: '2018-09-05' },\n  { name: 'Carlos Mendez', department: 'HR',           role: 'HR Specialist',      salary: 72000,  startDate: '2022-02-20' },\n  { name: 'Sarah Chen',    department: 'Finance',      role: 'Financial Analyst',  salary: 91000,  startDate: '2020-11-30' },\n  { name: 'Omar Hassan',   department: 'Engineering',  role: 'Backend Engineer',   salary: 98000,  startDate: '2021-06-14' },\n  { name: 'Emma Wilson',   department: 'Marketing',    role: 'Marketing Lead',     salary: 85000,  startDate: '2019-08-22' },\n];\n/* end:skip-in-preview */\n\nconst colHeaders: string[] = ['Name', 'Department', 'Role', 'Salary', 'Start Date'];\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={colHeaders}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      ariaTags={true}\n      tabMoves={{ row: 1, col: 0 }}\n      enterMoves={{ row: 1, col: 0 }}\n      autoWrapRow={false}\n      autoWrapCol={false}\n      columnSorting={true}\n      columns={[\n        { data: 'name' },\n        { data: 'department' },\n        { data: 'role' },\n        { data: 'salary' },\n        { data: 'startDate' },\n      ]}\n      cells={function(): Handsontable.CellMeta {\n        return {\n          renderer(\n            hotInstance: Handsontable,\n            TD: HTMLTableCellElement,\n            row: number,\n            col: number,\n            prop: string | number,\n            value: Handsontable.CellValue,\n            cellProperties: Handsontable.CellProperties,\n          ): void {\n            getRenderer('text')(hotInstance, TD, row, col, prop, value, cellProperties);\n            TD.setAttribute('aria-label', `${colHeaders[col]}: ${value ?? 'empty'}`);\n          },\n        };\n      }}\n      afterGetColHeader={function(col: number, TH: HTMLTableCellElement): void {\n        if (!TH.hasAttribute('aria-sort')) {\n          TH.setAttribute('aria-sort', 'none');\n        }\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/accessibility/aria-grid/react/example1.tsx","breadcrumb":["Recipes","Accessibility","ARIA-friendly grid"],"guide":"recipes/accessibility/aria-grid/aria-grid.md","guideTitle":"ARIA-friendly grid","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/aria-grid","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json
index 652c48a65..e8f5e7e61 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-keyboard-shortcuts></example1-keyboard-shortcuts>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, NgZone, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\n@Component({\n  selector: 'example1-keyboard-shortcuts',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <strong>Shortcut log:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col style=\"width: 180px\">\n        <col>\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>Last shortcut triggered</td>\n          <td><code>{{ lastShortcut }}</code></td>\n        </tr>\n        <tr>\n          <td>Last submission</td>\n          <td><code>{{ lastSubmission }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  data = employees;\n  lastShortcut = '—';\n  lastSubmission = '—';\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'Start Date'],\n    columns: [\n      { data: 'name', type: 'text' },\n      { data: 'department', type: 'text' },\n      { data: 'role', type: 'text' },\n      { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n      { data: 'startDate', type: 'text' },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // Ctrl+D: duplicate the currently selected row\n    gridContext.addShortcut({\n      keys: [['Control', 'd']],\n      group: 'customActions',\n      runOnlyIf: () => hot.getSelected() !== undefined,\n      callback: (event: Event) => {\n        event.preventDefault();\n\n        const selectedRange = hot.getSelectedRangeLast();\n\n        if (!selectedRange) {\n          return;\n        }\n\n        const row = selectedRange.from.row;\n\n        if (row === null) {\n          return;\n        }\n\n        const rowData = hot.getSourceDataAtRow(row) as Record<string, unknown>;\n\n        hot.alter('insert_row_below', row);\n        hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n        this.ngZone.run(() => { this.lastShortcut = 'Ctrl+D -- row duplicated'; });\n      },\n    });\n\n    // Ctrl+Enter: submit the grid data\n    gridContext.addShortcut({\n      keys: [['Control', 'Enter']],\n      group: 'customActions',\n      runOnlyIf: () => true,\n      callback: (event: Event) => {\n        event.preventDefault();\n\n        const data = hot.getData();\n        const headers = hot.getColHeader() as string[];\n        const rowCount = data.length;\n        const timestamp = new Date().toLocaleTimeString();\n\n        this.ngZone.run(() => {\n          this.lastShortcut = 'Ctrl+Enter -- data submitted';\n          this.lastSubmission = `[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`;\n        });\n      },\n    });\n  }\n\n  ngOnDestroy(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup('customActions');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/accessibility/keyboard-shortcuts/angular/example1.ts","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-keyboard-shortcuts></example1-keyboard-shortcuts>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit, OnDestroy, NgZone, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\n@Component({\n  selector: 'example1-keyboard-shortcuts',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <strong>Shortcut log:</strong>\n    <table class=\"debug-table\">\n      <colgroup>\n        <col style=\"width: 180px\">\n        <col>\n      </colgroup>\n      <tbody>\n        <tr>\n          <td>Last shortcut triggered</td>\n          <td><code>{{ lastShortcut }}</code></td>\n        </tr>\n        <tr>\n          <td>Last submission</td>\n          <td><code>{{ lastSubmission }}</code></td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  data = employees;\n  lastShortcut = '—';\n  lastSubmission = '—';\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Name', 'Department', 'Role', 'Salary', 'Start Date'],\n    columns: [\n      { data: 'name', type: 'text' },\n      { data: 'department', type: 'text' },\n      { data: 'role', type: 'text' },\n      { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n      { data: 'startDate', type: 'text' },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    if (!gridContext) {\n      return;\n    }\n\n    // Ctrl+D: duplicate the currently selected row\n    gridContext.addShortcut({\n      keys: [['Control', 'd']],\n      group: 'customActions',\n      runOnlyIf: () => hot.getSelected() !== undefined,\n      callback: (event: Event) => {\n        event.preventDefault();\n\n        const selectedRange = hot.getSelectedRangeLast();\n\n        if (!selectedRange) {\n          return;\n        }\n\n        const row = selectedRange.from.row;\n\n        if (row === null) {\n          return;\n        }\n\n        const rowData = hot.getSourceDataAtRow(row) as Record<string, unknown>;\n\n        hot.alter('insert_row_below', row);\n        hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n        this.ngZone.run(() => { this.lastShortcut = 'Ctrl+D -- row duplicated'; });\n      },\n    });\n\n    // Ctrl+Enter: submit the grid data\n    gridContext.addShortcut({\n      keys: [['Control', 'Enter']],\n      group: 'customActions',\n      runOnlyIf: () => true,\n      callback: (event: Event) => {\n        event.preventDefault();\n\n        const data = hot.getData();\n        const headers = hot.getColHeader() as string[];\n        const rowCount = data.length;\n        const timestamp = new Date().toLocaleTimeString();\n\n        this.ngZone.run(() => {\n          this.lastShortcut = 'Ctrl+Enter -- data submitted';\n          this.lastSubmission = `[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`;\n        });\n      },\n    });\n  }\n\n  ngOnDestroy(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.getShortcutManager().getContext('grid')?.removeShortcutsByGroup('customActions');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/accessibility/keyboard-shortcuts/angular/example1.ts","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json
index 08551ef8b..135545d43 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <strong>Shortcut log:</strong>\n  <table class=\"debug-table\">\n    <colgroup>\n      <col style=\"width: 180px\">\n      <col>\n    </colgroup>\n    <tbody>\n      <tr>\n        <td>Last shortcut triggered</td>\n        <td><code class=\"last-shortcut\">—</code></td>\n      </tr>\n      <tr>\n        <td>Last submission</td>\n        <td><code class=\"last-submission\">—</code></td>\n      </tr>\n    </tbody>\n  </table>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data: employees,\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'Start Date'],\n  columns: [\n    { data: 'name', type: 'text' },\n    { data: 'department', type: 'text' },\n    { data: 'role', type: 'text' },\n    { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n    { data: 'startDate', type: 'text' },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst preview = container.closest('.hot-example-preview') ?? container.parentElement;\nconst lastShortcutEl = preview.querySelector('.last-shortcut');\nconst lastSubmissionEl = preview.querySelector('.last-submission');\n\nconst gridContext = hot.getShortcutManager().getContext('grid');\n\n// Ctrl+D: duplicate the currently selected row\ngridContext.addShortcut({\n  keys: [['Control', 'd']],\n  group: 'customActions',\n  runOnlyIf: () => hot.getSelected() !== undefined,\n  callback: (event) => {\n    event.preventDefault();\n\n    const selectedRange = hot.getSelectedRangeLast();\n\n    if (!selectedRange) {\n      return;\n    }\n\n    const row = selectedRange.from.row;\n    const rowData = hot.getSourceDataAtRow(row);\n\n    hot.alter('insert_row_below', row);\n    hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n    lastShortcutEl.textContent = 'Ctrl+D -- row duplicated';\n  },\n});\n\n// Ctrl+Enter: submit the grid data\ngridContext.addShortcut({\n  keys: [['Control', 'Enter']],\n  group: 'customActions',\n  runOnlyIf: () => true,\n  callback: (event) => {\n    event.preventDefault();\n\n    const data = hot.getData();\n    const headers = hot.getColHeader();\n    const rowCount = data.length;\n    const timestamp = new Date().toLocaleTimeString();\n\n    lastShortcutEl.textContent = 'Ctrl+Enter -- data submitted';\n    lastSubmissionEl.textContent = `[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/accessibility/keyboard-shortcuts/javascript/example1.js","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <strong>Shortcut log:</strong>\n  <table class=\"debug-table\">\n    <colgroup>\n      <col style=\"width: 180px\">\n      <col>\n    </colgroup>\n    <tbody>\n      <tr>\n        <td>Last shortcut triggered</td>\n        <td><code class=\"last-shortcut\">—</code></td>\n      </tr>\n      <tr>\n        <td>Last submission</td>\n        <td><code class=\"last-submission\">—</code></td>\n      </tr>\n    </tbody>\n  </table>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data: employees,\n  colHeaders: ['Name', 'Department', 'Role', 'Salary', 'Start Date'],\n  columns: [\n    { data: 'name', type: 'text' },\n    { data: 'department', type: 'text' },\n    { data: 'role', type: 'text' },\n    { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n    { data: 'startDate', type: 'text' },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst preview = container.closest('.hot-example-preview') ?? container.parentElement;\nconst lastShortcutEl = preview.querySelector('.last-shortcut');\nconst lastSubmissionEl = preview.querySelector('.last-submission');\n\nconst gridContext = hot.getShortcutManager().getContext('grid');\n\n// Ctrl+D: duplicate the currently selected row\ngridContext.addShortcut({\n  keys: [['Control', 'd']],\n  group: 'customActions',\n  runOnlyIf: () => hot.getSelected() !== undefined,\n  callback: (event) => {\n    event.preventDefault();\n\n    const selectedRange = hot.getSelectedRangeLast();\n\n    if (!selectedRange) {\n      return;\n    }\n\n    const row = selectedRange.from.row;\n    const rowData = hot.getSourceDataAtRow(row);\n\n    hot.alter('insert_row_below', row);\n    hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n    lastShortcutEl.textContent = 'Ctrl+D -- row duplicated';\n  },\n});\n\n// Ctrl+Enter: submit the grid data\ngridContext.addShortcut({\n  keys: [['Control', 'Enter']],\n  group: 'customActions',\n  runOnlyIf: () => true,\n  callback: (event) => {\n    event.preventDefault();\n\n    const data = hot.getData();\n    const headers = hot.getColHeader();\n    const rowCount = data.length;\n    const timestamp = new Date().toLocaleTimeString();\n\n    lastShortcutEl.textContent = 'Ctrl+Enter -- data submitted';\n    lastSubmissionEl.textContent = `[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/accessibility/keyboard-shortcuts/javascript/example1.js","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json
index a089ebd6a..85c98c7f8 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<{ hotInstance: Handsontable | null } | null>(null);\n  const [lastShortcut, setLastShortcut] = useState<string>('—');\n  const [lastSubmission, setLastSubmission] = useState<string>('—');\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    // Ctrl+D: duplicate the currently selected row\n    gridContext.addShortcut({\n      keys: [['Control', 'd']],\n      group: 'customActions',\n      runOnlyIf: () => hot.getSelected() !== undefined,\n      callback: (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        const selectedRange = hot.getSelectedRangeLast();\n\n        if (!selectedRange) {\n          return;\n        }\n\n        const row = selectedRange.from.row;\n        const rowData = hot.getSourceDataAtRow(row) as Record<string, unknown>;\n\n        hot.alter('insert_row_below', row);\n        hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n        setLastShortcut('Ctrl+D -- row duplicated');\n      },\n    });\n\n    // Ctrl+Enter: submit the grid data\n    gridContext.addShortcut({\n      keys: [['Control', 'Enter']],\n      group: 'customActions',\n      runOnlyIf: () => true,\n      callback: (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        const data = hot.getData();\n        const headers = hot.getColHeader() as string[];\n        const rowCount = data.length;\n        const timestamp = new Date().toLocaleTimeString();\n\n        setLastShortcut('Ctrl+Enter -- data submitted');\n        setLastSubmission(`[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`);\n      },\n    });\n\n    return () => {\n      gridContext.removeShortcutsByGroup('customActions');\n    };\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={employees}\n        colHeaders={['Name', 'Department', 'Role', 'Salary', 'Start Date']}\n        columns={[\n          { data: 'name', type: 'text' },\n          { data: 'department', type: 'text' },\n          { data: 'role', type: 'text' },\n          { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n          { data: 'startDate', type: 'text' },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <strong>Shortcut log:</strong>\n      <table className=\"debug-table\">\n        <colgroup>\n          <col style={{ width: '180px' }} />\n          <col />\n        </colgroup>\n        <tbody>\n          <tr>\n            <td>Last shortcut triggered</td>\n            <td><code>{lastShortcut}</code></td>\n          </tr>\n          <tr>\n            <td>Last submission</td>\n            <td><code>{lastSubmission}</code></td>\n          </tr>\n        </tbody>\n      </table>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/accessibility/keyboard-shortcuts/react/example1.tsx","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Accessibility ▸ Custom keyboard shortcuts · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst employees = [\n  { name: 'Ana García', department: 'Engineering', role: 'Senior Developer', salary: 95000, startDate: '2021-03-15' },\n  { name: 'James Okafor', department: 'Marketing', role: 'Marketing Manager', salary: 82000, startDate: '2020-07-01' },\n  { name: 'Li Wei', department: 'Engineering', role: 'Frontend Developer', salary: 78000, startDate: '2022-01-10' },\n  { name: 'Priya Nair', department: 'HR', role: 'HR Specialist', salary: 68000, startDate: '2019-11-20' },\n  { name: 'Carlos Mendes', department: 'Finance', role: 'Financial Analyst', salary: 88000, startDate: '2021-09-05' },\n  { name: 'Fatima Al-Hassan', department: 'Engineering', role: 'Backend Developer', salary: 92000, startDate: '2020-04-18' },\n  { name: 'Noah Kim', department: 'Design', role: 'UX Designer', salary: 75000, startDate: '2023-02-14' },\n  { name: 'Sara Lindqvist', department: 'Marketing', role: 'Content Strategist', salary: 71000, startDate: '2019-06-30' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<{ hotInstance: Handsontable | null } | null>(null);\n  const [lastShortcut, setLastShortcut] = useState<string>('—');\n  const [lastSubmission, setLastSubmission] = useState<string>('—');\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const gridContext = hot.getShortcutManager().getContext('grid');\n\n    // Ctrl+D: duplicate the currently selected row\n    gridContext.addShortcut({\n      keys: [['Control', 'd']],\n      group: 'customActions',\n      runOnlyIf: () => hot.getSelected() !== undefined,\n      callback: (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        const selectedRange = hot.getSelectedRangeLast();\n\n        if (!selectedRange) {\n          return;\n        }\n\n        const row = selectedRange.from.row;\n        const rowData = hot.getSourceDataAtRow(row) as Record<string, unknown>;\n\n        hot.alter('insert_row_below', row);\n        hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n\n        setLastShortcut('Ctrl+D -- row duplicated');\n      },\n    });\n\n    // Ctrl+Enter: submit the grid data\n    gridContext.addShortcut({\n      keys: [['Control', 'Enter']],\n      group: 'customActions',\n      runOnlyIf: () => true,\n      callback: (event: KeyboardEvent) => {\n        event.preventDefault();\n\n        const data = hot.getData();\n        const headers = hot.getColHeader() as string[];\n        const rowCount = data.length;\n        const timestamp = new Date().toLocaleTimeString();\n\n        setLastShortcut('Ctrl+Enter -- data submitted');\n        setLastSubmission(`[${timestamp}] Submitted ${rowCount} rows -- columns: ${headers.join(', ')}`);\n      },\n    });\n\n    return () => {\n      gridContext.removeShortcutsByGroup('customActions');\n    };\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={employees}\n        colHeaders={['Name', 'Department', 'Role', 'Salary', 'Start Date']}\n        columns={[\n          { data: 'name', type: 'text' },\n          { data: 'department', type: 'text' },\n          { data: 'role', type: 'text' },\n          { data: 'salary', type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 } },\n          { data: 'startDate', type: 'text' },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <strong>Shortcut log:</strong>\n      <table className=\"debug-table\">\n        <colgroup>\n          <col style={{ width: '180px' }} />\n          <col />\n        </colgroup>\n        <tbody>\n          <tr>\n            <td>Last shortcut triggered</td>\n            <td><code>{lastShortcut}</code></td>\n          </tr>\n          <tr>\n            <td>Last submission</td>\n            <td><code>{lastSubmission}</code></td>\n          </tr>\n        </tbody>\n      </table>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/accessibility/keyboard-shortcuts/react/example1.tsx","breadcrumb":["Recipes","Accessibility","Custom keyboard shortcuts"],"guide":"recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md","guideTitle":"Custom keyboard shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/accessibility/keyboard-shortcuts","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__angular__example1.ts.json
index 5d2b3e755..c1fd81f1b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-color-picker></example1-color-picker>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { id: 640329, itemName: 'Lunar Core', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },\n  { id: 863104, itemName: 'Zero Thrusters', itemNo: 'QL-54', cost: 450000, valueStock: 0 },\n  { id: 395603, itemName: 'EVA Suits', itemNo: 'PM-67', cost: 150000, valueStock: 7500000 },\n  { id: 679083, itemName: 'Solar Panels', itemNo: 'BW-09', cost: 75000, valueStock: 750000 },\n  { id: 912663, itemName: 'Comm Array', itemNo: 'ZR-56', cost: 125000, valueStock: 0 },\n  { id: 315806, itemName: 'Habitat Dome', itemNo: 'UJ-23', cost: 1000000, valueStock: 3000000 },\n  { id: 954632, itemName: 'Oxygen Unit', itemNo: 'FK-87', cost: 600000, valueStock: 9000000 },\n  { id: 734944, itemName: 'Processing Rig', itemNo: 'LK-13', cost: 350000, valueStock: 8750000 },\n];\n/* end:skip-in-preview */\n\nconst colorValidator = (value: string): boolean => /^#[0-9A-Fa-f]{6}$/.test(value);\n\n@Component({\n  standalone: true,\n  selector: 'example1-color-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"color-picker-cell\">\n      <span class=\"color-picker-swatch\" [style.background]=\"value\"></span>\n    </div>`,\n  styles: `\n  :host { height: 100%; width: 100%; }\n  .color-picker-cell { display: flex; align-items: center; justify-content: center; }\n  .color-picker-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }\n  `,\n})\nexport class ColorRendererComponent extends HotCellRendererAdvancedComponent<string> {}\n\n@Component({\n  standalone: true,\n  selector: 'example1-color-picker-editor',\n  template: `\n    <div #editorContainer style=\"width:100%;height:100%;position:relative;\">\n      <input #colorInput class=\"color-picker-editor\" type=\"text\" readonly />\n    </div>\n  `,\n  styles: `\n  :host { width: 100%; height: 100%; }\n  .color-picker-editor { width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box !important; cursor: pointer; }\n  `,\n})\nexport class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  @ViewChild('colorInput', { static: true }) colorInput!: ElementRef<HTMLInputElement>;\n  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef<HTMLElement>;\n\n  private pickrInstance: Pickr | null = null;\n  private pickrButton: HTMLButtonElement | null = null;\n  private openedAt = 0;\n\n  override afterOpen(): void {\n    this.openedAt = Date.now();\n    this.colorInput.nativeElement.value = this.value || '#000000';\n\n    this.pickrButton = document.createElement('button');\n    this.pickrButton.textContent = 'Open color picker';\n    this.pickrButton.style.cssText = 'position:absolute;opacity:0;pointer-events:none;';\n    this.editorContainer.nativeElement.appendChild(this.pickrButton);\n    const button = this.pickrButton;\n\n    this.pickrInstance = Pickr.create({\n      el: button,\n      theme: 'nano',\n      default: this.value || '#000000',\n      autoReposition: false,\n      padding: 0,\n      components: { preview: true, hue: true },\n    });\n\n    (this.pickrInstance as any)._root.root.style.height = '0';\n    (this.pickrInstance as any)._root.root.style.overflow = 'hidden';\n\n    this.pickrInstance.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n      if (color) {\n        const hex = color.toHEXA().toString();\n        this.colorInput.nativeElement.value = hex;\n        this.setValue(hex);\n      }\n    });\n\n    this.pickrInstance.on('hide', () => {\n      if (Date.now() - this.openedAt < 400) {\n        this.pickrInstance?.show();\n        return;\n      }\n      this.finishEdit.emit();\n    });\n\n    this.pickrInstance.show();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const cellRect = this.editorContainer.nativeElement.getBoundingClientRect();\n\n        if (cellRect && this.pickrInstance) {\n          (this.pickrInstance as any)._root.app.style.top = `${cellRect.bottom}px`;\n        }\n      });\n    });\n  }\n\n  override afterClose(): void {\n    (this.pickrInstance as any)?._root.app.classList.remove('visible');\n    this.pickrInstance?.hide();\n    this.pickrInstance?.destroy();\n    this.pickrInstance = null;\n    this.pickrButton?.remove();\n    this.pickrButton = null;\n  }\n\n  override onFocus(): void {\n    this.colorInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-color-picker',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    color: `#${Math.round(0x1000000 + 0xffffff * Math.random()).toString(16).slice(1).toUpperCase()}`,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 80, headerClassName: 'htLeft' },\n      { data: 'itemName', type: 'text', width: 200, headerClassName: 'htLeft' },\n      {\n        data: 'color',\n        headerClassName: 'htLeft',\n        editor: ColorPickerEditorComponent,\n        renderer: ColorRendererComponent,\n        validator: colorValidator,\n      } as any,\n      { data: 'itemNo', type: 'text', width: 100, headerClassName: 'htLeft' },\n      { data: 'cost', type: 'numeric', width: 70, headerClassName: 'htLeft' },\n      { data: 'valueStock', type: 'numeric', width: 130, headerClassName: 'htRight' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/color-picker/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-color-picker></example1-color-picker>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { id: 640329, itemName: 'Lunar Core', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },\n  { id: 863104, itemName: 'Zero Thrusters', itemNo: 'QL-54', cost: 450000, valueStock: 0 },\n  { id: 395603, itemName: 'EVA Suits', itemNo: 'PM-67', cost: 150000, valueStock: 7500000 },\n  { id: 679083, itemName: 'Solar Panels', itemNo: 'BW-09', cost: 75000, valueStock: 750000 },\n  { id: 912663, itemName: 'Comm Array', itemNo: 'ZR-56', cost: 125000, valueStock: 0 },\n  { id: 315806, itemName: 'Habitat Dome', itemNo: 'UJ-23', cost: 1000000, valueStock: 3000000 },\n  { id: 954632, itemName: 'Oxygen Unit', itemNo: 'FK-87', cost: 600000, valueStock: 9000000 },\n  { id: 734944, itemName: 'Processing Rig', itemNo: 'LK-13', cost: 350000, valueStock: 8750000 },\n];\n/* end:skip-in-preview */\n\nconst colorValidator = (value: string): boolean => /^#[0-9A-Fa-f]{6}$/.test(value);\n\n@Component({\n  standalone: true,\n  selector: 'example1-color-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"color-picker-cell\">\n      <span class=\"color-picker-swatch\" [style.background]=\"value\"></span>\n    </div>`,\n  styles: `\n  :host { height: 100%; width: 100%; }\n  .color-picker-cell { display: flex; align-items: center; justify-content: center; }\n  .color-picker-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }\n  `,\n})\nexport class ColorRendererComponent extends HotCellRendererAdvancedComponent<string> {}\n\n@Component({\n  standalone: true,\n  selector: 'example1-color-picker-editor',\n  template: `\n    <div #editorContainer style=\"width:100%;height:100%;position:relative;\">\n      <input #colorInput class=\"color-picker-editor\" type=\"text\" readonly />\n    </div>\n  `,\n  styles: `\n  :host { width: 100%; height: 100%; }\n  .color-picker-editor { width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box !important; cursor: pointer; }\n  `,\n})\nexport class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  @ViewChild('colorInput', { static: true }) colorInput!: ElementRef<HTMLInputElement>;\n  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef<HTMLElement>;\n\n  private pickrInstance: Pickr | null = null;\n  private pickrButton: HTMLButtonElement | null = null;\n  private openedAt = 0;\n\n  override afterOpen(): void {\n    this.openedAt = Date.now();\n    this.colorInput.nativeElement.value = this.value || '#000000';\n\n    this.pickrButton = document.createElement('button');\n    this.pickrButton.textContent = 'Open color picker';\n    this.pickrButton.style.cssText = 'position:absolute;opacity:0;pointer-events:none;';\n    this.editorContainer.nativeElement.appendChild(this.pickrButton);\n    const button = this.pickrButton;\n\n    this.pickrInstance = Pickr.create({\n      el: button,\n      theme: 'nano',\n      default: this.value || '#000000',\n      autoReposition: false,\n      padding: 0,\n      components: { preview: true, hue: true },\n    });\n\n    (this.pickrInstance as any)._root.root.style.height = '0';\n    (this.pickrInstance as any)._root.root.style.overflow = 'hidden';\n\n    this.pickrInstance.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n      if (color) {\n        const hex = color.toHEXA().toString();\n        this.colorInput.nativeElement.value = hex;\n        this.setValue(hex);\n      }\n    });\n\n    this.pickrInstance.on('hide', () => {\n      if (Date.now() - this.openedAt < 400) {\n        this.pickrInstance?.show();\n        return;\n      }\n      this.finishEdit.emit();\n    });\n\n    this.pickrInstance.show();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const cellRect = this.editorContainer.nativeElement.getBoundingClientRect();\n\n        if (cellRect && this.pickrInstance) {\n          (this.pickrInstance as any)._root.app.style.top = `${cellRect.bottom}px`;\n        }\n      });\n    });\n  }\n\n  override afterClose(): void {\n    (this.pickrInstance as any)?._root.app.classList.remove('visible');\n    this.pickrInstance?.hide();\n    this.pickrInstance?.destroy();\n    this.pickrInstance = null;\n    this.pickrButton?.remove();\n    this.pickrButton = null;\n  }\n\n  override onFocus(): void {\n    this.colorInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-color-picker',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    color: `#${Math.round(0x1000000 + 0xffffff * Math.random()).toString(16).slice(1).toUpperCase()}`,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 80, headerClassName: 'htLeft' },\n      { data: 'itemName', type: 'text', width: 200, headerClassName: 'htLeft' },\n      {\n        data: 'color',\n        headerClassName: 'htLeft',\n        editor: ColorPickerEditorComponent,\n        renderer: ColorRendererComponent,\n        validator: colorValidator,\n      } as any,\n      { data: 'itemNo', type: 'text', width: 100, headerClassName: 'htLeft' },\n      { data: 'cost', type: 'numeric', width: 70, headerClassName: 'htLeft' },\n      { data: 'valueStock', type: 'numeric', width: 130, headerClassName: 'htRight' },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/color-picker/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.js.json
index 161b0c22f..1516fbbc3 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n    }`,\n}));\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n  }),\n  validator: (value, callback) => {\n    callback(value.length === 7 && value[0] == '#'); // validate color format\n  },\n  editor: editorFactory({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.input.setAttribute('aria-label', 'Open color picker');\n      editor.input.classList.add('color-picker-editor');\n    },\n    afterInit(editor) {\n      const button = editor.hot.rootDocument.createElement('button');\n      button.textContent = 'Open color picker';\n      button.classList.add('color-picker-button');\n      editor.input.after(button);\n\n      editor.pickr = Pickr.create({\n        el: button,\n        theme: 'nano',\n        default: editor.input.value || '#000000',\n        autoReposition: false,\n        padding: 0,\n        components: {\n          preview: true,\n          hue: true,\n        }\n      });\n\n      // Collapse the Pickr trigger button so it doesn't add vertical space\n      // between the cell editor and the popup.\n      editor.pickr._root.root.style.height = '0';\n      editor.pickr._root.root.style.overflow = 'hidden';\n\n      editor.preventCloseElement = editor.pickr._root.app;\n\n      editor.pickr.on('change', (color) => {\n        if (color) {\n          const hex = color.toHEXA().toString();\n          editor.input.value = hex;\n        }\n      });\n\n      editor.pickr.on('hide', () => {\n        if (Date.now() - editor._openedAt < 400) {\n          editor.pickr.show();\n\n          return;\n        }\n        editor.finishEditing();\n      });\n    },\n    afterOpen(editor) {\n      editor._openedAt = Date.now();\n      editor.pickr.setColor(editor.input.value || '#000000');\n      editor.pickr.show();\n\n      // Pickr positions its popup relative to the trigger button with an\n      // internal offset. Override the top to sit flush below the cell.\n      // Use double-rAF to ensure Pickr's own positioning is complete.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const cellRect = editor.TD.getBoundingClientRect();\n\n          editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n        });\n      });\n    },\n    afterClose(editor) {\n      editor.pickr._root.app.classList.remove('visible');\n      editor.pickr.hide();\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    shortcuts: [\n      {\n        keys: [['Tab']],\n        callback: (editor) => {\n          editor.pickr.hide();\n        },\n      },\n    ],\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    {\n      data: 'id',\n      type: 'numeric',\n      width: 80,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'itemName',\n      type: 'text',\n      width: 200,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'color',\n      headerClassName: 'htLeft',\n      ...cellDefinition,\n    },\n    {\n      data: 'itemNo',\n      type: 'text',\n      width: 100,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 70,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'valueStock',\n      type: 'numeric',\n      width: 130,\n      headerClassName: 'htRight',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n    }`,\n}));\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n  }),\n  validator: (value, callback) => {\n    callback(value.length === 7 && value[0] == '#'); // validate color format\n  },\n  editor: editorFactory({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.input.setAttribute('aria-label', 'Open color picker');\n      editor.input.classList.add('color-picker-editor');\n    },\n    afterInit(editor) {\n      const button = editor.hot.rootDocument.createElement('button');\n      button.textContent = 'Open color picker';\n      button.classList.add('color-picker-button');\n      editor.input.after(button);\n\n      editor.pickr = Pickr.create({\n        el: button,\n        theme: 'nano',\n        default: editor.input.value || '#000000',\n        autoReposition: false,\n        padding: 0,\n        components: {\n          preview: true,\n          hue: true,\n        }\n      });\n\n      // Collapse the Pickr trigger button so it doesn't add vertical space\n      // between the cell editor and the popup.\n      editor.pickr._root.root.style.height = '0';\n      editor.pickr._root.root.style.overflow = 'hidden';\n\n      editor.preventCloseElement = editor.pickr._root.app;\n\n      editor.pickr.on('change', (color) => {\n        if (color) {\n          const hex = color.toHEXA().toString();\n          editor.input.value = hex;\n        }\n      });\n\n      editor.pickr.on('hide', () => {\n        if (Date.now() - editor._openedAt < 400) {\n          editor.pickr.show();\n\n          return;\n        }\n        editor.finishEditing();\n      });\n    },\n    afterOpen(editor) {\n      editor._openedAt = Date.now();\n      editor.pickr.setColor(editor.input.value || '#000000');\n      editor.pickr.show();\n\n      // Pickr positions its popup relative to the trigger button with an\n      // internal offset. Override the top to sit flush below the cell.\n      // Use double-rAF to ensure Pickr's own positioning is complete.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const cellRect = editor.TD.getBoundingClientRect();\n\n          editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n        });\n      });\n    },\n    afterClose(editor) {\n      editor.pickr._root.app.classList.remove('visible');\n      editor.pickr.hide();\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    shortcuts: [\n      {\n        keys: [['Tab']],\n        callback: (editor) => {\n          editor.pickr.hide();\n        },\n      },\n    ],\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    {\n      data: 'id',\n      type: 'numeric',\n      width: 80,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'itemName',\n      type: 'text',\n      width: 200,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'color',\n      headerClassName: 'htLeft',\n      ...cellDefinition,\n    },\n    {\n      data: 'itemNo',\n      type: 'text',\n      width: 100,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 70,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'valueStock',\n      type: 'numeric',\n      width: 130,\n      headerClassName: 'htRight',\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.ts.json
index e479d9c55..1eee95756 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport { CellProperties } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  }\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n  }`,\n}));\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ntype ColorPickerEditor = { input: HTMLInputElement; pickr: ReturnType<typeof Pickr.create>; preventCloseElement: HTMLElement };\n\nconst cellDefinition: Pick<CellProperties, 'renderer' | 'validator' | 'editor'> = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n  }),\n  validator: (value, callback) => {\n    callback(value.length === 7 && value[0] == '#'); // validate color format\n  },\n  editor: editorFactory<ColorPickerEditor>({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n      editor.input.setAttribute('aria-label', 'Open color picker');\n      editor.input.classList.add('color-picker-editor');\n    },\n    afterInit(editor) {\n      const button = editor.hot.rootDocument.createElement('button');\n      button.textContent = 'Open color picker';\n      button.classList.add('color-picker-button');\n      editor.input.after(button);\n\n      editor.pickr = Pickr.create({\n        el: button,\n        theme: 'nano',\n        default: editor.input.value || '#000000',\n        autoReposition: false,\n        padding: 0,\n        components: {\n          preview: true,\n          hue: true,\n        }\n      });\n\n      // Collapse the Pickr trigger button so it doesn't add vertical space\n      // between the cell editor and the popup.\n      editor.pickr._root.root.style.height = '0';\n      editor.pickr._root.root.style.overflow = 'hidden';\n\n      editor.preventCloseElement = editor.pickr._root.app;\n\n      editor.pickr.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n        if (color) {\n          const hex = color.toHEXA().toString();\n          editor.input.value = hex;\n        }\n      });\n\n      editor.pickr.on('hide', () => {\n        if (Date.now() - editor._openedAt < 400) {\n          editor.pickr.show();\n\n          return;\n        }\n        editor.finishEditing();\n      });\n    },\n    afterOpen(editor) {\n      editor._openedAt = Date.now();\n      editor.pickr.setColor(editor.input.value || '#000000');\n      editor.pickr.show();\n\n      // Pickr positions its popup relative to the trigger button with an\n      // internal offset. Override the top to sit flush below the cell.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const cellRect = editor.TD.getBoundingClientRect();\n\n          editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n        });\n      });\n    },\n    afterClose(editor) {\n      editor.pickr._root.app.classList.remove('visible');\n      editor.pickr.hide();\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    shortcuts: [\n      {\n        keys: [['Tab']],\n        callback: (editor) => {\n          editor.pickr.hide();\n        },\n      },\n    ],\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { \n      data: 'id', \n      type: 'numeric', \n      width: 80, \n      headerClassName: 'htLeft' \n    },\n    {\n      data: 'itemName',\n      type: 'text',\n      width: 200,\n      headerClassName: 'htLeft'\n    },\n    {\n      data: 'color',\n      headerClassName: 'htLeft',\n      ...cellDefinition,\n    },\n    {\n      data: 'itemNo',\n      type: 'text',\n      width: 100,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 70,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'valueStock',\n      type: 'numeric',\n      width: 130,\n      headerClassName: 'htRight',\n    },\n\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport { CellProperties } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  }\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n  }`,\n}));\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ntype ColorPickerEditor = { input: HTMLInputElement; pickr: ReturnType<typeof Pickr.create>; preventCloseElement: HTMLElement };\n\nconst cellDefinition: Pick<CellProperties, 'renderer' | 'validator' | 'editor'> = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n  }),\n  validator: (value, callback) => {\n    callback(value.length === 7 && value[0] == '#'); // validate color format\n  },\n  editor: editorFactory<ColorPickerEditor>({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n      editor.input.setAttribute('aria-label', 'Open color picker');\n      editor.input.classList.add('color-picker-editor');\n    },\n    afterInit(editor) {\n      const button = editor.hot.rootDocument.createElement('button');\n      button.textContent = 'Open color picker';\n      button.classList.add('color-picker-button');\n      editor.input.after(button);\n\n      editor.pickr = Pickr.create({\n        el: button,\n        theme: 'nano',\n        default: editor.input.value || '#000000',\n        autoReposition: false,\n        padding: 0,\n        components: {\n          preview: true,\n          hue: true,\n        }\n      });\n\n      // Collapse the Pickr trigger button so it doesn't add vertical space\n      // between the cell editor and the popup.\n      editor.pickr._root.root.style.height = '0';\n      editor.pickr._root.root.style.overflow = 'hidden';\n\n      editor.preventCloseElement = editor.pickr._root.app;\n\n      editor.pickr.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n        if (color) {\n          const hex = color.toHEXA().toString();\n          editor.input.value = hex;\n        }\n      });\n\n      editor.pickr.on('hide', () => {\n        if (Date.now() - editor._openedAt < 400) {\n          editor.pickr.show();\n\n          return;\n        }\n        editor.finishEditing();\n      });\n    },\n    afterOpen(editor) {\n      editor._openedAt = Date.now();\n      editor.pickr.setColor(editor.input.value || '#000000');\n      editor.pickr.show();\n\n      // Pickr positions its popup relative to the trigger button with an\n      // internal offset. Override the top to sit flush below the cell.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const cellRect = editor.TD.getBoundingClientRect();\n\n          editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n        });\n      });\n    },\n    afterClose(editor) {\n      editor.pickr._root.app.classList.remove('visible');\n      editor.pickr.hide();\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    shortcuts: [\n      {\n        keys: [['Tab']],\n        callback: (editor) => {\n          editor.pickr.hide();\n        },\n      },\n    ],\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { \n      data: 'id', \n      type: 'numeric', \n      width: 80, \n      headerClassName: 'htLeft' \n    },\n    {\n      data: 'itemName',\n      type: 'text',\n      width: 200,\n      headerClassName: 'htLeft'\n    },\n    {\n      data: 'color',\n      headerClassName: 'htLeft',\n      ...cellDefinition,\n    },\n    {\n      data: 'itemNo',\n      type: 'text',\n      width: 100,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 70,\n      headerClassName: 'htLeft',\n    },\n    {\n      data: 'valueStock',\n      type: 'numeric',\n      width: 130,\n      headerClassName: 'htRight',\n    },\n\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__react__example1.tsx.json
index 41f9d8afe..b7aceebed 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__color-picker__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface ColorPickerEditorInstance {\n  input: HTMLInputElement;\n  pickr: Pickr;\n  _openedAt: number;\n  preventCloseElement: HTMLElement;\n}\n\nconst colorPickerRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value as string}\"></span></span>`;\n});\n\nconst colorPickerValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(value.length === 7 && value[0] === '#');\n};\n\nconst colorPickerEditor = editorFactory<ColorPickerEditorInstance>({\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.input.setAttribute('aria-label', 'Open color picker');\n    editor.input.classList.add('color-picker-editor');\n  },\n  afterInit(editor) {\n    const button = editor.hot.rootDocument.createElement('button') as HTMLButtonElement;\n\n    button.textContent = 'Open color picker';\n    button.classList.add('color-picker-button');\n    editor.input.after(button);\n\n    editor.pickr = Pickr.create({\n      el: button,\n      theme: 'nano',\n      default: editor.input.value || '#000000',\n      autoReposition: false,\n      padding: 0,\n      components: {\n        preview: true,\n        hue: true,\n      },\n    });\n\n    (editor.pickr as any)._root.root.style.height = '0';\n    (editor.pickr as any)._root.root.style.overflow = 'hidden';\n\n    editor.preventCloseElement = (editor.pickr as any)._root.app;\n\n    editor.pickr.on('change', (color: Pickr.HSVaColor | null) => {\n      if (color) {\n        const hex = color.toHEXA().toString();\n\n        editor.input.value = hex;\n      }\n    });\n\n    editor.pickr.on('hide', () => {\n      if (Date.now() - editor._openedAt < 400) {\n        editor.pickr.show();\n\n        return;\n      }\n      editor.finishEditing();\n    });\n  },\n  afterOpen(editor) {\n    editor._openedAt = Date.now();\n    editor.pickr.setColor(editor.input.value || '#000000');\n    editor.pickr.show();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const cellRect = editor.TD.getBoundingClientRect();\n\n        (editor.pickr as any)._root.app.style.top = `${cellRect.bottom}px`;\n      });\n    });\n  },\n  afterClose(editor) {\n    (editor.pickr as any)._root.app.classList.remove('visible');\n    editor.pickr.hide();\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n  },\n  shortcuts: [\n    {\n      keys: [['Tab']],\n      callback: (editor) => {\n        editor.pickr.hide();\n      },\n    },\n  ],\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n  color?: string;\n}\n\nconst inputData: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n    }`,\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"id\" type=\"numeric\" width={80} headerClassName=\"htLeft\" />\n      <HotColumn data=\"itemName\" type=\"text\" width={200} headerClassName=\"htLeft\" />\n      <HotColumn\n        data=\"color\"\n        headerClassName=\"htLeft\"\n        hotRenderer={colorPickerRenderer}\n        hotEditor={colorPickerEditor}\n        validator={colorPickerValidator}\n      />\n      <HotColumn data=\"itemNo\" type=\"text\" width={100} headerClassName=\"htLeft\" />\n      <HotColumn data=\"cost\" type=\"numeric\" width={70} headerClassName=\"htLeft\" />\n      <HotColumn data=\"valueStock\" type=\"numeric\" width={130} headerClassName=\"htRight\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"@simonwep/pickr\": \"1.10.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface ColorPickerEditorInstance {\n  input: HTMLInputElement;\n  pickr: Pickr;\n  _openedAt: number;\n  preventCloseElement: HTMLElement;\n}\n\nconst colorPickerRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value as string}\"></span></span>`;\n});\n\nconst colorPickerValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(value.length === 7 && value[0] === '#');\n};\n\nconst colorPickerEditor = editorFactory<ColorPickerEditorInstance>({\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.input.setAttribute('aria-label', 'Open color picker');\n    editor.input.classList.add('color-picker-editor');\n  },\n  afterInit(editor) {\n    const button = editor.hot.rootDocument.createElement('button') as HTMLButtonElement;\n\n    button.textContent = 'Open color picker';\n    button.classList.add('color-picker-button');\n    editor.input.after(button);\n\n    editor.pickr = Pickr.create({\n      el: button,\n      theme: 'nano',\n      default: editor.input.value || '#000000',\n      autoReposition: false,\n      padding: 0,\n      components: {\n        preview: true,\n        hue: true,\n      },\n    });\n\n    (editor.pickr as any)._root.root.style.height = '0';\n    (editor.pickr as any)._root.root.style.overflow = 'hidden';\n\n    editor.preventCloseElement = (editor.pickr as any)._root.app;\n\n    editor.pickr.on('change', (color: Pickr.HSVaColor | null) => {\n      if (color) {\n        const hex = color.toHEXA().toString();\n\n        editor.input.value = hex;\n      }\n    });\n\n    editor.pickr.on('hide', () => {\n      if (Date.now() - editor._openedAt < 400) {\n        editor.pickr.show();\n\n        return;\n      }\n      editor.finishEditing();\n    });\n  },\n  afterOpen(editor) {\n    editor._openedAt = Date.now();\n    editor.pickr.setColor(editor.input.value || '#000000');\n    editor.pickr.show();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const cellRect = editor.TD.getBoundingClientRect();\n\n        (editor.pickr as any)._root.app.style.top = `${cellRect.bottom}px`;\n      });\n    });\n  },\n  afterClose(editor) {\n    (editor.pickr as any)._root.app.classList.remove('visible');\n    editor.pickr.hide();\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n  },\n  shortcuts: [\n    {\n      keys: [['Tab']],\n      callback: (editor) => {\n        editor.pickr.hide();\n      },\n    },\n  ],\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n  color?: string;\n}\n\nconst inputData: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n    }`,\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"id\" type=\"numeric\" width={80} headerClassName=\"htLeft\" />\n      <HotColumn data=\"itemName\" type=\"text\" width={200} headerClassName=\"htLeft\" />\n      <HotColumn\n        data=\"color\"\n        headerClassName=\"htLeft\"\n        hotRenderer={colorPickerRenderer}\n        hotEditor={colorPickerEditor}\n        validator={colorPickerValidator}\n      />\n      <HotColumn data=\"itemNo\" type=\"text\" width={100} headerClassName=\"htLeft\" />\n      <HotColumn data=\"cost\" type=\"numeric\" width={70} headerClassName=\"htLeft\" />\n      <HotColumn data=\"valueStock\" type=\"numeric\" width={130} headerClassName=\"htRight\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  box-sizing: border-box !important;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.pickr {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n  background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__colorful-picker__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__colorful-picker__react__example1.tsx.json
index 30238f2b2..62d314762 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__colorful-picker__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__colorful-picker__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Colorful Picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"react-colorful\": \"5.8.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { HexColorPicker } from 'react-colorful';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nexport const data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n  }`,\n}));\n/* end:skip-in-preview */\n\nconst colorCellRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n});\n\nconst colorValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(value.length === 7 && value[0] === '#'); // validate color format\n};\n\nexport const ColorPickerEditor = () => {\n  return (\n    <EditorComponent>\n      {({ value, setValue }) => (\n        <div className=\"color-picker-editor\">\n         <input className=\"color-picker-editor-input\" value={value} readOnly />\n         <div className=\"color-picker-editor-popover\">\n           <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />\n         </div>\n       </div>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"id\" type=\"numeric\" width={80} className=\"htLeft\" />\n      <HotColumn data=\"itemName\" type=\"text\" width={200} className=\"htLeft\" />\n      <HotColumn\n        data=\"color\"\n        width={120}\n        editor={ColorPickerEditor}\n        hotRenderer={colorCellRenderer}\n        validator={colorValidator}\n        className=\"htLeft\"\n      />\n      <HotColumn data=\"itemNo\" type=\"text\" width={100} className=\"htLeft\" />\n      <HotColumn data=\"cost\" type=\"numeric\" width={70} className=\"htLeft\" />\n      <HotColumn data=\"valueStock\" type=\"numeric\" width={130} className=\"htRight\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n}\n\n.color-picker-editor-popover {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  padding-top: 8px;\n}\n\n.color-picker-editor:focus {\n  outline: none;\n}\n\n.color-picker-editor-input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n}"},"docsPath":"recipes/cell-types/colorful-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Colorful Picker"],"guide":"recipes/cell-types/colorful-picker/colorful-picker.md","guideTitle":"Colorful Picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/colorful-picker","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Colorful Picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"react-colorful\": \"5.8.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { HexColorPicker } from 'react-colorful';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nexport const data = inputData.map((el) => ({\n  ...el,\n  // eslint-disable-next-line no-mixed-operators\n  color: `#${\n    // eslint-disable-next-line no-mixed-operators\n    Math.round(0x1000000 + 0xffffff * Math.random())\n      .toString(16)\n      .slice(1)\n      .toUpperCase()\n  }`,\n}));\n/* end:skip-in-preview */\n\nconst colorCellRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<span class=\"color-picker-cell\"><span class=\"color-picker-swatch\" style=\"background:${value}\"></span></span>`;\n});\n\nconst colorValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(value.length === 7 && value[0] === '#'); // validate color format\n};\n\nexport const ColorPickerEditor = () => {\n  return (\n    <EditorComponent>\n      {({ value, setValue }) => (\n        <div className=\"color-picker-editor\">\n         <input className=\"color-picker-editor-input\" value={value} readOnly />\n         <div className=\"color-picker-editor-popover\">\n           <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />\n         </div>\n       </div>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"id\" type=\"numeric\" width={80} className=\"htLeft\" />\n      <HotColumn data=\"itemName\" type=\"text\" width={200} className=\"htLeft\" />\n      <HotColumn\n        data=\"color\"\n        width={120}\n        editor={ColorPickerEditor}\n        hotRenderer={colorCellRenderer}\n        validator={colorValidator}\n        className=\"htLeft\"\n      />\n      <HotColumn data=\"itemNo\" type=\"text\" width={100} className=\"htLeft\" />\n      <HotColumn data=\"cost\" type=\"numeric\" width={70} className=\"htLeft\" />\n      <HotColumn data=\"valueStock\" type=\"numeric\" width={130} className=\"htRight\" />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.color-picker-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n}\n\n.color-picker-editor-popover {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  padding-top: 8px;\n}\n\n.color-picker-editor:focus {\n  outline: none;\n}\n\n.color-picker-editor-input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n}"},"docsPath":"recipes/cell-types/colorful-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Colorful Picker"],"guide":"recipes/cell-types/colorful-picker/colorful-picker.md","guideTitle":"Colorful Picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/colorful-picker","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback-react__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback-react__react__example1.tsx.json
index 809265385..b31c3ea9a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback-react__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback-react__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, ComponentProps, useCallback } from 'react';\nimport { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nexport const data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n\n/* end:skip-in-preview */\n\n\ntype EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;\n\nexport const FeedbackEditor = () => {\n  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);\n  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);\n  const onPrepare: EditorComponentProps['onPrepare'] = (_row, _column, _prop, _TD, _originalValue, cellProperties) => {\n    setConfig(cellProperties.config as string[]);\n  };\n\n  useEffect(() => {\n    setShortcuts([\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: ({value, setValue}, _event) => {\n          setValue(getNextValue(value));      \n          return false;\n        }\n      }, \n      {\n        keys: [['ArrowLeft']],\n        callback: ({value, setValue}, _event) => {\n          setValue(getPrevValue(value));     \n        }\n      }\n    ])\n  }, [config]);\n\n  const getNextValue = useCallback((value: string) => {\n    const index = config.indexOf(value);\n    return index === config.length - 1 ? config[0] : config[index + 1];\n  }, [config]);\n\n  const getPrevValue = useCallback((value: string) => {\n    const index = config.indexOf(value);\n    return index === 0 ? config[config.length - 1] : config[index - 1];\n  }, [config]);\n\n  return (\n    <EditorComponent<string> onPrepare={onPrepare} shortcuts={shortcuts}>\n      {({ value, setValue, finishEditing }) => (\n        <>\n          <div className=\"feedback-editor\">\n            {config.map((item, _index, _array) => (\n              <button\n                className={value === item ? 'active' : ''}\n                key={item}\n                onClick={() => {\n                  setValue(item);\n                  finishEditing();\n                }}\n                style={{\n                  width: 100 / _array.length + '%'\n                }}\n              >\n                {item}\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoRowSize={true}\n      rowHeaders={true}\n      autoWrapRow={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      width=\"100%\"\n      data={data}\n      colHeaders={['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status']}\n      headerClassName=\"htLeft\"\n    >\n      <HotColumn data=\"feature\" type=\"text\" width={200} />\n      <HotColumn data=\"category\" type=\"text\" width={90} />\n      <HotColumn data=\"priority\" type=\"text\" width={100} />\n      <HotColumn data=\"feedback\" type=\"text\" width={100} editor={FeedbackEditor} config={['👍', '👎', '🤷']} />\n      <HotColumn data=\"votes\" type=\"numeric\" width={60} />\n      <HotColumn data=\"status\" type=\"text\" width={120} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".feedback-editor {\n    display: flex;\n    gap: var(--ht-gap, 4px);\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box !important;\n    padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n    background-color: var(--ht-cell-editor-background-color, #ffffff);\n    box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n      var(--ht-cell-editor-border-color, #1a42e8),\n      0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n      var(--ht-cell-editor-shadow-color, transparent);\n    border: none;\n    border-radius: 0;\n  }\n  \n  .feedback-editor button {\n    background: var(--ht-background-color, #ffffff);\n    color: var(--ht-foreground-color, #000000);\n    border: 1px solid var(--ht-border-color, #e0e0e0);\n    border-radius: var(--ht-border-radius, 4px);\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    width: 33%;\n    font-size: var(--ht-font-size, 14px);\n    text-align: center;\n    cursor: pointer;\n  }\n  \n  .feedback-editor button:hover {\n    background: var(--ht-border-color, #e0e0e0);\n  }\n  \n  .feedback-editor button.active,\n  .feedback-editor button.active:hover {\n    background: var(--ht-accent-color, #1a42e8);\n    color: #ffffff;\n    border-color: var(--ht-accent-color, #1a42e8);\n  }"},"docsPath":"recipes/cell-types/feedback-react/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback-react/feedback-react.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback-react","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, ComponentProps, useCallback } from 'react';\nimport { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nexport const data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n\n/* end:skip-in-preview */\n\n\ntype EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;\n\nexport const FeedbackEditor = () => {\n  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);\n  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);\n  const onPrepare: EditorComponentProps['onPrepare'] = (_row, _column, _prop, _TD, _originalValue, cellProperties) => {\n    setConfig(cellProperties.config as string[]);\n  };\n\n  useEffect(() => {\n    setShortcuts([\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: ({value, setValue}, _event) => {\n          setValue(getNextValue(value));      \n          return false;\n        }\n      }, \n      {\n        keys: [['ArrowLeft']],\n        callback: ({value, setValue}, _event) => {\n          setValue(getPrevValue(value));     \n        }\n      }\n    ])\n  }, [config]);\n\n  const getNextValue = useCallback((value: string) => {\n    const index = config.indexOf(value);\n    return index === config.length - 1 ? config[0] : config[index + 1];\n  }, [config]);\n\n  const getPrevValue = useCallback((value: string) => {\n    const index = config.indexOf(value);\n    return index === 0 ? config[config.length - 1] : config[index - 1];\n  }, [config]);\n\n  return (\n    <EditorComponent<string> onPrepare={onPrepare} shortcuts={shortcuts}>\n      {({ value, setValue, finishEditing }) => (\n        <>\n          <div className=\"feedback-editor\">\n            {config.map((item, _index, _array) => (\n              <button\n                className={value === item ? 'active' : ''}\n                key={item}\n                onClick={() => {\n                  setValue(item);\n                  finishEditing();\n                }}\n                style={{\n                  width: 100 / _array.length + '%'\n                }}\n              >\n                {item}\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      autoRowSize={true}\n      rowHeaders={true}\n      autoWrapRow={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      width=\"100%\"\n      data={data}\n      colHeaders={['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status']}\n      headerClassName=\"htLeft\"\n    >\n      <HotColumn data=\"feature\" type=\"text\" width={200} />\n      <HotColumn data=\"category\" type=\"text\" width={90} />\n      <HotColumn data=\"priority\" type=\"text\" width={100} />\n      <HotColumn data=\"feedback\" type=\"text\" width={100} editor={FeedbackEditor} config={['👍', '👎', '🤷']} />\n      <HotColumn data=\"votes\" type=\"numeric\" width={60} />\n      <HotColumn data=\"status\" type=\"text\" width={120} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".feedback-editor {\n    display: flex;\n    gap: var(--ht-gap, 4px);\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box !important;\n    padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n    background-color: var(--ht-cell-editor-background-color, #ffffff);\n    box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n      var(--ht-cell-editor-border-color, #1a42e8),\n      0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n      var(--ht-cell-editor-shadow-color, transparent);\n    border: none;\n    border-radius: 0;\n  }\n  \n  .feedback-editor button {\n    background: var(--ht-background-color, #ffffff);\n    color: var(--ht-foreground-color, #000000);\n    border: 1px solid var(--ht-border-color, #e0e0e0);\n    border-radius: var(--ht-border-radius, 4px);\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    width: 33%;\n    font-size: var(--ht-font-size, 14px);\n    text-align: center;\n    cursor: pointer;\n  }\n  \n  .feedback-editor button:hover {\n    background: var(--ht-border-color, #e0e0e0);\n  }\n  \n  .feedback-editor button.active,\n  .feedback-editor button.active:hover {\n    background: var(--ht-accent-color, #1a42e8);\n    color: #ffffff;\n    border-color: var(--ht-accent-color, #1a42e8);\n  }"},"docsPath":"recipes/cell-types/feedback-react/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback-react/feedback-react.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback-react","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__angular__example1.ts.json
index 747e91027..00e782af2 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-feedback></example1-feedback>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotCellEditorAdvancedComponent, KeyboardShortcutConfig, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  selector: 'example1-feedback-editor',\n  template: `\n    <div class=\"feedback-editor\">\n      @for (option of config; track option) {\n        <button [class.active]=\"option === getValue()\" (click)=\"onClick(option)\">{{ option }}</button>\n      }\n    </div>\n  `,\n})\nexport class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override config = ['👍', '👎', '🤷'];\n  override value = '👍';\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['ArrowRight'], ['Tab']],\n      callback: (_editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === this.config.length - 1 ? 0 : index + 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n        return false;\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (_editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === 0 ? this.config.length - 1 : index - 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onClick(option: string): void {\n    this.setValue(option);\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-feedback',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n    columns: [\n      { data: 'feature', type: 'text', width: 200 },\n      { data: 'category', type: 'text', width: 90 },\n      { data: 'priority', type: 'text', width: 100 },\n      { data: 'feedback', width: 100, editor: FeedbackEditorComponent },\n      { data: 'votes', type: 'numeric', width: 60 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-feedback></example1-feedback>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotCellEditorAdvancedComponent, KeyboardShortcutConfig, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  selector: 'example1-feedback-editor',\n  template: `\n    <div class=\"feedback-editor\">\n      @for (option of config; track option) {\n        <button [class.active]=\"option === getValue()\" (click)=\"onClick(option)\">{{ option }}</button>\n      }\n    </div>\n  `,\n})\nexport class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override config = ['👍', '👎', '🤷'];\n  override value = '👍';\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['ArrowRight'], ['Tab']],\n      callback: (_editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === this.config.length - 1 ? 0 : index + 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n        return false;\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (_editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === 0 ? this.config.length - 1 : index - 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onClick(option: string): void {\n    this.setValue(option);\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-feedback',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n    columns: [\n      { data: 'feature', type: 'text', width: 200 },\n      { data: 'category', type: 'text', width: 90 },\n      { data: 'priority', type: 'text', width: 100 },\n      { data: 'feedback', width: 100, editor: FeedbackEditorComponent },\n      { data: 'votes', type: 'numeric', width: 60 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.js.json
index 50b2f7557..0d5029833 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  editor: editorFactory({\n    config: ['👍', '👎', '🤷'],\n    value: '👍',\n    shortcuts: [\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n\n          return false; // Prevent default tabbing behavior\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map((option) => `<button class=\"${editor.value === option ? 'active' : ''}\">${option}</button>`)\n        .join('');\n    },\n    init: (editor) => {\n      editor.input = document.createElement('DIV');\n      editor.input.classList.add('feedback-editor');\n      editor._openedAt = 0;\n      editor.input.addEventListener('click', (event) => {\n        // Ignore synthetic click events that Android fires right after the editor\n        // opens — they land on the button that just appeared at the touch position.\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue, cellProperties }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', cellDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  autoWrapRow: true,\n  height: 'auto',\n  width: '100%',\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'feature', type: 'text', width: 200 },\n    { data: 'category', type: 'text', width: 90 },\n    { data: 'priority', type: 'text', width: 100 },\n    { data: 'feedback', width: 100, type: 'feedback' },\n    { data: 'votes', type: 'numeric', width: 60 },\n    { data: 'status', type: 'text', width: 120 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  editor: editorFactory({\n    config: ['👍', '👎', '🤷'],\n    value: '👍',\n    shortcuts: [\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n\n          return false; // Prevent default tabbing behavior\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map((option) => `<button class=\"${editor.value === option ? 'active' : ''}\">${option}</button>`)\n        .join('');\n    },\n    init: (editor) => {\n      editor.input = document.createElement('DIV');\n      editor.input.classList.add('feedback-editor');\n      editor._openedAt = 0;\n      editor.input.addEventListener('click', (event) => {\n        // Ignore synthetic click events that Android fires right after the editor\n        // opens — they land on the button that just appeared at the touch position.\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue, cellProperties }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', cellDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  autoWrapRow: true,\n  height: 'auto',\n  width: '100%',\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'feature', type: 'text', width: 200 },\n    { data: 'category', type: 'text', width: 90 },\n    { data: 'priority', type: 'text', width: 100 },\n    { data: 'feedback', width: 100, type: 'feedback' },\n    { data: 'votes', type: 'numeric', width: 60 },\n    { data: 'status', type: 'text', width: 120 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.ts.json
index 5df4f38d1..32a43cbb0 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { BaseEditor } from \"handsontable/editors/baseEditor\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { registerCellType } from 'handsontable/cellTypes';\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nconst data = [\n  { feature: \"Dark Mode\", category: \"UI\", priority: \"High\", feedback: \"👍\", votes: 124, status: \"Planned\" },\n  { feature: \"Bulk Edit\", category: \"Core\", priority: \"High\", feedback: \"👍\", votes: 98, status: \"In Progress\" },\n  { feature: \"AI Suggestions\", category: \"Beta\", priority: \"Medium\", feedback: \"🤷\", votes: 45, status: \"Research\" },\n  { feature: \"Offline Mode\", category: \"Infra\", priority: \"Low\", feedback: \"👎\", votes: 12, status: \"Backlog\" },\n];\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  editor: editorFactory<\n    { input: HTMLDivElement; value: string; config: string[] }\n  >({\n    config: [\"👍\", \"👎\", \"🤷\"],\n    value: \"👍\",\n    shortcuts: [\n      {\n        keys: [[\"ArrowRight\"], [\"Tab\"]],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n          return false; // Prevent default tabbing behavior\n        },\n      },\n      {\n        keys: [[\"ArrowLeft\"]],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map(\n          (option) =>\n            `<button class=\"${editor.value === option ? \"active\" : \"\"}\">${option}</button>`,\n        )\n        .join(\"\");\n    },\n    init: (editor) => {\n      editor.input = document.createElement(\"DIV\") as HTMLDivElement;\n      editor.input.classList.add(\"feedback-editor\");\n      editor._openedAt = 0;\n      editor.input.addEventListener(\"click\", (event) => {\n        // Ignore synthetic click events that Android fires right after the editor\n        // opens — they land on the button that just appeared at the touch position.\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue, cellProperties }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', cellDefinition as BaseEditor);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: [\"Feature\", \"Category\", \"Priority\", \"Feedback\", \"Votes\", \"Status\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  autoWrapRow: true,\n  height: \"auto\",\n  width: \"100%\",\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"feature\", type: \"text\", width: 200 },\n    { data: \"category\", type: \"text\", width: 90 },\n    { data: \"priority\", type: \"text\", width: 100 },\n    { data: \"feedback\", width: 100, type: \"feedback\" },\n    { data: \"votes\", type: \"numeric\", width: 60 },\n    { data: \"status\", type: \"text\", width: 120 },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { BaseEditor } from \"handsontable/editors/baseEditor\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { registerCellType } from 'handsontable/cellTypes';\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nconst data = [\n  { feature: \"Dark Mode\", category: \"UI\", priority: \"High\", feedback: \"👍\", votes: 124, status: \"Planned\" },\n  { feature: \"Bulk Edit\", category: \"Core\", priority: \"High\", feedback: \"👍\", votes: 98, status: \"In Progress\" },\n  { feature: \"AI Suggestions\", category: \"Beta\", priority: \"Medium\", feedback: \"🤷\", votes: 45, status: \"Research\" },\n  { feature: \"Offline Mode\", category: \"Infra\", priority: \"Low\", feedback: \"👎\", votes: 12, status: \"Backlog\" },\n];\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  editor: editorFactory<\n    { input: HTMLDivElement; value: string; config: string[] }\n  >({\n    config: [\"👍\", \"👎\", \"🤷\"],\n    value: \"👍\",\n    shortcuts: [\n      {\n        keys: [[\"ArrowRight\"], [\"Tab\"]],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n          return false; // Prevent default tabbing behavior\n        },\n      },\n      {\n        keys: [[\"ArrowLeft\"]],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map(\n          (option) =>\n            `<button class=\"${editor.value === option ? \"active\" : \"\"}\">${option}</button>`,\n        )\n        .join(\"\");\n    },\n    init: (editor) => {\n      editor.input = document.createElement(\"DIV\") as HTMLDivElement;\n      editor.input.classList.add(\"feedback-editor\");\n      editor._openedAt = 0;\n      editor.input.addEventListener(\"click\", (event) => {\n        // Ignore synthetic click events that Android fires right after the editor\n        // opens — they land on the button that just appeared at the touch position.\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue, cellProperties }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', cellDefinition as BaseEditor);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: [\"Feature\", \"Category\", \"Priority\", \"Feedback\", \"Votes\", \"Status\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  autoWrapRow: true,\n  height: \"auto\",\n  width: \"100%\",\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"feature\", type: \"text\", width: 200 },\n    { data: \"category\", type: \"text\", width: 90 },\n    { data: \"priority\", type: \"text\", width: 100 },\n    { data: \"feedback\", width: 100, type: \"feedback\" },\n    { data: \"votes\", type: \"numeric\", width: 60 },\n    { data: \"status\", type: \"text\", width: 120 },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__react__example1.tsx.json
index 155d3bc14..d550ed88a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__feedback__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n\ninterface FeedbackEditorInstance {\n  input: HTMLDivElement;\n  value: string;\n  config: string[];\n  _openedAt: number;\n}\n\nconst feedbackCellDefinition: Pick<CellProperties, 'renderer' | 'validator' | 'editor'> = {\n  editor: editorFactory<FeedbackEditorInstance>({\n    config: ['👍', '👎', '🤷'],\n    value: '👍',\n    shortcuts: [\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n\n          return false;\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map(\n          (option) =>\n            `<button class=\"${editor.value === option ? 'active' : ''}\">${option}</button>`,\n        )\n        .join('');\n    },\n    init: (editor) => {\n      editor.input = document.createElement('DIV') as HTMLDivElement;\n      editor.input.classList.add('feedback-editor');\n      editor._openedAt = 0;\n      editor.input.addEventListener('click', (event) => {\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', feedbackCellDefinition);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status']}\n      autoRowSize={true}\n      rowHeaders={true}\n      autoWrapRow={true}\n      height=\"auto\"\n      width=\"100%\"\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"feature\" type=\"text\" width={200} />\n      <HotColumn data=\"category\" type=\"text\" width={90} />\n      <HotColumn data=\"priority\" type=\"text\" width={100} />\n      <HotColumn data=\"feedback\" type=\"feedback\" width={100} />\n      <HotColumn data=\"votes\" type=\"numeric\" width={60} />\n      <HotColumn data=\"status\" type=\"text\" width={120} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Feedback · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n/* end:skip-in-preview */\n\ninterface FeedbackEditorInstance {\n  input: HTMLDivElement;\n  value: string;\n  config: string[];\n  _openedAt: number;\n}\n\nconst feedbackCellDefinition: Pick<CellProperties, 'renderer' | 'validator' | 'editor'> = {\n  editor: editorFactory<FeedbackEditorInstance>({\n    config: ['👍', '👎', '🤷'],\n    value: '👍',\n    shortcuts: [\n      {\n        keys: [['ArrowRight'], ['Tab']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === editor.config.length - 1 ? 0 : index + 1;\n          editor.setValue(editor.config[index]);\n\n          return false;\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          let index = editor.config.indexOf(editor.value);\n\n          index = index === 0 ? editor.config.length - 1 : index - 1;\n          editor.setValue(editor.config[index]);\n        },\n      },\n    ],\n    render: (editor) => {\n      editor.input.innerHTML = editor.config\n        .map(\n          (option) =>\n            `<button class=\"${editor.value === option ? 'active' : ''}\">${option}</button>`,\n        )\n        .join('');\n    },\n    init: (editor) => {\n      editor.input = document.createElement('DIV') as HTMLDivElement;\n      editor.input.classList.add('feedback-editor');\n      editor._openedAt = 0;\n      editor.input.addEventListener('click', (event) => {\n        if (Date.now() - editor._openedAt < 300) {\n          return;\n        }\n        if (event.target instanceof HTMLButtonElement) {\n          editor.setValue(event.target.innerText);\n          editor.finishEditing();\n        }\n      });\n      editor.render(editor);\n    },\n    afterOpen: (editor) => {\n      editor._openedAt = Date.now();\n    },\n    beforeOpen: (editor, { originalValue }) => {\n      editor.setValue(originalValue);\n    },\n  }),\n};\n\nregisterCellType('feedback', feedbackCellDefinition);\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status']}\n      autoRowSize={true}\n      rowHeaders={true}\n      autoWrapRow={true}\n      height=\"auto\"\n      width=\"100%\"\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"feature\" type=\"text\" width={200} />\n      <HotColumn data=\"category\" type=\"text\" width={90} />\n      <HotColumn data=\"priority\" type=\"text\" width={100} />\n      <HotColumn data=\"feedback\" type=\"feedback\" width={100} />\n      <HotColumn data=\"votes\" type=\"numeric\" width={60} />\n      <HotColumn data=\"status\" type=\"text\" width={120} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  display: block;\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/feedback/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Feedback"],"guide":"recipes/cell-types/feedback/feedback.md","guideTitle":"Feedback","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__angular__example1.ts.json
index 327d52500..2e929c18d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-flatpickr></example1-flatpickr>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  GridSettings,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport { format, isDate, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n  standalone: true,\n  selector: 'example1-flatpickr-editor',\n  template: `<input #pickerInput class=\"flatpickr-editor\" type=\"text\" />`,\n  styles: [\n    `\n    :host {\n      width: 100%;\n      height: 100%;\n    }\n    .flatpickr-editor {\n      width: 100%;\n      height: 100%;\n      border: none;\n      box-sizing: border-box !important;\n      padding: 4px 8px;\n    }\n  `,\n  ],\n})\nexport class FlatpickrEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  @ViewChild('pickerInput', { static: true }) pickerInput!: ElementRef<HTMLInputElement>;\n  private fpInstance: ReturnType<typeof flatpickr> | null = null;\n\n  override afterOpen(): void {\n    this.fpInstance = flatpickr(this.pickerInput.nativeElement, {\n      dateFormat: 'Y-m-d',\n      disableMobile: true,\n      defaultDate: this.value || undefined,\n      onClose: () => {\n        this.finishEdit.emit();\n      },\n    });\n    (this.fpInstance as any).open?.();\n  }\n\n  override afterClose(): void {\n    (this.fpInstance as any)?.destroy?.();\n    this.fpInstance = null;\n  }\n\n  override onFocus(): void {\n    this.pickerInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-flatpickr-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<span>{{ formattedDate }}</span>`,\n})\nexport class FlatpickrRendererComponent extends HotCellRendererAdvancedComponent<\n  string,\n  { renderFormat: string }\n> {\n  get formattedDate(): string {\n    if (!this.value) return '';\n\n    try {\n      const d = parseISO(this.value);\n\n      return isDate(d) && isValid(d)\n        ? format(d, this.getProps().renderFormat || 'MM/dd/yyyy')\n        : this.value;\n    } catch {\n      return this.value;\n    }\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-flatpickr',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { product: 'Dashboard Pro', version: '3.2.0', releaseDate: '2025-03-15', status: 'Released' },\n    { product: 'Form Builder', version: '2.1.0', releaseDate: '2025-04-22', status: 'Released' },\n    { product: 'Chart Engine', version: '4.0.0', releaseDate: '2025-06-10', status: 'Beta' },\n    { product: 'Auth Module', version: '1.5.2', releaseDate: '2025-07-01', status: 'Released' },\n    { product: 'File Manager', version: '2.0.0', releaseDate: '2025-08-18', status: 'Planned' },\n    { product: 'Email Service', version: '3.1.0', releaseDate: '2025-09-05', status: 'Released' },\n    { product: 'Search Index', version: '1.2.0', releaseDate: '2025-10-12', status: 'Beta' },\n    { product: 'Cache Layer', version: '2.3.1', releaseDate: '2025-11-28', status: 'Planned' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'product', type: 'text', width: 200 },\n      { data: 'version', type: 'text', width: 80 },\n      {\n        data: 'releaseDate',\n        width: 130,\n        allowInvalid: false,\n        editor: FlatpickrEditorComponent,\n        renderer: FlatpickrRendererComponent,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_EU,\n        },\n      } as any,\n      {\n        data: 'releaseDate',\n        width: 130,\n        allowInvalid: false,\n        editor: FlatpickrEditorComponent,\n        renderer: FlatpickrRendererComponent,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_US,\n        },\n      } as any,\n      { data: 'status', type: 'text', width: 130 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/flatpickr/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-flatpickr></example1-flatpickr>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  GridSettings,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport { format, isDate, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n  standalone: true,\n  selector: 'example1-flatpickr-editor',\n  template: `<input #pickerInput class=\"flatpickr-editor\" type=\"text\" />`,\n  styles: [\n    `\n    :host {\n      width: 100%;\n      height: 100%;\n    }\n    .flatpickr-editor {\n      width: 100%;\n      height: 100%;\n      border: none;\n      box-sizing: border-box !important;\n      padding: 4px 8px;\n    }\n  `,\n  ],\n})\nexport class FlatpickrEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  @ViewChild('pickerInput', { static: true }) pickerInput!: ElementRef<HTMLInputElement>;\n  private fpInstance: ReturnType<typeof flatpickr> | null = null;\n\n  override afterOpen(): void {\n    this.fpInstance = flatpickr(this.pickerInput.nativeElement, {\n      dateFormat: 'Y-m-d',\n      disableMobile: true,\n      defaultDate: this.value || undefined,\n      onClose: () => {\n        this.finishEdit.emit();\n      },\n    });\n    (this.fpInstance as any).open?.();\n  }\n\n  override afterClose(): void {\n    (this.fpInstance as any)?.destroy?.();\n    this.fpInstance = null;\n  }\n\n  override onFocus(): void {\n    this.pickerInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-flatpickr-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<span>{{ formattedDate }}</span>`,\n})\nexport class FlatpickrRendererComponent extends HotCellRendererAdvancedComponent<\n  string,\n  { renderFormat: string }\n> {\n  get formattedDate(): string {\n    if (!this.value) return '';\n\n    try {\n      const d = parseISO(this.value);\n\n      return isDate(d) && isValid(d)\n        ? format(d, this.getProps().renderFormat || 'MM/dd/yyyy')\n        : this.value;\n    } catch {\n      return this.value;\n    }\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-flatpickr',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    { product: 'Dashboard Pro', version: '3.2.0', releaseDate: '2025-03-15', status: 'Released' },\n    { product: 'Form Builder', version: '2.1.0', releaseDate: '2025-04-22', status: 'Released' },\n    { product: 'Chart Engine', version: '4.0.0', releaseDate: '2025-06-10', status: 'Beta' },\n    { product: 'Auth Module', version: '1.5.2', releaseDate: '2025-07-01', status: 'Released' },\n    { product: 'File Manager', version: '2.0.0', releaseDate: '2025-08-18', status: 'Planned' },\n    { product: 'Email Service', version: '3.1.0', releaseDate: '2025-09-05', status: 'Released' },\n    { product: 'Search Index', version: '1.2.0', releaseDate: '2025-10-12', status: 'Beta' },\n    { product: 'Cache Layer', version: '2.3.1', releaseDate: '2025-11-28', status: 'Planned' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'product', type: 'text', width: 200 },\n      { data: 'version', type: 'text', width: 80 },\n      {\n        data: 'releaseDate',\n        width: 130,\n        allowInvalid: false,\n        editor: FlatpickrEditorComponent,\n        renderer: FlatpickrRendererComponent,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_EU,\n        },\n      } as any,\n      {\n        data: 'releaseDate',\n        width: 130,\n        allowInvalid: false,\n        editor: FlatpickrEditorComponent,\n        renderer: FlatpickrRendererComponent,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_US,\n        },\n      } as any,\n      { data: 'status', type: 'text', width: 130 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/flatpickr/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.js.json
index 150f60b6d..8dba64dd5 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  validator: (value, callback) => {\n    callback(!value || isValid(parseISO(value)));\n  },\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    const date = parseISO(value);\n\n    td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n  }),\n  editor: editorFactory({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.input.classList.add('flatpickr-editor');\n  \n      editor.flatpickr = flatpickr(editor.input, {\n        dateFormat: 'Y-m-d',\n        disableMobile: true,\n        onClose: () => {\n          editor.finishEditing();\n        },\n      });\n\n      editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n      /**\n       * Prepare dark theme stylesheet for dynamic loading.\n       */\n      editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK');\n      editor._darkThemeLink.rel = 'stylesheet';\n      editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n    },\n    afterClose(editor) {\n      editor.flatpickr.close();\n    },\n    afterOpen(editor) {\n      const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n      const head = editor.hot.rootDocument.head;\n\n      if (isDark && !editor._darkThemeLink.parentNode) {\n        head.appendChild(editor._darkThemeLink);\n      } else if (!isDark && editor._darkThemeLink.parentNode) {\n        head.removeChild(editor._darkThemeLink);\n      }\n\n      editor.flatpickr.open();\n    },\n    beforeOpen(editor, { cellProperties }) {\n      for (const key in cellProperties.flatpickrSettings) {\n        editor.flatpickr.set(key, cellProperties.flatpickrSettings[key]);\n      }\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n      editor.flatpickr.setDate(value ? new Date(value) : new Date());\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 200 },\n    { data: 'version', type: 'text', width: 80 },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_EU,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 1,\n        },\n      },\n    },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 0,\n        },\n      },\n    },\n    { data: 'status', type: 'text', width: 130 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  validator: (value, callback) => {\n    callback(!value || isValid(parseISO(value)));\n  },\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    const date = parseISO(value);\n\n    td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n  }),\n  editor: editorFactory({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.input.classList.add('flatpickr-editor');\n  \n      editor.flatpickr = flatpickr(editor.input, {\n        dateFormat: 'Y-m-d',\n        disableMobile: true,\n        onClose: () => {\n          editor.finishEditing();\n        },\n      });\n\n      editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n      /**\n       * Prepare dark theme stylesheet for dynamic loading.\n       */\n      editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK');\n      editor._darkThemeLink.rel = 'stylesheet';\n      editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n    },\n    afterClose(editor) {\n      editor.flatpickr.close();\n    },\n    afterOpen(editor) {\n      const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n      const head = editor.hot.rootDocument.head;\n\n      if (isDark && !editor._darkThemeLink.parentNode) {\n        head.appendChild(editor._darkThemeLink);\n      } else if (!isDark && editor._darkThemeLink.parentNode) {\n        head.removeChild(editor._darkThemeLink);\n      }\n\n      editor.flatpickr.open();\n    },\n    beforeOpen(editor, { cellProperties }) {\n      for (const key in cellProperties.flatpickrSettings) {\n        editor.flatpickr.set(key, cellProperties.flatpickrSettings[key]);\n      }\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n      editor.flatpickr.setDate(value ? new Date(value) : new Date());\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 200 },\n    { data: 'version', type: 'text', width: 80 },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_EU,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 1,\n        },\n      },\n    },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 0,\n        },\n      },\n    },\n    { data: 'status', type: 'text', width: 130 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.ts.json
index 30eebe55d..6a2f375f1 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ninterface FlatpickrEditorInstance {\n  input: HTMLInputElement;\n  flatpickr: flatpickr.Instance;\n  preventCloseElement: HTMLElement;\n  _darkThemeLink: HTMLLinkElement;\n}\n\nconst cellDefinition: Pick<\n  CellProperties,\n  'renderer' | 'validator' | 'editor'\n> = {\n  validator: (value, callback) => {\n    callback(!value || isValid(parseISO(value)));\n  },\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    const date = parseISO(value);\n\n    td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n  }),\n  editor: editorFactory<FlatpickrEditorInstance>({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n      editor.input.classList.add('flatpickr-editor');\n\n      editor.flatpickr = flatpickr(editor.input, {\n        dateFormat: 'Y-m-d',\n        disableMobile: true,\n        onClose: () => {\n          editor.finishEditing();\n        },\n      });\n\n      editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n      /**\n       * Prepare dark theme stylesheet for dynamic loading.\n       */\n      editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n      editor._darkThemeLink.rel = 'stylesheet';\n      editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n    },\n    afterClose(editor) {\n      editor.flatpickr.close();\n    },\n    afterOpen(editor) {\n      const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n      const head = editor.hot.rootDocument.head;\n\n      if (isDark && !editor._darkThemeLink.parentNode) {\n        head.appendChild(editor._darkThemeLink);\n      } else if (!isDark && editor._darkThemeLink.parentNode) {\n        head.removeChild(editor._darkThemeLink);\n      }\n\n      editor.flatpickr.open();\n    },\n    beforeOpen(editor, { cellProperties }) {\n      for (const key in cellProperties.flatpickrSettings) {\n        editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n      }\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n      editor.flatpickr.setDate(value ? new Date(value) : new Date());\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 200 },\n    { data: 'version', type: 'text', width: 80 },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_EU,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 1,\n        },\n      },\n    },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 0,\n        },\n      },\n    },\n    { data: 'status', type: 'text', width: 130 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ninterface FlatpickrEditorInstance {\n  input: HTMLInputElement;\n  flatpickr: flatpickr.Instance;\n  preventCloseElement: HTMLElement;\n  _darkThemeLink: HTMLLinkElement;\n}\n\nconst cellDefinition: Pick<\n  CellProperties,\n  'renderer' | 'validator' | 'editor'\n> = {\n  validator: (value, callback) => {\n    callback(!value || isValid(parseISO(value)));\n  },\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    const date = parseISO(value);\n\n    td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n  }),\n  editor: editorFactory<FlatpickrEditorInstance>({\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n      editor.input.classList.add('flatpickr-editor');\n\n      editor.flatpickr = flatpickr(editor.input, {\n        dateFormat: 'Y-m-d',\n        disableMobile: true,\n        onClose: () => {\n          editor.finishEditing();\n        },\n      });\n\n      editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n      /**\n       * Prepare dark theme stylesheet for dynamic loading.\n       */\n      editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n      editor._darkThemeLink.rel = 'stylesheet';\n      editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n    },\n    afterClose(editor) {\n      editor.flatpickr.close();\n    },\n    afterOpen(editor) {\n      const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n      const head = editor.hot.rootDocument.head;\n\n      if (isDark && !editor._darkThemeLink.parentNode) {\n        head.appendChild(editor._darkThemeLink);\n      } else if (!isDark && editor._darkThemeLink.parentNode) {\n        head.removeChild(editor._darkThemeLink);\n      }\n\n      editor.flatpickr.open();\n    },\n    beforeOpen(editor, { cellProperties }) {\n      for (const key in cellProperties.flatpickrSettings) {\n        editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n      }\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n      editor.flatpickr.setDate(value ? new Date(value) : new Date());\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 200 },\n    { data: 'version', type: 'text', width: 80 },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_EU,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 1,\n        },\n      },\n    },\n    {\n      data: 'releaseDate',\n      width: 130,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      flatpickrSettings: {\n        locale: {\n          firstDayOfWeek: 0,\n        },\n      },\n    },\n    { data: 'status', type: 'text', width: 130 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__react__example1.tsx.json
index 9fa01dd9a..f02234815 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__flatpickr__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n\ninterface FlatpickrEditorInstance {\n  input: HTMLInputElement;\n  flatpickr: flatpickr.Instance;\n  preventCloseElement: HTMLElement;\n  _darkThemeLink: HTMLLinkElement;\n}\n\nconst flatpickrValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(!value || isValid(parseISO(value)));\n};\n\nconst flatpickrRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const date = parseISO(value);\n\n  td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n});\n\nconst flatpickrEditor = editorFactory<FlatpickrEditorInstance>({\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.input.classList.add('flatpickr-editor');\n\n    editor.flatpickr = flatpickr(editor.input, {\n      dateFormat: 'Y-m-d',\n      disableMobile: true,\n      onClose: () => {\n        editor.finishEditing();\n      },\n    });\n\n    editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n    editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n    editor._darkThemeLink.rel = 'stylesheet';\n    editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n  },\n  afterClose(editor) {\n    editor.flatpickr.close();\n  },\n  afterOpen(editor) {\n    const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n    const head = editor.hot.rootDocument.head;\n\n    if (isDark && !editor._darkThemeLink.parentNode) {\n      head.appendChild(editor._darkThemeLink);\n    } else if (!isDark && editor._darkThemeLink.parentNode) {\n      head.removeChild(editor._darkThemeLink);\n    }\n\n    editor.flatpickr.open();\n  },\n  beforeOpen(editor, { cellProperties }) {\n    for (const key in cellProperties.flatpickrSettings) {\n      editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n    }\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n    editor.flatpickr.setDate(value ? new Date(value) : new Date());\n  },\n});\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={200} />\n      <HotColumn data=\"version\" type=\"text\" width={80} />\n      <HotColumn\n        data=\"releaseDate\"\n        width={130}\n        allowInvalid={false}\n        hotRenderer={flatpickrRenderer}\n        hotEditor={flatpickrEditor}\n        validator={flatpickrValidator}\n        renderFormat={DATE_FORMAT_EU}\n        flatpickrSettings={{ locale: { firstDayOfWeek: 1 } }}\n      />\n      <HotColumn\n        data=\"releaseDate\"\n        width={130}\n        allowInvalid={false}\n        hotRenderer={flatpickrRenderer}\n        hotEditor={flatpickrEditor}\n        validator={flatpickrValidator}\n        renderFormat={DATE_FORMAT_US}\n        flatpickrSettings={{ locale: { firstDayOfWeek: 0 } }}\n      />\n      <HotColumn data=\"status\" type=\"text\" width={130} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"date-fns\": \"4.4.0\",\n    \"flatpickr\": \"4.6.13\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    product: 'Dashboard Pro',\n    category: 'Analytics',\n    version: '3.2.0',\n    releaseDate: '2025-03-15',\n    status: 'Released',\n    downloads: 12450,\n  },\n  {\n    product: 'Form Builder',\n    category: 'Tools',\n    version: '2.1.0',\n    releaseDate: '2025-04-22',\n    status: 'Released',\n    downloads: 8320,\n  },\n  {\n    product: 'Chart Engine',\n    category: 'Analytics',\n    version: '4.0.0',\n    releaseDate: '2025-06-10',\n    status: 'Beta',\n    downloads: 3100,\n  },\n  {\n    product: 'Auth Module',\n    category: 'Security',\n    version: '1.5.2',\n    releaseDate: '2025-07-01',\n    status: 'Released',\n    downloads: 15600,\n  },\n  {\n    product: 'File Manager',\n    category: 'Storage',\n    version: '2.0.0',\n    releaseDate: '2025-08-18',\n    status: 'Planned',\n    downloads: 0,\n  },\n  {\n    product: 'Email Service',\n    category: 'Communication',\n    version: '3.1.0',\n    releaseDate: '2025-09-05',\n    status: 'Released',\n    downloads: 9870,\n  },\n  {\n    product: 'Search Index',\n    category: 'Tools',\n    version: '1.2.0',\n    releaseDate: '2025-10-12',\n    status: 'Beta',\n    downloads: 2450,\n  },\n  {\n    product: 'Cache Layer',\n    category: 'Infra',\n    version: '2.3.1',\n    releaseDate: '2025-11-28',\n    status: 'Planned',\n    downloads: 0,\n  },\n];\n/* end:skip-in-preview */\n\ninterface FlatpickrEditorInstance {\n  input: HTMLInputElement;\n  flatpickr: flatpickr.Instance;\n  preventCloseElement: HTMLElement;\n  _darkThemeLink: HTMLLinkElement;\n}\n\nconst flatpickrValidator = (value: string, callback: (valid: boolean) => void) => {\n  callback(!value || isValid(parseISO(value)));\n};\n\nconst flatpickrRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const date = parseISO(value);\n\n  td.innerText = value && isValid(date) ? format(date, cellProperties.renderFormat) : value || '';\n});\n\nconst flatpickrEditor = editorFactory<FlatpickrEditorInstance>({\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.input.classList.add('flatpickr-editor');\n\n    editor.flatpickr = flatpickr(editor.input, {\n      dateFormat: 'Y-m-d',\n      disableMobile: true,\n      onClose: () => {\n        editor.finishEditing();\n      },\n    });\n\n    editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n    editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n    editor._darkThemeLink.rel = 'stylesheet';\n    editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n  },\n  afterClose(editor) {\n    editor.flatpickr.close();\n  },\n  afterOpen(editor) {\n    const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n    const head = editor.hot.rootDocument.head;\n\n    if (isDark && !editor._darkThemeLink.parentNode) {\n      head.appendChild(editor._darkThemeLink);\n    } else if (!isDark && editor._darkThemeLink.parentNode) {\n      head.removeChild(editor._darkThemeLink);\n    }\n\n    editor.flatpickr.open();\n  },\n  beforeOpen(editor, { cellProperties }) {\n    for (const key in cellProperties.flatpickrSettings) {\n      editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n    }\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n    editor.flatpickr.setDate(value ? new Date(value) : new Date());\n  },\n});\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={200} />\n      <HotColumn data=\"version\" type=\"text\" width={80} />\n      <HotColumn\n        data=\"releaseDate\"\n        width={130}\n        allowInvalid={false}\n        hotRenderer={flatpickrRenderer}\n        hotEditor={flatpickrEditor}\n        validator={flatpickrValidator}\n        renderFormat={DATE_FORMAT_EU}\n        flatpickrSettings={{ locale: { firstDayOfWeek: 1 } }}\n      />\n      <HotColumn\n        data=\"releaseDate\"\n        width={130}\n        allowInvalid={false}\n        hotRenderer={flatpickrRenderer}\n        hotEditor={flatpickrEditor}\n        validator={flatpickrValidator}\n        renderFormat={DATE_FORMAT_US}\n        flatpickrSettings={{ locale: { firstDayOfWeek: 0 } }}\n      />\n      <HotColumn data=\"status\" type=\"text\" width={130} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".flatpickr-editor {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n  border: none !important;\n}\n\n.flatpickr-editor.active {\n  box-shadow: none;\n  background-color: transparent;\n  border-radius: 0 !important;\n  border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json
index 38e2aa165..28abca9d8 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule,\n} from '@handsontable/angular-wrapper';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst colorValidator = (value: string): boolean => {\n  return /^#[0-9A-Fa-f]{6}$/.test(value);\n};\n\n@Component({\n  selector: 'example1-color-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"color-picker-cell\">\n      <span class=\"color-picker-swatch\" [style.background]=\"value\"></span>\n    </div>`,\n  styles: `\n  :host {\n    height: 100%;\n    width: 100%;\n  }\n  .color-picker-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .color-picker-swatch {\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n  }\n  `,\n  standalone: true,\n  imports: [],\n})\nexport class ColorRendererComponent extends HotCellRendererAdvancedComponent<string> {}\n\n@Component({\n  selector: 'example1-color-picker-editor',\n  template: `\n    <input\n      class=\"color-picker-editor\"\n      type=\"color\"\n      [value]=\"value\"\n      (input)=\"onColorChange($event)\"\n    />\n  `,\n  styles: `\n  :host {\n    height: 100%;\n    width: 100%;\n  }\n  .color-picker-editor {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box !important;\n    cursor: pointer;\n    border: none;\n    outline: none;\n  }\n  `,\n  standalone: true,\n  imports: [],\n})\nexport class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override afterClose(): void {\n    this.finishEdit.emit();\n  }\n\n  onColorChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.setValue(input.value);\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    // eslint-disable-next-line no-mixed-operators\n    color: `#${\n      // eslint-disable-next-line no-mixed-operators\n      Math.round(0x1000000 + 0xffffff * Math.random())\n        .toString(16)\n        .slice(1)\n        .toUpperCase()\n    }`,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n    columns: [\n      {\n        data: 'id',\n        type: 'numeric',\n        width: 80,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'itemName',\n        type: 'text',\n        width: 200,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'color',\n        headerClassName: 'htLeft',\n        editor: ColorPickerEditorComponent,\n        renderer: ColorRendererComponent,\n        validator: colorValidator,\n      },\n      {\n        data: 'itemNo',\n        type: 'text',\n        width: 100,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 70,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'valueStock',\n        type: 'numeric',\n        width: 130,\n        headerClassName: 'htRight',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/guide-color-picker-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/guide-color-picker-angular/guide-color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker-angular","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule,\n} from '@handsontable/angular-wrapper';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation Module',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst colorValidator = (value: string): boolean => {\n  return /^#[0-9A-Fa-f]{6}$/.test(value);\n};\n\n@Component({\n  selector: 'example1-color-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"color-picker-cell\">\n      <span class=\"color-picker-swatch\" [style.background]=\"value\"></span>\n    </div>`,\n  styles: `\n  :host {\n    height: 100%;\n    width: 100%;\n  }\n  .color-picker-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .color-picker-swatch {\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n  }\n  `,\n  standalone: true,\n  imports: [],\n})\nexport class ColorRendererComponent extends HotCellRendererAdvancedComponent<string> {}\n\n@Component({\n  selector: 'example1-color-picker-editor',\n  template: `\n    <input\n      class=\"color-picker-editor\"\n      type=\"color\"\n      [value]=\"value\"\n      (input)=\"onColorChange($event)\"\n    />\n  `,\n  styles: `\n  :host {\n    height: 100%;\n    width: 100%;\n  }\n  .color-picker-editor {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box !important;\n    cursor: pointer;\n    border: none;\n    outline: none;\n  }\n  `,\n  standalone: true,\n  imports: [],\n})\nexport class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override afterClose(): void {\n    this.finishEdit.emit();\n  }\n\n  onColorChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.setValue(input.value);\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    // eslint-disable-next-line no-mixed-operators\n    color: `#${\n      // eslint-disable-next-line no-mixed-operators\n      Math.round(0x1000000 + 0xffffff * Math.random())\n        .toString(16)\n        .slice(1)\n        .toUpperCase()\n    }`,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n    columns: [\n      {\n        data: 'id',\n        type: 'numeric',\n        width: 80,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'itemName',\n        type: 'text',\n        width: 200,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'color',\n        headerClassName: 'htLeft',\n        editor: ColorPickerEditorComponent,\n        renderer: ColorRendererComponent,\n        validator: colorValidator,\n      },\n      {\n        data: 'itemNo',\n        type: 'text',\n        width: 100,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 70,\n        headerClassName: 'htLeft',\n      },\n      {\n        data: 'valueStock',\n        type: 'numeric',\n        width: 130,\n        headerClassName: 'htRight',\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/guide-color-picker-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/guide-color-picker-angular/guide-color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker-angular","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json
index 4901aac8a..2ddaeac9e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Date picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"date-fns\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-guide-datepicker-angular></example1-guide-datepicker-angular>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject, ViewChild, ElementRef } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule,\n} from '@handsontable/angular-wrapper';\nimport { FormsModule } from '@angular/forms';\nimport { format, parse, isValid } from 'date-fns';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    restockDate: '2025-08-01',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    restockDate: '2025-09-15',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    restockDate: '2025-10-05',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    restockDate: '2025-11-10',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    restockDate: '2025-12-20',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    restockDate: '2026-01-25',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    restockDate: '2026-03-02',\n  },\n];\n\n@Component({\n  selector: 'example1-date-editor',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <input\n      type=\"date\"\n      [(ngModel)]=\"dateValue\"\n      #editorInput\n      (change)=\"onDateChange()\"\n      style=\"width: 100%; height: 100%; padding: 8px; border: 2px solid #4CAF50; border-radius: 4px; font-size: 14px; box-sizing: border-box;\"\n    />\n  `,\n  standalone: true,\n  imports: [FormsModule],\n})\nexport class DateEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  dateValue: string = '';\n\n  @ViewChild('editorInput', { static: true })\n  protected editorInput!: ElementRef<HTMLInputElement>;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  override afterOpen(): void {\n    setTimeout(() => {\n      this.editorInput.nativeElement.showPicker?.();\n    }, 0);\n  }\n\n  override beforeOpen(_: any, { originalValue }: any) {\n    if (originalValue) {\n      try {\n        let parsedDate: Date;\n\n        // Try to parse MM/DD/YYYY format\n        if (typeof originalValue === 'string' && originalValue.includes('/')) {\n          parsedDate = parse(originalValue, 'MM/dd/yyyy', new Date());\n        }\n        // Try to parse YYYY-MM-DD format\n        else if (typeof originalValue === 'string' && originalValue.includes('-')) {\n          parsedDate = parse(originalValue, 'yyyy-MM-dd', new Date());\n        }\n        // Fallback to generic date parsing\n        else {\n          parsedDate = new Date(originalValue);\n        }\n\n        if (isValid(parsedDate)) {\n          // Format as YYYY-MM-DD for native input type='date'\n          this.dateValue = format(parsedDate, 'yyyy-MM-dd');\n        } else {\n          this.dateValue = '';\n        }\n      } catch (error) {\n        console.error('Error parsing date:', error);\n        this.dateValue = '';\n      }\n    } else {\n      this.dateValue = '';\n    }\n\n    this.cdr.detectChanges();\n  }\n\n  override afterClose(): void {\n    this.finishEdit.emit();\n  }\n\n  onDateChange(): void {\n    if (this.dateValue) {\n      try {\n        // Parse YYYY-MM-DD from input\n        const parsedDate = parse(this.dateValue, 'yyyy-MM-dd', new Date());\n\n        if (isValid(parsedDate)) {\n          // Format as MM/DD/YYYY for Handsontable\n          const formattedDate = format(parsedDate, 'MM/dd/yyyy');\n          this.setValue(formattedDate);\n        }\n      } catch (error) {\n        console.error('Error formatting date:', error);\n      }\n    }\n  }\n\n  override onFocus(): void {\n    this.editorInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  selector: 'example1-date-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <div>\n    {{ formattedDate }}\n  </div>`,\n  standalone: true,\n  imports: [],\n})\nexport class DateRendererComponent extends HotCellRendererAdvancedComponent<string, { renderFormat: string }> {\n  get formattedDate(): string {\n    return format(new Date(this.value), this.getProps().renderFormat);\n  }\n}\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n  selector: 'example1-guide-datepicker-angular',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    stars: Math.floor(Math.random() * 5) + 1,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Restock Date EU', 'Restock Date US'],\n    columns: [\n      { data: 'id', type: 'numeric' },\n      {\n        data: 'itemName',\n        type: 'text',\n      },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_EU,\n        },\n        editor: DateEditorComponent,\n        renderer: DateRendererComponent,\n      },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_US,\n        },\n        editor: DateEditorComponent,\n        renderer: DateRendererComponent,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/guide-datepicker-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Date picker"],"guide":"recipes/cell-types/guide-datepicker-angular/guide-datepicker.md","guideTitle":"Date picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/datepicker","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Date picker · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"date-fns\": \"4.4.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-guide-datepicker-angular></example1-guide-datepicker-angular>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject, ViewChild, ElementRef } from '@angular/core';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  HotTableModule,\n} from '@handsontable/angular-wrapper';\nimport { FormsModule } from '@angular/forms';\nimport { format, parse, isValid } from 'date-fns';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    restockDate: '2025-08-01',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    restockDate: '2025-09-15',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    restockDate: '2025-10-05',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    restockDate: '2025-11-10',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    restockDate: '2025-12-20',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    restockDate: '2026-01-25',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    restockDate: '2026-03-02',\n  },\n];\n\n@Component({\n  selector: 'example1-date-editor',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <input\n      type=\"date\"\n      [(ngModel)]=\"dateValue\"\n      #editorInput\n      (change)=\"onDateChange()\"\n      style=\"width: 100%; height: 100%; padding: 8px; border: 2px solid #4CAF50; border-radius: 4px; font-size: 14px; box-sizing: border-box;\"\n    />\n  `,\n  standalone: true,\n  imports: [FormsModule],\n})\nexport class DateEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  dateValue: string = '';\n\n  @ViewChild('editorInput', { static: true })\n  protected editorInput!: ElementRef<HTMLInputElement>;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  override afterOpen(): void {\n    setTimeout(() => {\n      this.editorInput.nativeElement.showPicker?.();\n    }, 0);\n  }\n\n  override beforeOpen(_: any, { originalValue }: any) {\n    if (originalValue) {\n      try {\n        let parsedDate: Date;\n\n        // Try to parse MM/DD/YYYY format\n        if (typeof originalValue === 'string' && originalValue.includes('/')) {\n          parsedDate = parse(originalValue, 'MM/dd/yyyy', new Date());\n        }\n        // Try to parse YYYY-MM-DD format\n        else if (typeof originalValue === 'string' && originalValue.includes('-')) {\n          parsedDate = parse(originalValue, 'yyyy-MM-dd', new Date());\n        }\n        // Fallback to generic date parsing\n        else {\n          parsedDate = new Date(originalValue);\n        }\n\n        if (isValid(parsedDate)) {\n          // Format as YYYY-MM-DD for native input type='date'\n          this.dateValue = format(parsedDate, 'yyyy-MM-dd');\n        } else {\n          this.dateValue = '';\n        }\n      } catch (error) {\n        console.error('Error parsing date:', error);\n        this.dateValue = '';\n      }\n    } else {\n      this.dateValue = '';\n    }\n\n    this.cdr.detectChanges();\n  }\n\n  override afterClose(): void {\n    this.finishEdit.emit();\n  }\n\n  onDateChange(): void {\n    if (this.dateValue) {\n      try {\n        // Parse YYYY-MM-DD from input\n        const parsedDate = parse(this.dateValue, 'yyyy-MM-dd', new Date());\n\n        if (isValid(parsedDate)) {\n          // Format as MM/DD/YYYY for Handsontable\n          const formattedDate = format(parsedDate, 'MM/dd/yyyy');\n          this.setValue(formattedDate);\n        }\n      } catch (error) {\n        console.error('Error formatting date:', error);\n      }\n    }\n  }\n\n  override onFocus(): void {\n    this.editorInput.nativeElement.focus();\n  }\n}\n\n@Component({\n  selector: 'example1-date-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <div>\n    {{ formattedDate }}\n  </div>`,\n  standalone: true,\n  imports: [],\n})\nexport class DateRendererComponent extends HotCellRendererAdvancedComponent<string, { renderFormat: string }> {\n  get formattedDate(): string {\n    return format(new Date(this.value), this.getProps().renderFormat);\n  }\n}\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n  selector: 'example1-guide-datepicker-angular',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    stars: Math.floor(Math.random() * 5) + 1,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Restock Date EU', 'Restock Date US'],\n    columns: [\n      { data: 'id', type: 'numeric' },\n      {\n        data: 'itemName',\n        type: 'text',\n      },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_EU,\n        },\n        editor: DateEditorComponent,\n        renderer: DateRendererComponent,\n      },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        rendererProps: {\n          renderFormat: DATE_FORMAT_US,\n        },\n        editor: DateEditorComponent,\n        renderer: DateRendererComponent,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/guide-datepicker-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Date picker"],"guide":"recipes/cell-types/guide-datepicker-angular/guide-datepicker.md","guideTitle":"Date picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/datepicker","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json
index e906dc2d1..80444a946 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Feedback Editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotCellEditorAdvancedComponent, HotTableModule, KeyboardShortcutConfig } from '@handsontable/angular-wrapper';\n\nexport const inputData = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n\n@Component({\n  selector: 'example1-feedback-angular',\n  standalone: true,\n  imports: [],\n  template: `\n    <div class=\"feedback-editor\">\n      @for (option of config; track option) {\n      <button [class.active]=\"option === getValue()\" (click)=\"onClick(option)\">\n        {{ option }}\n      </button>\n      }\n    </div>\n  `,\n})\nexport class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override config = ['👍', '👎', '🤷'];\n  override value = '👍';\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['ArrowRight'], ['Tab']],\n      callback: (editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === this.config.length - 1 ? 0 : index + 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n\n        return false;\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === 0 ? this.config.length - 1 : index - 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onClick(option: string): void {\n    this.setValue(option);\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n    columns: [\n      { data: 'feature', type: 'text', width: 200 },\n      { data: 'category', type: 'text', width: 90 },\n      { data: 'priority', type: 'text', width: 100 },\n      {\n        data: 'feedback',\n        width: 100,\n        editor: FeedbackEditorComponent,\n        config: ['👍', '👎', '🤷'],\n      },\n      { data: 'votes', type: 'numeric', width: 60 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/guide-feedback-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback Editor"],"guide":"recipes/cell-types/guide-feedback-angular/guide-feedback.md","guideTitle":"Feedback Editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback-angular","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Feedback Editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotCellEditorAdvancedComponent, HotTableModule, KeyboardShortcutConfig } from '@handsontable/angular-wrapper';\n\nexport const inputData = [\n  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },\n  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },\n  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },\n  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },\n];\n\n@Component({\n  selector: 'example1-feedback-angular',\n  standalone: true,\n  imports: [],\n  template: `\n    <div class=\"feedback-editor\">\n      @for (option of config; track option) {\n      <button [class.active]=\"option === getValue()\" (click)=\"onClick(option)\">\n        {{ option }}\n      </button>\n      }\n    </div>\n  `,\n})\nexport class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override config = ['👍', '👎', '🤷'];\n  override value = '👍';\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['ArrowRight'], ['Tab']],\n      callback: (editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === this.config.length - 1 ? 0 : index + 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n\n        return false;\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        let index = this.config.indexOf(this.getValue());\n\n        index = index === 0 ? this.config.length - 1 : index - 1;\n        this.setValue(this.config[index]);\n        this.cdr.detectChanges();\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onClick(option: string): void {\n    this.setValue(option);\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],\n    columns: [\n      { data: 'feature', type: 'text', width: 200 },\n      { data: 'category', type: 'text', width: 90 },\n      { data: 'priority', type: 'text', width: 100 },\n      {\n        data: 'feedback',\n        width: 100,\n        editor: FeedbackEditorComponent,\n        config: ['👍', '👎', '🤷'],\n      },\n      { data: 'votes', type: 'numeric', width: 60 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".feedback-editor {\n  display: flex;\n  gap: var(--ht-gap, 4px);\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  border: none;\n  border-radius: 0;\n}\n\n.feedback-editor button {\n  background: var(--ht-background-color, #ffffff);\n  color: var(--ht-foreground-color, #000000);\n  border: 1px solid var(--ht-border-color, #e0e0e0);\n  border-radius: var(--ht-border-radius, 4px);\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 33%;\n  font-size: var(--ht-font-size, 14px);\n  text-align: center;\n  cursor: pointer;\n}\n\n.feedback-editor button:hover {\n  background: var(--ht-border-color, #e0e0e0);\n}\n\n.feedback-editor button.active,\n.feedback-editor button.active:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: #ffffff;\n  border-color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/guide-feedback-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Feedback Editor"],"guide":"recipes/cell-types/guide-feedback-angular/guide-feedback.md","guideTitle":"Feedback Editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/feedback-angular","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-rating-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-rating-angular__angular__example1.ts.json
index d60498c9a..14f8a5c5e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-rating-angular__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__guide-rating-angular__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Star Rating Editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotTableModule,\n  KeyboardShortcutConfig,\n  HotCellRendererAdvancedComponent,\n} from '@handsontable/angular-wrapper';\n\nexport const starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n  },\n];\n\n@Component({\n  selector: 'example1-guide-star-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"rating-cell\">\n      @for (star of stars; track $index) {\n        <span class=\"rating-star\" [class.active]=\"$index < value\" [innerHTML]=\"starSvgMarkup\"></span>\n      }\n    </div>`,\n  standalone: true,\n  imports: [],\n})\nexport class StarRendererComponent extends HotCellRendererAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n}\n\n@Component({\n  selector: 'example1-guide-star-editor',\n  standalone: true,\n  imports: [],\n  template: `\n    <div\n      class=\"rating-editor\"\n      (mouseover)=\"onMouseOver($event)\"\n      (mousedown)=\"onMouseDown()\"\n    >\n      @for (star of stars; track $index) {\n        <span\n          [attr.data-value]=\"$index + 1\"\n          class=\"rating-star\"\n          [class.active]=\"$index < getValue()\"\n          [class.current]=\"isCurrentStar($index)\"\n          [innerHTML]=\"starSvgMarkup\"\n        ></span>\n      }\n    </div>\n  `,\n})\nexport class StarEditorComponent extends HotCellEditorAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n\n  isCurrentStar(index: number): boolean {\n    return (index + 1) === parseInt(this.getValue()?.toString() ?? '0', 10);\n  }\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (editor, _event) => {\n        editor.setValue(_event.key);\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        if (parseInt(editor.value) < 5) {\n          editor.setValue(parseInt(editor.value) + 1);\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        if (parseInt(editor.value) > 1) {\n          editor.setValue(parseInt(editor.value) - 1);\n        }\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onMouseOver(event: MouseEvent): void {\n    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;\n    if (\n      star?.dataset['value'] &&\n      parseInt(this.getValue()?.toString() ?? '0', 10) !== parseInt(star.dataset['value'], 10)\n    ) {\n      this.setValue(parseInt(star.dataset['value'], 10));\n    }\n    this.cdr.detectChanges();\n  }\n\n  onMouseDown(): void {\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    stars: Math.floor(Math.random() * 5) + 1,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Stars Rating'],\n    columns: [\n      { data: 'id', type: 'numeric' },\n      {\n        data: 'itemName',\n        type: 'text',\n      },\n      {\n        data: 'stars',\n        width: 200,\n        renderer: StarRendererComponent,\n        editor: StarEditorComponent,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0);\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/guide-rating-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating Editor"],"guide":"recipes/cell-types/guide-rating-angular/guide-rating.md","guideTitle":"Star Rating Editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating-angular","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Star Rating Editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <app-root></app-root>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotTableModule,\n  KeyboardShortcutConfig,\n  HotCellRendererAdvancedComponent,\n} from '@handsontable/angular-wrapper';\n\nexport const starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nexport const inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n  },\n];\n\n@Component({\n  selector: 'example1-guide-star-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"rating-cell\">\n      @for (star of stars; track $index) {\n        <span class=\"rating-star\" [class.active]=\"$index < value\" [innerHTML]=\"starSvgMarkup\"></span>\n      }\n    </div>`,\n  standalone: true,\n  imports: [],\n})\nexport class StarRendererComponent extends HotCellRendererAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n}\n\n@Component({\n  selector: 'example1-guide-star-editor',\n  standalone: true,\n  imports: [],\n  template: `\n    <div\n      class=\"rating-editor\"\n      (mouseover)=\"onMouseOver($event)\"\n      (mousedown)=\"onMouseDown()\"\n    >\n      @for (star of stars; track $index) {\n        <span\n          [attr.data-value]=\"$index + 1\"\n          class=\"rating-star\"\n          [class.active]=\"$index < getValue()\"\n          [class.current]=\"isCurrentStar($index)\"\n          [innerHTML]=\"starSvgMarkup\"\n        ></span>\n      }\n    </div>\n  `,\n})\nexport class StarEditorComponent extends HotCellEditorAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n\n  isCurrentStar(index: number): boolean {\n    return (index + 1) === parseInt(this.getValue()?.toString() ?? '0', 10);\n  }\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (editor, _event) => {\n        editor.setValue(_event.key);\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        if (parseInt(editor.value) < 5) {\n          editor.setValue(parseInt(editor.value) + 1);\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        if (parseInt(editor.value) > 1) {\n          editor.setValue(parseInt(editor.value) - 1);\n        }\n      },\n    },\n  ];\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  onMouseOver(event: MouseEvent): void {\n    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;\n    if (\n      star?.dataset['value'] &&\n      parseInt(this.getValue()?.toString() ?? '0', 10) !== parseInt(star.dataset['value'], 10)\n    ) {\n      this.setValue(parseInt(star.dataset['value'], 10));\n    }\n    this.cdr.detectChanges();\n  }\n\n  onMouseDown(): void {\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n  readonly data = inputData.map((el) => ({\n    ...el,\n    stars: Math.floor(Math.random() * 5) + 1,\n  }));\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    manualColumnResize: true,\n    manualRowResize: true,\n    colHeaders: ['ID', 'Item Name', 'Stars Rating'],\n    columns: [\n      { data: 'id', type: 'numeric' },\n      {\n        data: 'itemName',\n        type: 'text',\n      },\n      {\n        data: 'stars',\n        width: 200,\n        renderer: StarRendererComponent,\n        editor: StarEditorComponent,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: {\n        license: NON_COMMERCIAL_LICENSE,\n      } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0);\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/guide-rating-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating Editor"],"guide":"recipes/cell-types/guide-rating-angular/guide-rating.md","guideTitle":"Star Rating Editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating-angular","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__angular__example1.ts.json
index 93b2dc84e..c92344f07 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-moment-date></example1-moment-date>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-moment-date',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      restockDate: '2025-08-01',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      restockDate: '2025-09-15',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      restockDate: '2025-10-05',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      restockDate: '2025-11-10',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      restockDate: '2025-12-20',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      restockDate: '2026-01-25',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    beforeChange: correctDatesBeforeChange,\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'restockDate',\n        type: 'moment-date',\n        width: 150,\n        // Display format, applied by `valueFormatter`. The stored value stays ISO.\n        renderFormat: 'MMM D, YYYY',\n        // Format tried first when correcting a pasted value.\n        inputFormat: 'MM/DD/YYYY',\n        correctFormat: true,\n      },\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/moment-date/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-moment-date></example1-moment-date>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-moment-date',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      restockDate: '2025-08-01',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      restockDate: '2025-09-15',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      restockDate: '2025-10-05',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      restockDate: '2025-11-10',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      restockDate: '2025-12-20',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      restockDate: '2026-01-25',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    beforeChange: correctDatesBeforeChange,\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'restockDate',\n        type: 'moment-date',\n        width: 150,\n        // Display format, applied by `valueFormatter`. The stored value stays ISO.\n        renderFormat: 'MMM D, YYYY',\n        // Format tried first when correcting a pasted value.\n        inputFormat: 'MM/DD/YYYY',\n        correctFormat: true,\n      },\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/moment-date/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.js.json
index 6ace64c7c..b19fc8a67 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n// Register all Handsontable's modules.\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    {\n        id: 640329,\n        itemName: 'Lunar Core',\n        itemNo: 'XJ-12',\n        leadEngineer: 'Ellen Ripley',\n        cost: 350000,\n        inStock: true,\n        category: 'Lander',\n        itemQuality: 87,\n        origin: '🇺🇸 USA',\n        quantity: 2,\n        valueStock: 700000,\n        repairable: false,\n        supplierName: 'TechNova',\n        restockDate: '2025-08-01',\n        operationalStatus: 'Awaiting Parts',\n    },\n    {\n        id: 863104,\n        itemName: 'Zero Thrusters',\n        itemNo: 'QL-54',\n        leadEngineer: 'Sam Bell',\n        cost: 450000,\n        inStock: false,\n        category: 'Propulsion',\n        itemQuality: 0,\n        origin: '🇩🇪 Germany',\n        quantity: 0,\n        valueStock: 0,\n        repairable: true,\n        supplierName: 'PropelMax',\n        restockDate: '2025-09-15',\n        operationalStatus: 'In Maintenance',\n    },\n    {\n        id: 395603,\n        itemName: 'EVA Suits',\n        itemNo: 'PM-67',\n        leadEngineer: 'Alex Rogan',\n        cost: 150000,\n        inStock: true,\n        category: 'Equipment',\n        itemQuality: 79,\n        origin: '🇮🇹 Italy',\n        quantity: 50,\n        valueStock: 7500000,\n        repairable: true,\n        supplierName: 'SuitCraft',\n        restockDate: '2025-10-05',\n        operationalStatus: 'Ready for Testing',\n    },\n    {\n        id: 679083,\n        itemName: 'Solar Panels',\n        itemNo: 'BW-09',\n        leadEngineer: 'Dave Bowman',\n        cost: 75000,\n        inStock: true,\n        category: 'Energy',\n        itemQuality: 95,\n        origin: '🇺🇸 USA',\n        quantity: 10,\n        valueStock: 750000,\n        repairable: false,\n        supplierName: 'SolarStream',\n        restockDate: '2025-11-10',\n        operationalStatus: 'Operational',\n    },\n    {\n        id: 912663,\n        itemName: 'Comm Array',\n        itemNo: 'ZR-56',\n        leadEngineer: 'Louise Banks',\n        cost: 125000,\n        inStock: false,\n        category: 'Communication',\n        itemQuality: 0,\n        origin: '🇯🇵 Japan',\n        quantity: 0,\n        valueStock: 0,\n        repairable: true,\n        supplierName: 'CommTech',\n        restockDate: '2025-12-20',\n        operationalStatus: 'Decommissioned',\n    },\n    {\n        id: 315806,\n        itemName: 'Habitat Dome',\n        itemNo: 'UJ-23',\n        leadEngineer: 'Dr. Ryan Stone',\n        cost: 1000000,\n        inStock: true,\n        category: 'Shelter',\n        itemQuality: 93,\n        origin: '🇨🇦 Canada',\n        quantity: 3,\n        valueStock: 3000000,\n        repairable: false,\n        supplierName: 'DomeInnovate',\n        restockDate: '2026-01-25',\n        operationalStatus: 'Operational',\n    },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n// Converts a loosely written date into ISO.\nconst toISODate = (value, inputFormat) => {\n    // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n    const fromInputFormat = moment(value, inputFormat, true);\n    if (fromInputFormat.isValid()) {\n        return fromInputFormat.format(ISO_FORMAT);\n    }\n    // Fall back to the browser's parsing for values that format cannot describe, such as\n    // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n    const nativeDate = new Date(value);\n    return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\nconst cellDateTypeDefinition = {\n    // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n    // check that warns when the underlying data is not ISO.\n    ...DateCellType,\n    // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n    // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n    valueFormatter: (value, cellProperties) => {\n        if (typeof value !== 'string' || value === '') {\n            return value;\n        }\n        const date = moment(value, ISO_FORMAT, true);\n        return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n    },\n};\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(changes) {\n    changes.forEach((change) => {\n        if (!change) {\n            return;\n        }\n        const [visualRow, prop, , newValue] = change;\n        const column = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (column === null) {\n            return;\n        }\n        const cellMeta = this.getCellMetaTransient(visualRow, column);\n        if (cellMeta.type !== 'moment-date' ||\n            cellMeta.correctFormat !== true ||\n            typeof newValue !== 'string' ||\n            newValue === '') {\n            return;\n        }\n        if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n            change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n        }\n    });\n}\nregisterCellType('moment-date', cellDateTypeDefinition);\n// Define configuration options for the Handsontable\nconst hotOptions = {\n    data,\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n        { data: 'itemName', type: 'text', width: 130 },\n        { data: 'category', type: 'text', width: 120 },\n        { data: 'leadEngineer', type: 'text', width: 150 },\n        {\n            data: 'restockDate',\n            type: 'moment-date',\n            width: 150,\n            // Display format, applied by `valueFormatter`. The stored value stays ISO.\n            renderFormat: 'MMM D, YYYY',\n            // Format tried first when correcting a pasted value.\n            inputFormat: 'MM/DD/YYYY',\n            correctFormat: true,\n        },\n        {\n            data: 'cost',\n            type: 'numeric',\n            width: 120,\n            className: 'htRight',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n    beforeChange: correctDatesBeforeChange,\n};\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n// Register all Handsontable's modules.\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    {\n        id: 640329,\n        itemName: 'Lunar Core',\n        itemNo: 'XJ-12',\n        leadEngineer: 'Ellen Ripley',\n        cost: 350000,\n        inStock: true,\n        category: 'Lander',\n        itemQuality: 87,\n        origin: '🇺🇸 USA',\n        quantity: 2,\n        valueStock: 700000,\n        repairable: false,\n        supplierName: 'TechNova',\n        restockDate: '2025-08-01',\n        operationalStatus: 'Awaiting Parts',\n    },\n    {\n        id: 863104,\n        itemName: 'Zero Thrusters',\n        itemNo: 'QL-54',\n        leadEngineer: 'Sam Bell',\n        cost: 450000,\n        inStock: false,\n        category: 'Propulsion',\n        itemQuality: 0,\n        origin: '🇩🇪 Germany',\n        quantity: 0,\n        valueStock: 0,\n        repairable: true,\n        supplierName: 'PropelMax',\n        restockDate: '2025-09-15',\n        operationalStatus: 'In Maintenance',\n    },\n    {\n        id: 395603,\n        itemName: 'EVA Suits',\n        itemNo: 'PM-67',\n        leadEngineer: 'Alex Rogan',\n        cost: 150000,\n        inStock: true,\n        category: 'Equipment',\n        itemQuality: 79,\n        origin: '🇮🇹 Italy',\n        quantity: 50,\n        valueStock: 7500000,\n        repairable: true,\n        supplierName: 'SuitCraft',\n        restockDate: '2025-10-05',\n        operationalStatus: 'Ready for Testing',\n    },\n    {\n        id: 679083,\n        itemName: 'Solar Panels',\n        itemNo: 'BW-09',\n        leadEngineer: 'Dave Bowman',\n        cost: 75000,\n        inStock: true,\n        category: 'Energy',\n        itemQuality: 95,\n        origin: '🇺🇸 USA',\n        quantity: 10,\n        valueStock: 750000,\n        repairable: false,\n        supplierName: 'SolarStream',\n        restockDate: '2025-11-10',\n        operationalStatus: 'Operational',\n    },\n    {\n        id: 912663,\n        itemName: 'Comm Array',\n        itemNo: 'ZR-56',\n        leadEngineer: 'Louise Banks',\n        cost: 125000,\n        inStock: false,\n        category: 'Communication',\n        itemQuality: 0,\n        origin: '🇯🇵 Japan',\n        quantity: 0,\n        valueStock: 0,\n        repairable: true,\n        supplierName: 'CommTech',\n        restockDate: '2025-12-20',\n        operationalStatus: 'Decommissioned',\n    },\n    {\n        id: 315806,\n        itemName: 'Habitat Dome',\n        itemNo: 'UJ-23',\n        leadEngineer: 'Dr. Ryan Stone',\n        cost: 1000000,\n        inStock: true,\n        category: 'Shelter',\n        itemQuality: 93,\n        origin: '🇨🇦 Canada',\n        quantity: 3,\n        valueStock: 3000000,\n        repairable: false,\n        supplierName: 'DomeInnovate',\n        restockDate: '2026-01-25',\n        operationalStatus: 'Operational',\n    },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n// Converts a loosely written date into ISO.\nconst toISODate = (value, inputFormat) => {\n    // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n    const fromInputFormat = moment(value, inputFormat, true);\n    if (fromInputFormat.isValid()) {\n        return fromInputFormat.format(ISO_FORMAT);\n    }\n    // Fall back to the browser's parsing for values that format cannot describe, such as\n    // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n    const nativeDate = new Date(value);\n    return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\nconst cellDateTypeDefinition = {\n    // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n    // check that warns when the underlying data is not ISO.\n    ...DateCellType,\n    // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n    // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n    valueFormatter: (value, cellProperties) => {\n        if (typeof value !== 'string' || value === '') {\n            return value;\n        }\n        const date = moment(value, ISO_FORMAT, true);\n        return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n    },\n};\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(changes) {\n    changes.forEach((change) => {\n        if (!change) {\n            return;\n        }\n        const [visualRow, prop, , newValue] = change;\n        const column = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (column === null) {\n            return;\n        }\n        const cellMeta = this.getCellMetaTransient(visualRow, column);\n        if (cellMeta.type !== 'moment-date' ||\n            cellMeta.correctFormat !== true ||\n            typeof newValue !== 'string' ||\n            newValue === '') {\n            return;\n        }\n        if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n            change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n        }\n    });\n}\nregisterCellType('moment-date', cellDateTypeDefinition);\n// Define configuration options for the Handsontable\nconst hotOptions = {\n    data,\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n        { data: 'itemName', type: 'text', width: 130 },\n        { data: 'category', type: 'text', width: 120 },\n        { data: 'leadEngineer', type: 'text', width: 150 },\n        {\n            data: 'restockDate',\n            type: 'moment-date',\n            width: 150,\n            // Display format, applied by `valueFormatter`. The stored value stays ISO.\n            renderFormat: 'MMM D, YYYY',\n            // Format tried first when correcting a pasted value.\n            inputFormat: 'MM/DD/YYYY',\n            correctFormat: true,\n        },\n        {\n            data: 'cost',\n            type: 'numeric',\n            width: 120,\n            className: 'htRight',\n            locale: 'en-US',\n            numericFormat: {\n                style: 'currency',\n                currency: 'USD',\n                minimumFractionDigits: 2,\n            },\n        },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n    beforeChange: correctDatesBeforeChange,\n};\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.ts.json
index 44c446380..45cb29f57 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'restockDate',\n      type: 'moment-date',\n      width: 150,\n      // Display format, applied by `valueFormatter`. The stored value stays ISO.\n      renderFormat: 'MMM D, YYYY',\n      // Format tried first when correcting a pasted value.\n      inputFormat: 'MM/DD/YYYY',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange: correctDatesBeforeChange,\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'restockDate',\n      type: 'moment-date',\n      width: 150,\n      // Display format, applied by `valueFormatter`. The stored value stays ISO.\n      renderFormat: 'MMM D, YYYY',\n      // Format tried first when correcting a pasted value.\n      inputFormat: 'MM/DD/YYYY',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n  beforeChange: correctDatesBeforeChange,\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__react__example1.tsx.json
index 2f7464e27..55988e3b5 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-date__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\nregisterAllModules();\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      beforeChange={correctDatesBeforeChange}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"restockDate\"\n        type=\"moment-date\"\n        width={150}\n        renderFormat=\"MMM D, YYYY\"\n        inputFormat=\"MM/DD/YYYY\"\n        correctFormat={true}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/moment-date/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerCellType, DateCellType } from 'handsontable/cellTypes';\nimport { CellChange, CellProperties } from 'handsontable/settings';\nimport { HotInstance } from 'handsontable';\nimport moment from 'moment';\n\nregisterAllModules();\n\n// The built-in `date` cell type stores every value in the ISO 8601 format.\nconst ISO_FORMAT = 'YYYY-MM-DD';\n\n// Converts a loosely written date into ISO.\nconst toISODate = (value: string, inputFormat: string): string => {\n  // The column's own format wins, parsed strictly so a near-miss does not silently shift.\n  const fromInputFormat = moment(value, inputFormat, true);\n\n  if (fromInputFormat.isValid()) {\n    return fromInputFormat.format(ISO_FORMAT);\n  }\n\n  // Fall back to the browser's parsing for values that format cannot describe, such as\n  // \"March 14, 2025\". Handing Moment a Date avoids its string-parsing deprecation warning.\n  const nativeDate = new Date(value);\n\n  return Number.isNaN(nativeDate.getTime()) ? value : moment(nativeDate).format(ISO_FORMAT);\n};\n\n// The custom cell properties this cell type reads, on top of the built-in ones.\ntype MomentDateCellProperties = CellProperties & {\n  renderFormat?: string;\n  inputFormat?: string;\n  correctFormat?: boolean;\n};\n\nconst cellDateTypeDefinition = {\n  // Inherit the built-in date editor (a native date input), its ISO validator, and the source-data\n  // check that warns when the underlying data is not ISO.\n  ...DateCellType,\n\n  // Display the ISO source value in the column's own Moment format. `valueFormatter` runs before the\n  // renderer, so the inherited renderer receives the formatted string and no custom renderer is needed.\n  valueFormatter: (value: unknown, cellProperties: MomentDateCellProperties) => {\n    if (typeof value !== 'string' || value === '') {\n      return value;\n    }\n\n    const date = moment(value, ISO_FORMAT, true);\n\n    return date.isValid() ? date.format(cellProperties.renderFormat ?? ISO_FORMAT) : value;\n  },\n};\n\n// Rewrites a non-ISO value into ISO before it reaches the cell. This runs ahead of both the editor\n// and the validator, which is what keeps the built-in ISO-only editor from warning about the raw\n// value. It also covers pasted and programmatically written values, which never touch the editor.\nfunction correctDatesBeforeChange(this: HotInstance, changes: (CellChange | null)[]): void {\n  changes.forEach((change) => {\n    if (!change) {\n      return;\n    }\n\n    const [visualRow, prop, , newValue] = change;\n    const column = this.propToCol(prop as string);\n\n    // Skip a property that names no column.\n    if (column === null) {\n      return;\n    }\n\n    const cellMeta = this.getCellMetaTransient(visualRow, column) as MomentDateCellProperties;\n\n    if (\n      cellMeta.type !== 'moment-date' ||\n      cellMeta.correctFormat !== true ||\n      typeof newValue !== 'string' ||\n      newValue === ''\n    ) {\n      return;\n    }\n\n    if (!moment(newValue, ISO_FORMAT, true).isValid()) {\n      change[3] = toISODate(newValue, cellMeta.inputFormat ?? ISO_FORMAT);\n    }\n  });\n}\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      beforeChange={correctDatesBeforeChange}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"restockDate\"\n        type=\"moment-date\"\n        width={150}\n        renderFormat=\"MMM D, YYYY\"\n        inputFormat=\"MM/DD/YYYY\"\n        correctFormat={true}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/moment-date/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__angular__example1.ts.json
index 889ced72f..0be288f0f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-moment-time></example1-moment-time>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nconst cellTimeTypeDefinition = {\n  CELL_TYPE: 'moment-time',\n  renderer: getRenderer('text'),\n  validator(this: any, value: any, callback: (valid: boolean) => void): void {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(\n      value,\n      ['YYYY-MM-DDTHH:mm:ss.SSSZ', 'X', 'x'],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-moment-time',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      time: '09:30',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      time: '14:15',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      time: '08:00',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      time: '16:45',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      time: '11:20',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      time: '23:00',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'time',\n        type: 'moment-time' as any,\n        width: 150,\n        timeFormat: 'HH:mm',\n        correctFormat: true,\n      } as any,\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/moment-time/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-moment-time></example1-moment-time>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nconst cellTimeTypeDefinition = {\n  CELL_TYPE: 'moment-time',\n  renderer: getRenderer('text'),\n  validator(this: any, value: any, callback: (valid: boolean) => void): void {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(\n      value,\n      ['YYYY-MM-DDTHH:mm:ss.SSSZ', 'X', 'x'],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-moment-time',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      time: '09:30',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      time: '14:15',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      time: '08:00',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      time: '16:45',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      time: '11:20',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      time: '23:00',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'time',\n        type: 'moment-time' as any,\n        width: 150,\n        timeFormat: 'HH:mm',\n        correctFormat: true,\n      } as any,\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/moment-time/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.js.json
index fc139900b..349ab1dea 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator(value, callback) {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(\n      value,\n      [\n        'YYYY-MM-DDTHH:mm:ss.SSSZ',\n        'X',\n        'x', // Unix ms timestamp\n      ],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    // is it in the specified format\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'time',\n      type: 'moment-time',\n      width: 150,\n      timeFormat: 'HH:mm',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator(value, callback) {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(\n      value,\n      [\n        'YYYY-MM-DDTHH:mm:ss.SSSZ',\n        'X',\n        'x', // Unix ms timestamp\n      ],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    // is it in the specified format\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'time',\n      type: 'moment-time',\n      width: 150,\n      timeFormat: 'HH:mm',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.ts.json
index c9a045ada..506fb1ce0 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator: function(value, callback) {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(value, [\n      'YYYY-MM-DDTHH:mm:ss.SSSZ',\n      'X', // Unix timestamp\n      'x' // Unix ms timestamp\n    ], true).isValid() ?\n      moment(value) : moment(value, timeFormat);\n    let isValidTime = date.isValid();\n\n    // is it in the specified format\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n    if (!isValidTime) {\n      valid = false;\n    }\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'time',\n      type: 'moment-time',\n      width: 150,\n      timeFormat: 'HH:mm',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator: function(value, callback) {\n    const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n    if (twoDigitValue) {\n      value += ':00';\n    }\n\n    const date = moment(value, [\n      'YYYY-MM-DDTHH:mm:ss.SSSZ',\n      'X', // Unix timestamp\n      'x' // Unix ms timestamp\n    ], true).isValid() ?\n      moment(value) : moment(value, timeFormat);\n    let isValidTime = date.isValid();\n\n    // is it in the specified format\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n    if (!isValidTime) {\n      valid = false;\n    }\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'time',\n      type: 'moment-time',\n      width: 150,\n      timeFormat: 'HH:mm',\n      correctFormat: true,\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__react__example1.tsx.json
index ea83714d4..003c09c8e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__moment-time__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\nregisterAllModules();\n\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator(this: any, value: string | number, callback: (valid: boolean) => void) {\n    const timeFormat: string = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(String(value)) ? parseInt(String(value), 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(String(value));\n\n    if (twoDigitValue) {\n      value = `${value}:00`;\n    }\n\n    const date = moment(\n      value,\n      [\n        'YYYY-MM-DDTHH:mm:ss.SSSZ',\n        'X',\n        'x',\n      ],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  time: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"time\"\n        type=\"moment-time\"\n        width={150}\n        timeFormat=\"HH:mm\"\n        correctFormat={true}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/moment-time/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\nregisterAllModules();\n\nconst cellTimeTypeDefinition = {\n  renderer: getRenderer('text'),\n  validator(this: any, value: string | number, callback: (valid: boolean) => void) {\n    const timeFormat: string = this.timeFormat ?? 'h:mm:ss a';\n    let valid = true;\n\n    if (value === null) {\n      value = '';\n    }\n\n    value = /^\\d{3,}$/.test(String(value)) ? parseInt(String(value), 10) : value;\n\n    const twoDigitValue = /^\\d{1,2}$/.test(String(value));\n\n    if (twoDigitValue) {\n      value = `${value}:00`;\n    }\n\n    const date = moment(\n      value,\n      [\n        'YYYY-MM-DDTHH:mm:ss.SSSZ',\n        'X',\n        'x',\n      ],\n      true\n    ).isValid()\n      ? moment(value)\n      : moment(value, timeFormat);\n\n    let isValidTime = date.isValid();\n    let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n    if (this.allowEmpty && value === '') {\n      isValidTime = true;\n      isValidFormat = true;\n    }\n\n    if (!isValidTime) {\n      valid = false;\n    }\n\n    if (!isValidTime && isValidFormat) {\n      valid = true;\n    }\n\n    if (isValidTime && !isValidFormat) {\n      if (this.correctFormat === true) {\n        const correctedValue = date.format(timeFormat);\n\n        this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n        valid = true;\n      } else {\n        valid = false;\n      }\n    }\n\n    callback(valid);\n  },\n  editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  time: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    time: '09:30',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    time: '14:15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    time: '08:00',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    time: '16:45',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    time: '11:20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    time: '23:00',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"time\"\n        type=\"moment-time\"\n        width={150}\n        timeFormat=\"HH:mm\"\n        correctFormat={true}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/moment-time/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__angular__example1.ts.json
index 8132b9a0f..3d89b8903 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-numbro></example1-numbro>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register the modules here, not in app.config.ts: this file reaches for the built-in\n// numeric editor and validator while its own module body runs, which is before any\n// later import has been evaluated.\nregisterAllModules();\n\nObject.values(languages).forEach((language: any) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(\n      `^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`,\n      'i'\n    ).test(value.trim());\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\nconst cellTypeDefinition = {\n  CELL_TYPE: 'numbro',\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }: any) => {\n    if (isNumeric(value)) {\n      let classArr: string[] = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = (numbro as any).allLanguages\n          ? (numbro as any).allLanguages[cellCulture]\n          : (numbro as any)[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-numbro',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      quantity: 2,\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      quantity: 0,\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      quantity: 50,\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      quantity: 10,\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      quantity: 0,\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      quantity: 3,\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'quantity',\n        type: 'numbro' as any,\n        width: 150,\n        className: 'htRight',\n        numericFormat: {\n          pattern: '0,0',\n          culture: 'en-US',\n        },\n      } as any,\n      {\n        data: 'cost',\n        type: 'numbro' as any,\n        width: 120,\n        className: 'htRight',\n        numericFormat: {\n          pattern: '$0,0.00',\n          culture: 'en-US',\n        },\n      } as any,\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/numbro/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-numbro></example1-numbro>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register the modules here, not in app.config.ts: this file reaches for the built-in\n// numeric editor and validator while its own module body runs, which is before any\n// later import has been evaluated.\nregisterAllModules();\n\nObject.values(languages).forEach((language: any) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(\n      `^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`,\n      'i'\n    ).test(value.trim());\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\nconst cellTypeDefinition = {\n  CELL_TYPE: 'numbro',\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }: any) => {\n    if (isNumeric(value)) {\n      let classArr: string[] = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = (numbro as any).allLanguages\n          ? (numbro as any).allLanguages[cellCulture]\n          : (numbro as any)[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-numbro',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      quantity: 2,\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      quantity: 0,\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      quantity: 50,\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      quantity: 10,\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      quantity: 0,\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      quantity: 3,\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'quantity',\n        type: 'numbro' as any,\n        width: 150,\n        className: 'htRight',\n        numericFormat: {\n          pattern: '0,0',\n          culture: 'en-US',\n        },\n      } as any,\n      {\n        data: 'cost',\n        type: 'numbro' as any,\n        width: 120,\n        className: 'htRight',\n        numericFormat: {\n          pattern: '$0,0.00',\n          culture: 'en-US',\n        },\n      } as any,\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/cell-types/numbro/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.js.json
index 556b92887..5e1a1580f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value) {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n      value.trim()\n    );\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      // Register the language if it's not already registered\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'quantity',\n      type: 'numbro',\n      width: 150,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '0,0',\n        culture: 'en-US',\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numbro',\n      width: 120,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '$0,0.00',\n        culture: 'en-US',\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value) {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n      value.trim()\n    );\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      // Register the language if it's not already registered\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'quantity',\n      type: 'numbro',\n      width: 150,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '0,0',\n        culture: 'en-US',\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numbro',\n      width: 120,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '$0,0.00',\n        culture: 'en-US',\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.ts.json
index 7e74a48c4..2947ee1e8 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map(d => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i')\n      .test(value.trim());\n\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = numericFormat && numericFormat.culture || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      // Register the language if it's not already registered\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'quantity',\n      type: 'numbro',\n      width: 150,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '0,0',\n        culture: 'en-US',\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numbro',\n      width: 120,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '$0,0.00',\n        culture: 'en-US',\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value) && isFinite(value);\n\n  } else if (type === 'string') {\n    if (value.length === 0) {\n      return false;\n\n    } else if (value.length === 1) {\n      return /\\d/.test(value);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map(d => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i')\n      .test(value.trim());\n\n  } else if (type === 'object') {\n    return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className;\n      } else {\n        const className = cellProperties.className ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat;\n      const cellCulture = numericFormat && numericFormat.culture || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      // Register the language if it's not already registered\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n\n      value = numbro(value).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'quantity',\n      type: 'numbro',\n      width: 150,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '0,0',\n        culture: 'en-US',\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numbro',\n      width: 120,\n      className: 'htRight',\n      numericFormat: {\n        pattern: '$0,0.00',\n        culture: 'en-US',\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__react__example1.tsx.json
index 44efd4fc5..2ab6f021c 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__numbro__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\n\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language as numbro.NumbroLanguage));\n\nfunction isNumeric(value: unknown): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value as number) && isFinite(value as number);\n  } else if (type === 'string') {\n    const str = value as string;\n\n    if (str.length === 0) {\n      return false;\n    } else if (str.length === 1) {\n      return /\\d/.test(str);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n      str.trim()\n    );\n  } else if (type === 'object') {\n    return !!value && typeof (value as object).valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr: string[] = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className as string[];\n      } else {\n        const className = (cellProperties.className as string) ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat as { culture?: string; pattern?: string } | undefined;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = (numbro as any).allLanguages ? (numbro as any).allLanguages[cellCulture] : (numbro as any)[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value as number).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"quantity\"\n        type=\"numbro\"\n        width={150}\n        className=\"htRight\"\n        numericFormat={{ pattern: '0,0', culture: 'en-US' }}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numbro\"\n        width={120}\n        className=\"htRight\"\n        numericFormat={{ pattern: '$0,0.00', culture: 'en-US' }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/numbro/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"numbro\": \"2.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\n// numbro ships no type declarations for its bundled language pack.\n// @ts-expect-error -- untyped module\nimport languages from 'numbro/dist/languages.min.js';\n\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language as numbro.NumbroLanguage));\n\nfunction isNumeric(value: unknown): boolean {\n  const type = typeof value;\n\n  if (type === 'number') {\n    return !isNaN(value as number) && isFinite(value as number);\n  } else if (type === 'string') {\n    const str = value as string;\n\n    if (str.length === 0) {\n      return false;\n    } else if (str.length === 1) {\n      return /\\d/.test(str);\n    }\n\n    const delimiter = Array.from(new Set(['.']))\n      .map((d) => `\\\\${d}`)\n      .join('|');\n\n    return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n      str.trim()\n    );\n  } else if (type === 'object') {\n    return !!value && typeof (value as object).valueOf() === 'number' && !(value instanceof Date);\n  }\n\n  return false;\n}\n\nconst cellTypeDefinition = {\n  renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n    if (isNumeric(value)) {\n      let classArr: string[] = [];\n\n      if (Array.isArray(cellProperties.className)) {\n        classArr = cellProperties.className as string[];\n      } else {\n        const className = (cellProperties.className as string) ?? '';\n\n        if (className.length) {\n          classArr = className.split(' ');\n        }\n      }\n\n      const numericFormat = cellProperties.numericFormat as { culture?: string; pattern?: string } | undefined;\n      const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n      const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n      if (cellCulture && !numbro.languages()[cellCulture]) {\n        const shortTag = cellCulture.replace('-', '');\n        const langData = (numbro as any).allLanguages ? (numbro as any).allLanguages[cellCulture] : (numbro as any)[shortTag];\n\n        if (langData) {\n          numbro.registerLanguage(langData);\n        }\n      }\n\n      numbro.setLanguage(cellCulture);\n      value = numbro(value as number).format(cellFormatPattern ?? '0');\n\n      if (\n        classArr.indexOf('htLeft') < 0 &&\n        classArr.indexOf('htCenter') < 0 &&\n        classArr.indexOf('htRight') < 0 &&\n        classArr.indexOf('htJustify') < 0\n      ) {\n        classArr.push('htRight');\n      }\n\n      if (classArr.indexOf('htNumeric') < 0) {\n        classArr.push('htNumeric');\n      }\n\n      cellProperties.className = classArr.join(' ');\n      td.dir = 'ltr';\n    }\n\n    getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n  }),\n  validator: getValidator('numeric'),\n  editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"quantity\"\n        type=\"numbro\"\n        width={150}\n        className=\"htRight\"\n        numericFormat={{ pattern: '0,0', culture: 'en-US' }}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numbro\"\n        width={120}\n        className=\"htRight\"\n        numericFormat={{ pattern: '$0,0.00', culture: 'en-US' }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/numbro/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__angular__example1.ts.json
index 5e3744857..5a4b62c52 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\",\n    \"@types/pikaday\": \"1.7.10\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-pikaday></example1-pikaday>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  GridSettings,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport './example1.css';\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\n\n@Component({\n  standalone: true,\n  selector: 'example1-pikaday-editor',\n  template: `<div #container class=\"pikaday-container\"></div>`,\n  styles: [\n    `\n    :host { display: block; }\n    .pikaday-container { width: 278px; }\n  `,\n  ],\n})\nexport class PikadayEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override position = 'portal' as const;\n  @ViewChild('container', { static: true }) container!: ElementRef;\n  private pikaday: Pikaday | null = null;\n\n  override afterOpen(): void {\n    const FORMAT = DATE_FORMAT_US;\n\n    this.pikaday = new Pikaday({\n      field: this.container.nativeElement,\n      container: this.container.nativeElement,\n      bound: false,\n      format: FORMAT,\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      toString: (date: Date, format?: string) => moment(date).format(format),\n      parse: (dateString: string, format: string) => moment(dateString, format).toDate(),\n      onSelect: (date: Date) => {\n        this.setValue(moment(date).format(FORMAT));\n      },\n      onClose: () => {\n        this.finishEdit.emit();\n      },\n    });\n\n    if (this.value) {\n      const m = moment(this.value, FORMAT, true);\n\n      if (m.isValid()) {\n        this.pikaday.setDate(m.toDate(), true);\n      }\n    }\n\n    this.pikaday.show();\n  }\n\n  override afterClose(): void {\n    this.pikaday?.destroy();\n    this.pikaday = null;\n  }\n\n  override onFocus(): void {\n    this.container.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-pikaday-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<span>{{ formattedDate }}</span>`,\n})\nexport class PikadayRendererComponent extends HotCellRendererAdvancedComponent<string> {\n  get formattedDate(): string {\n    if (!this.value) return '';\n    const m = moment(this.value, DATE_FORMAT_US, true);\n\n    return m.isValid() ? m.format(DATE_FORMAT_US) : this.value;\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-pikaday',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      restockDate: '08/01/2025',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      restockDate: '09/15/2025',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      restockDate: '10/05/2025',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      restockDate: '11/10/2025',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      restockDate: '12/20/2025',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      restockDate: '01/25/2026',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        editor: PikadayEditorComponent,\n        renderer: PikadayRendererComponent,\n      } as any,\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"devDependencies\": {\n    \"@types/moment\": \"2.13.0\",\n    \"@types/pikaday\": \"1.7.10\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-pikaday></example1-pikaday>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  GridSettings,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport './example1.css';\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\n\n@Component({\n  standalone: true,\n  selector: 'example1-pikaday-editor',\n  template: `<div #container class=\"pikaday-container\"></div>`,\n  styles: [\n    `\n    :host { display: block; }\n    .pikaday-container { width: 278px; }\n  `,\n  ],\n})\nexport class PikadayEditorComponent extends HotCellEditorAdvancedComponent<string> {\n  override position = 'portal' as const;\n  @ViewChild('container', { static: true }) container!: ElementRef;\n  private pikaday: Pikaday | null = null;\n\n  override afterOpen(): void {\n    const FORMAT = DATE_FORMAT_US;\n\n    this.pikaday = new Pikaday({\n      field: this.container.nativeElement,\n      container: this.container.nativeElement,\n      bound: false,\n      format: FORMAT,\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      toString: (date: Date, format?: string) => moment(date).format(format),\n      parse: (dateString: string, format: string) => moment(dateString, format).toDate(),\n      onSelect: (date: Date) => {\n        this.setValue(moment(date).format(FORMAT));\n      },\n      onClose: () => {\n        this.finishEdit.emit();\n      },\n    });\n\n    if (this.value) {\n      const m = moment(this.value, FORMAT, true);\n\n      if (m.isValid()) {\n        this.pikaday.setDate(m.toDate(), true);\n      }\n    }\n\n    this.pikaday.show();\n  }\n\n  override afterClose(): void {\n    this.pikaday?.destroy();\n    this.pikaday = null;\n  }\n\n  override onFocus(): void {\n    this.container.nativeElement.focus();\n  }\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-pikaday-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<span>{{ formattedDate }}</span>`,\n})\nexport class PikadayRendererComponent extends HotCellRendererAdvancedComponent<string> {\n  get formattedDate(): string {\n    if (!this.value) return '';\n    const m = moment(this.value, DATE_FORMAT_US, true);\n\n    return m.isValid() ? m.format(DATE_FORMAT_US) : this.value;\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-pikaday',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = [\n    {\n      itemName: 'Lunar Core',\n      category: 'Lander',\n      leadEngineer: 'Ellen Ripley',\n      restockDate: '08/01/2025',\n      cost: 350000,\n    },\n    {\n      itemName: 'Zero Thrusters',\n      category: 'Propulsion',\n      leadEngineer: 'Sam Bell',\n      restockDate: '09/15/2025',\n      cost: 450000,\n    },\n    {\n      itemName: 'EVA Suits',\n      category: 'Equipment',\n      leadEngineer: 'Alex Rogan',\n      restockDate: '10/05/2025',\n      cost: 150000,\n    },\n    {\n      itemName: 'Solar Panels',\n      category: 'Energy',\n      leadEngineer: 'Dave Bowman',\n      restockDate: '11/10/2025',\n      cost: 75000,\n    },\n    {\n      itemName: 'Comm Array',\n      category: 'Communication',\n      leadEngineer: 'Louise Banks',\n      restockDate: '12/20/2025',\n      cost: 125000,\n    },\n    {\n      itemName: 'Habitat Dome',\n      category: 'Shelter',\n      leadEngineer: 'Dr. Ryan Stone',\n      restockDate: '01/25/2026',\n      cost: 1000000,\n    },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n    autoRowSize: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    headerClassName: 'htLeft',\n    columns: [\n      { data: 'itemName', type: 'text', width: 130 },\n      { data: 'category', type: 'text', width: 120 },\n      { data: 'leadEngineer', type: 'text', width: 150 },\n      {\n        data: 'restockDate',\n        width: 150,\n        allowInvalid: false,\n        editor: PikadayEditorComponent,\n        renderer: PikadayRendererComponent,\n      } as any,\n      {\n        data: 'cost',\n        type: 'numeric',\n        width: 120,\n        className: 'htRight',\n        locale: 'en-US',\n        numericFormat: {\n          style: 'currency',\n          currency: 'USD',\n          minimumFractionDigits: 2,\n        },\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.js.json
index 2631625e5..3deac2a6f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(cellProperties.renderFormat);\n  }),\n  editor: editorFactory({\n    position: 'portal',\n    shortcuts: [\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('subtract', 1);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowRight']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('add', 1);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowUp']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('subtract', 7);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowDown']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('add', 7);\n          _event.preventDefault();\n        },\n      },\n    ],\n    init(editor) {\n      editor.parentDestroyed = false;\n      // create the input element on init. This is a text input that color picker will be attached to.\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.datePicker = editor.container;\n      /**\n       * Prevent recognizing clicking on datepicker as clicking outside of table.\n       */\n      editor.hot.rootDocument.addEventListener('mousedown', (event) => {\n        if (event.target && event.target.classList.contains('pika-day')) {\n          editor.hideDatepicker(editor);\n        }\n      });\n    },\n    getDatePickerConfig(editor) {\n      const htInput = editor.input;\n      const options = {};\n\n      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n        Object.assign(options, editor.cellProperties.datePickerConfig);\n      }\n\n      const origOnSelect = options.onSelect;\n      const origOnClose = options.onClose;\n\n      options.field = htInput;\n      options.trigger = htInput;\n      options.container = editor.datePicker;\n      options.bound = false;\n      options.keyboardInput = false;\n      options.format = options.format ?? editor.getDateFormat(editor);\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      options.toString = (date, format) => moment(date).format(format);\n      options.parse = (dateString, format) => moment(dateString, format).toDate();\n      options.reposition = options.reposition || false;\n      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n      // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n      options.isRTL = false;\n      options.onSelect = function (date) {\n        let dateStr;\n\n        if (!isNaN(date.getTime())) {\n          dateStr = moment(date).format(editor.getDateFormat(editor));\n        }\n\n        editor.setValue(dateStr);\n\n        if (origOnSelect) {\n          origOnSelect.call(editor.pickaday, date);\n        }\n\n        if (editor.hot.rootWindow.matchMedia('(pointer: coarse)').matches) {\n          editor.hideDatepicker(editor);\n        }\n      };\n      options.onClose = () => {\n        if (!editor.parentDestroyed) {\n          editor.finishEditing(false);\n        }\n\n        if (origOnClose) {\n          origOnClose();\n        }\n      };\n\n      return options;\n    },\n    hideDatepicker(editor) {\n      editor.pickaday?.hide();\n    },\n    showDatepicker(editor, event) {\n      const dateFormat = editor.getDateFormat(editor);\n      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      const isMouseDown = editor.hot.view.isMouseDown();\n      // A printable character reports a single-character `key`; anything else is a function key.\n      const isMeta = event && 'key' in event ? event.key.length > 1 : false;\n\n      let dateStr;\n\n      editor.datePicker.style.display = 'block';\n      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n\n      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      editor.pickaday._onInputFocus = function () {};\n\n      if (editor.originalValue) {\n        dateStr = editor.originalValue;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n        if (editor.getValue() !== editor.originalValue) {\n          editor.setValue(editor.originalValue);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue('');\n        }\n      } else if (editor.cellProperties.defaultDate) {\n        dateStr = editor.cellProperties.defaultDate;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue('');\n        }\n      } else {\n        // if a default date is not defined, set a soft-default-date: display the current day and month in the\n        // datepicker, but don't fill the editor input\n        editor.pickaday.gotoToday();\n      }\n    },\n    afterClose(editor) {\n      if (editor.pickaday?.destroy) {\n        editor.pickaday.destroy();\n      }\n    },\n    afterOpen(editor, event) {\n      const cellRect = editor.TD.getBoundingClientRect();\n\n      editor.input.style.width = `${cellRect.width}px`;\n      editor.input.style.height = `${cellRect.height}px`;\n      editor.showDatepicker(editor, event);\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    getDateFormat(editor) {\n      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  height: 'auto',\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'restockDate',\n      width: 150,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      dateFormat: DATE_FORMAT_US,\n      defaultDate: '01/01/2020',\n      datePickerConfig: {\n        firstDay: 0,\n        showWeekNumber: true,\n        disableDayFn(date) {\n          return date.getDay() === 0 || date.getDay() === 6;\n        },\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n/* start:skip-in-preview */\nconst inputData = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(cellProperties.renderFormat);\n  }),\n  editor: editorFactory({\n    position: 'portal',\n    shortcuts: [\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('subtract', 1);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowRight']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('add', 1);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowUp']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('subtract', 7);\n          _event.preventDefault();\n        },\n      },\n      {\n        keys: [['ArrowDown']],\n        callback: (editor, _event) => {\n          // @ts-ignore\n          editor.pickaday.adjustDate('add', 7);\n          _event.preventDefault();\n        },\n      },\n    ],\n    init(editor) {\n      editor.parentDestroyed = false;\n      // create the input element on init. This is a text input that color picker will be attached to.\n      editor.input = editor.hot.rootDocument.createElement('INPUT');\n      editor.datePicker = editor.container;\n      /**\n       * Prevent recognizing clicking on datepicker as clicking outside of table.\n       */\n      editor.hot.rootDocument.addEventListener('mousedown', (event) => {\n        if (event.target && event.target.classList.contains('pika-day')) {\n          editor.hideDatepicker(editor);\n        }\n      });\n    },\n    getDatePickerConfig(editor) {\n      const htInput = editor.input;\n      const options = {};\n\n      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n        Object.assign(options, editor.cellProperties.datePickerConfig);\n      }\n\n      const origOnSelect = options.onSelect;\n      const origOnClose = options.onClose;\n\n      options.field = htInput;\n      options.trigger = htInput;\n      options.container = editor.datePicker;\n      options.bound = false;\n      options.keyboardInput = false;\n      options.format = options.format ?? editor.getDateFormat(editor);\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      options.toString = (date, format) => moment(date).format(format);\n      options.parse = (dateString, format) => moment(dateString, format).toDate();\n      options.reposition = options.reposition || false;\n      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n      // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n      options.isRTL = false;\n      options.onSelect = function (date) {\n        let dateStr;\n\n        if (!isNaN(date.getTime())) {\n          dateStr = moment(date).format(editor.getDateFormat(editor));\n        }\n\n        editor.setValue(dateStr);\n\n        if (origOnSelect) {\n          origOnSelect.call(editor.pickaday, date);\n        }\n\n        if (editor.hot.rootWindow.matchMedia('(pointer: coarse)').matches) {\n          editor.hideDatepicker(editor);\n        }\n      };\n      options.onClose = () => {\n        if (!editor.parentDestroyed) {\n          editor.finishEditing(false);\n        }\n\n        if (origOnClose) {\n          origOnClose();\n        }\n      };\n\n      return options;\n    },\n    hideDatepicker(editor) {\n      editor.pickaday?.hide();\n    },\n    showDatepicker(editor, event) {\n      const dateFormat = editor.getDateFormat(editor);\n      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      const isMouseDown = editor.hot.view.isMouseDown();\n      // A printable character reports a single-character `key`; anything else is a function key.\n      const isMeta = event && 'key' in event ? event.key.length > 1 : false;\n\n      let dateStr;\n\n      editor.datePicker.style.display = 'block';\n      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n\n      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      editor.pickaday._onInputFocus = function () {};\n\n      if (editor.originalValue) {\n        dateStr = editor.originalValue;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n        if (editor.getValue() !== editor.originalValue) {\n          editor.setValue(editor.originalValue);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue('');\n        }\n      } else if (editor.cellProperties.defaultDate) {\n        dateStr = editor.cellProperties.defaultDate;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue('');\n        }\n      } else {\n        // if a default date is not defined, set a soft-default-date: display the current day and month in the\n        // datepicker, but don't fill the editor input\n        editor.pickaday.gotoToday();\n      }\n    },\n    afterClose(editor) {\n      if (editor.pickaday?.destroy) {\n        editor.pickaday.destroy();\n      }\n    },\n    afterOpen(editor, event) {\n      const cellRect = editor.TD.getBoundingClientRect();\n\n      editor.input.style.width = `${cellRect.width}px`;\n      editor.input.style.height = `${cellRect.height}px`;\n      editor.showDatepicker(editor, event);\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    getDateFormat(editor) {\n      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  height: 'auto',\n  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n  autoRowSize: true,\n  rowHeaders: true,\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'itemName', type: 'text', width: 130 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'leadEngineer', type: 'text', width: 150 },\n    {\n      data: 'restockDate',\n      width: 150,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      dateFormat: DATE_FORMAT_US,\n      defaultDate: '01/01/2020',\n      datePickerConfig: {\n        firstDay: 0,\n        showWeekNumber: true,\n        disableDayFn(date) {\n          return date.getDay() === 0 || date.getDay() === 6;\n        },\n      },\n    },\n    {\n      data: 'cost',\n      type: 'numeric',\n      width: 120,\n      className: 'htRight',\n      locale: 'en-US',\n      numericFormat: {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.ts.json
index 2ce527f73..01c9073cf 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport moment from \"moment\";\nimport Pikaday from \"pikaday\";\nimport \"pikaday/css/pikaday.css\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { rendererFactory } from \"handsontable/renderers\";\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = \"MM/DD/YYYY\";\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\n/* start:skip-in-preview */\n\nconst inputData = [\n  {\n    id: 640329,\n    itemName: \"Lunar Core\",\n    itemNo: \"XJ-12\",\n    leadEngineer: \"Ellen Ripley\",\n    cost: 350000,\n    inStock: true,\n    category: \"Lander\",\n    itemQuality: 87,\n    origin: \"🇺🇸 USA\",\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: \"TechNova\",\n    restockDate: \"2025-08-01\",\n    operationalStatus: \"Awaiting Parts\",\n  },\n  {\n    id: 863104,\n    itemName: \"Zero Thrusters\",\n    itemNo: \"QL-54\",\n    leadEngineer: \"Sam Bell\",\n    cost: 450000,\n    inStock: false,\n    category: \"Propulsion\",\n    itemQuality: 0,\n    origin: \"🇩🇪 Germany\",\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: \"PropelMax\",\n    restockDate: \"2025-09-15\",\n    operationalStatus: \"In Maintenance\",\n  },\n  {\n    id: 395603,\n    itemName: \"EVA Suits\",\n    itemNo: \"PM-67\",\n    leadEngineer: \"Alex Rogan\",\n    cost: 150000,\n    inStock: true,\n    category: \"Equipment\",\n    itemQuality: 79,\n    origin: \"🇮🇹 Italy\",\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: \"SuitCraft\",\n    restockDate: \"2025-10-05\",\n    operationalStatus: \"Ready for Testing\",\n  },\n  {\n    id: 679083,\n    itemName: \"Solar Panels\",\n    itemNo: \"BW-09\",\n    leadEngineer: \"Dave Bowman\",\n    cost: 75000,\n    inStock: true,\n    category: \"Energy\",\n    itemQuality: 95,\n    origin: \"🇺🇸 USA\",\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: \"SolarStream\",\n    restockDate: \"2025-11-10\",\n    operationalStatus: \"Operational\",\n  },\n  {\n    id: 912663,\n    itemName: \"Comm Array\",\n    itemNo: \"ZR-56\",\n    leadEngineer: \"Louise Banks\",\n    cost: 125000,\n    inStock: false,\n    category: \"Communication\",\n    itemQuality: 0,\n    origin: \"🇯🇵 Japan\",\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: \"CommTech\",\n    restockDate: \"2025-12-20\",\n    operationalStatus: \"Decommissioned\",\n  },\n  {\n    id: 315806,\n    itemName: \"Habitat Dome\",\n    itemNo: \"UJ-23\",\n    leadEngineer: \"Dr. Ryan Stone\",\n    cost: 1000000,\n    inStock: true,\n    category: \"Shelter\",\n    itemQuality: 93,\n    origin: \"🇨🇦 Canada\",\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: \"DomeInnovate\",\n    restockDate: \"2026-01-25\",\n    operationalStatus: \"Operational\",\n  },\n  {\n    id: 954632,\n    itemName: \"Oxygen Unit\",\n    itemNo: \"FK-87\",\n    leadEngineer: \"Dr. Grace Augustine\",\n    cost: 600000,\n    inStock: true,\n    category: \"Life Support\",\n    itemQuality: 85,\n    origin: \"🇺🇸 USA\",\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: \"OxyGenius\",\n    restockDate: \"2026-03-02\",\n    operationalStatus: \"Awaiting Parts\",\n  },\n  {\n    id: 734944,\n    itemName: \"Processing Rig\",\n    itemNo: \"LK-13\",\n    leadEngineer: \"Jake Sully\",\n    cost: 350000,\n    inStock: true,\n    category: \"Mining\",\n    itemQuality: 81,\n    origin: \"🇦🇺 Australia\",\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: \"RigTech\",\n    restockDate: \"2026-04-15\",\n    operationalStatus: \"Ready for Testing\",\n  },\n  {\n    id: 834662,\n    itemName: \"Navigation\",\n    itemNo: \"XP-24\",\n    leadEngineer: \"Dr. Ellie Arroway\",\n    cost: 450000,\n    inStock: true,\n    category: \"Navigation\",\n    itemQuality: 89,\n    origin: \"🇫🇷 France\",\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: \"NavSolutions\",\n    restockDate: \"2026-05-30\",\n    operationalStatus: \"In Maintenance\",\n  },\n  {\n    id: 714329,\n    itemName: \"Surveyor Arm\",\n    itemNo: \"QA-86\",\n    leadEngineer: \"Mark Watney\",\n    cost: 100000,\n    inStock: true,\n    category: \"Exploration\",\n    itemQuality: 78,\n    origin: \"🇺🇸 USA\",\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: \"ExploreTech\",\n    restockDate: \"2026-07-12\",\n    operationalStatus: \"Decommissioned\",\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\ntype EditorPropertiesType = {\n  input: HTMLInputElement;\n  pickaday: Pikaday;\n  datePicker: HTMLDivElement;\n  parentDestroyed: boolean;\n};\n\n// Helper type to extract the editor type from factory callbacks\ntype FactoryEditorType<TProps, TMethods> = Parameters<\n  Parameters<\n    typeof editorFactory<TProps, TMethods>\n  >[0][\"init\"]\n>[0];\n\ntype EditorMethodsType = {\n  showDatepicker: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n    event: Event | undefined,\n  ) => void;\n  hideDatepicker: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => void;\n  getDatePickerConfig: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => Pikaday.PikadayOptions;\n  getDateFormat: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => string;\n};\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(\n      cellProperties.renderFormat,\n    );\n  }),\n\n  editor: editorFactory<\n    EditorPropertiesType,\n    EditorMethodsType\n  >({\n    position: \"portal\",\n    shortcuts: [{\n      keys: [[\"ArrowLeft\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"subtract\", 1);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowRight\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"add\", 1);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowUp\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"subtract\", 7);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowDown\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"add\", 7);\n        _event.preventDefault();\n      },\n    }],\n    init(editor) {\n      editor.parentDestroyed = false;\n      // create the input element on init. This is a text input that color picker will be attached to.\n      editor.input = editor.hot.rootDocument.createElement(\n        \"INPUT\",\n      ) as HTMLInputElement;\n\n      editor.datePicker = editor.container;\n\n      /**\n       * Prevent recognizing clicking on datepicker as clicking outside of table.\n       */\n      editor.hot.rootDocument.addEventListener(\"mousedown\", (event) => {\n        if (\n          event.target &&\n          (event.target as HTMLElement).classList.contains(\"pika-day\")\n        ) {\n          editor.hideDatepicker(editor);\n        }\n      });\n    },\n    getDatePickerConfig(editor) {\n      const htInput = editor.input;\n      const options: Pikaday.PikadayOptions = {};\n\n      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n        Object.assign(options, editor.cellProperties.datePickerConfig);\n      }\n      const origOnSelect = options.onSelect;\n      const origOnClose = options.onClose;\n\n      options.field = htInput;\n      options.trigger = htInput;\n      options.container = editor.datePicker;\n      options.bound = false;\n      options.keyboardInput = false;\n      options.format = options.format ?? editor.getDateFormat(editor);\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      options.toString = (date, format) => moment(date).format(format);\n      options.parse = (dateString, format) =>\n        moment(dateString, format).toDate();\n      options.reposition = options.reposition || false;\n      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n      // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n      options.isRTL = false;\n      options.onSelect = function (date) {\n        let dateStr;\n\n        if (!isNaN(date.getTime())) {\n          dateStr = moment(date).format(editor.getDateFormat(editor));\n        }\n        editor.setValue(dateStr);\n\n        if (origOnSelect) {\n          origOnSelect.call(editor.pickaday, date);\n        }\n\n        if (editor.hot.rootWindow.matchMedia(\"(pointer: coarse)\").matches) {\n          editor.hideDatepicker(editor);\n        }\n      };\n      options.onClose = () => {\n        if (!editor.parentDestroyed) {\n          editor.finishEditing(false);\n        }\n        if (origOnClose) {\n          origOnClose();\n        }\n      };\n\n      return options;\n    },\n    hideDatepicker(editor) {\n      editor.pickaday?.hide();\n    },\n    showDatepicker(editor, event) {\n      const dateFormat = editor.getDateFormat(editor);\n      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      const isMouseDown = editor.hot.view.isMouseDown();\n      // A printable character reports a single-character `key`; anything else is a function key.\n      const isMeta = event && \"key\" in event\n        ? (event as KeyboardEvent).key.length > 1\n        : false;\n      let dateStr;\n\n      editor.datePicker.style.display = \"block\";\n\n      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      editor.pickaday._onInputFocus = function () {};\n\n      if (editor.originalValue) {\n        dateStr = editor.originalValue;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n        if (editor.getValue() !== editor.originalValue) {\n          editor.setValue(editor.originalValue);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue(\"\");\n        }\n      } else if (editor.cellProperties.defaultDate) {\n        dateStr = editor.cellProperties.defaultDate;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue(\"\");\n        }\n      } else {\n        // if a default date is not defined, set a soft-default-date: display the current day and month in the\n        // datepicker, but don't fill the editor input\n        editor.pickaday.gotoToday();\n      }\n    },\n    afterClose(editor) {\n      if (editor.pickaday?.destroy) {\n        editor.pickaday.destroy();\n      }\n    },\n\n    afterOpen(editor, event) {\n      const cellRect = editor.TD.getBoundingClientRect();\n\n      editor.input.style.width = `${cellRect.width}px`;\n      editor.input.style.height = `${cellRect.height}px`;\n      editor.showDatepicker(editor, event);\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    getDateFormat(\n      editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n    ) {\n      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  height: \"auto\",\n  colHeaders: [\"Item Name\", \"Category\", \"Lead Engineer\", \"Restock Date\", \"Cost\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  width: \"100%\",\n  autoWrapRow: true,\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"itemName\", type: \"text\", width: 130 },\n    { data: \"category\", type: \"text\", width: 120 },\n    { data: \"leadEngineer\", type: \"text\", width: 150 },\n    {\n      data: \"restockDate\",\n      width: 150,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      dateFormat: DATE_FORMAT_US,\n      defaultDate: \"01/01/2020\",\n      datePickerConfig: {\n        firstDay: 0,\n        showWeekNumber: true,\n        disableDayFn(date: Date) {\n          return date.getDay() === 0 || date.getDay() === 6;\n        },\n      },\n    },\n    {\n      data: \"cost\",\n      type: \"numeric\",\n      width: 120,\n      className: \"htRight\",\n      locale: \"en-US\",\n      numericFormat: {\n        style: \"currency\",\n        currency: \"USD\",\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport moment from \"moment\";\nimport Pikaday from \"pikaday\";\nimport \"pikaday/css/pikaday.css\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { rendererFactory } from \"handsontable/renderers\";\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = \"MM/DD/YYYY\";\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\n/* start:skip-in-preview */\n\nconst inputData = [\n  {\n    id: 640329,\n    itemName: \"Lunar Core\",\n    itemNo: \"XJ-12\",\n    leadEngineer: \"Ellen Ripley\",\n    cost: 350000,\n    inStock: true,\n    category: \"Lander\",\n    itemQuality: 87,\n    origin: \"🇺🇸 USA\",\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: \"TechNova\",\n    restockDate: \"2025-08-01\",\n    operationalStatus: \"Awaiting Parts\",\n  },\n  {\n    id: 863104,\n    itemName: \"Zero Thrusters\",\n    itemNo: \"QL-54\",\n    leadEngineer: \"Sam Bell\",\n    cost: 450000,\n    inStock: false,\n    category: \"Propulsion\",\n    itemQuality: 0,\n    origin: \"🇩🇪 Germany\",\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: \"PropelMax\",\n    restockDate: \"2025-09-15\",\n    operationalStatus: \"In Maintenance\",\n  },\n  {\n    id: 395603,\n    itemName: \"EVA Suits\",\n    itemNo: \"PM-67\",\n    leadEngineer: \"Alex Rogan\",\n    cost: 150000,\n    inStock: true,\n    category: \"Equipment\",\n    itemQuality: 79,\n    origin: \"🇮🇹 Italy\",\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: \"SuitCraft\",\n    restockDate: \"2025-10-05\",\n    operationalStatus: \"Ready for Testing\",\n  },\n  {\n    id: 679083,\n    itemName: \"Solar Panels\",\n    itemNo: \"BW-09\",\n    leadEngineer: \"Dave Bowman\",\n    cost: 75000,\n    inStock: true,\n    category: \"Energy\",\n    itemQuality: 95,\n    origin: \"🇺🇸 USA\",\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: \"SolarStream\",\n    restockDate: \"2025-11-10\",\n    operationalStatus: \"Operational\",\n  },\n  {\n    id: 912663,\n    itemName: \"Comm Array\",\n    itemNo: \"ZR-56\",\n    leadEngineer: \"Louise Banks\",\n    cost: 125000,\n    inStock: false,\n    category: \"Communication\",\n    itemQuality: 0,\n    origin: \"🇯🇵 Japan\",\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: \"CommTech\",\n    restockDate: \"2025-12-20\",\n    operationalStatus: \"Decommissioned\",\n  },\n  {\n    id: 315806,\n    itemName: \"Habitat Dome\",\n    itemNo: \"UJ-23\",\n    leadEngineer: \"Dr. Ryan Stone\",\n    cost: 1000000,\n    inStock: true,\n    category: \"Shelter\",\n    itemQuality: 93,\n    origin: \"🇨🇦 Canada\",\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: \"DomeInnovate\",\n    restockDate: \"2026-01-25\",\n    operationalStatus: \"Operational\",\n  },\n  {\n    id: 954632,\n    itemName: \"Oxygen Unit\",\n    itemNo: \"FK-87\",\n    leadEngineer: \"Dr. Grace Augustine\",\n    cost: 600000,\n    inStock: true,\n    category: \"Life Support\",\n    itemQuality: 85,\n    origin: \"🇺🇸 USA\",\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: \"OxyGenius\",\n    restockDate: \"2026-03-02\",\n    operationalStatus: \"Awaiting Parts\",\n  },\n  {\n    id: 734944,\n    itemName: \"Processing Rig\",\n    itemNo: \"LK-13\",\n    leadEngineer: \"Jake Sully\",\n    cost: 350000,\n    inStock: true,\n    category: \"Mining\",\n    itemQuality: 81,\n    origin: \"🇦🇺 Australia\",\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: \"RigTech\",\n    restockDate: \"2026-04-15\",\n    operationalStatus: \"Ready for Testing\",\n  },\n  {\n    id: 834662,\n    itemName: \"Navigation\",\n    itemNo: \"XP-24\",\n    leadEngineer: \"Dr. Ellie Arroway\",\n    cost: 450000,\n    inStock: true,\n    category: \"Navigation\",\n    itemQuality: 89,\n    origin: \"🇫🇷 France\",\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: \"NavSolutions\",\n    restockDate: \"2026-05-30\",\n    operationalStatus: \"In Maintenance\",\n  },\n  {\n    id: 714329,\n    itemName: \"Surveyor Arm\",\n    itemNo: \"QA-86\",\n    leadEngineer: \"Mark Watney\",\n    cost: 100000,\n    inStock: true,\n    category: \"Exploration\",\n    itemQuality: 78,\n    origin: \"🇺🇸 USA\",\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: \"ExploreTech\",\n    restockDate: \"2026-07-12\",\n    operationalStatus: \"Decommissioned\",\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\ntype EditorPropertiesType = {\n  input: HTMLInputElement;\n  pickaday: Pikaday;\n  datePicker: HTMLDivElement;\n  parentDestroyed: boolean;\n};\n\n// Helper type to extract the editor type from factory callbacks\ntype FactoryEditorType<TProps, TMethods> = Parameters<\n  Parameters<\n    typeof editorFactory<TProps, TMethods>\n  >[0][\"init\"]\n>[0];\n\ntype EditorMethodsType = {\n  showDatepicker: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n    event: Event | undefined,\n  ) => void;\n  hideDatepicker: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => void;\n  getDatePickerConfig: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => Pikaday.PikadayOptions;\n  getDateFormat: (\n    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n  ) => string;\n};\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  renderer: rendererFactory(({ td, value, cellProperties }) => {\n    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(\n      cellProperties.renderFormat,\n    );\n  }),\n\n  editor: editorFactory<\n    EditorPropertiesType,\n    EditorMethodsType\n  >({\n    position: \"portal\",\n    shortcuts: [{\n      keys: [[\"ArrowLeft\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"subtract\", 1);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowRight\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"add\", 1);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowUp\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"subtract\", 7);\n        _event.preventDefault();\n      },\n    }, {\n      keys: [[\"ArrowDown\"]],\n      callback: (editor, _event) => {\n        //@ts-ignore\n        editor.pickaday.adjustDate(\"add\", 7);\n        _event.preventDefault();\n      },\n    }],\n    init(editor) {\n      editor.parentDestroyed = false;\n      // create the input element on init. This is a text input that color picker will be attached to.\n      editor.input = editor.hot.rootDocument.createElement(\n        \"INPUT\",\n      ) as HTMLInputElement;\n\n      editor.datePicker = editor.container;\n\n      /**\n       * Prevent recognizing clicking on datepicker as clicking outside of table.\n       */\n      editor.hot.rootDocument.addEventListener(\"mousedown\", (event) => {\n        if (\n          event.target &&\n          (event.target as HTMLElement).classList.contains(\"pika-day\")\n        ) {\n          editor.hideDatepicker(editor);\n        }\n      });\n    },\n    getDatePickerConfig(editor) {\n      const htInput = editor.input;\n      const options: Pikaday.PikadayOptions = {};\n\n      if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n        Object.assign(options, editor.cellProperties.datePickerConfig);\n      }\n      const origOnSelect = options.onSelect;\n      const origOnClose = options.onClose;\n\n      options.field = htInput;\n      options.trigger = htInput;\n      options.container = editor.datePicker;\n      options.bound = false;\n      options.keyboardInput = false;\n      options.format = options.format ?? editor.getDateFormat(editor);\n      // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n      // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n      // `format` above is honored both on display and on input.\n      options.toString = (date, format) => moment(date).format(format);\n      options.parse = (dateString, format) =>\n        moment(dateString, format).toDate();\n      options.reposition = options.reposition || false;\n      // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n      // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n      options.isRTL = false;\n      options.onSelect = function (date) {\n        let dateStr;\n\n        if (!isNaN(date.getTime())) {\n          dateStr = moment(date).format(editor.getDateFormat(editor));\n        }\n        editor.setValue(dateStr);\n\n        if (origOnSelect) {\n          origOnSelect.call(editor.pickaday, date);\n        }\n\n        if (editor.hot.rootWindow.matchMedia(\"(pointer: coarse)\").matches) {\n          editor.hideDatepicker(editor);\n        }\n      };\n      options.onClose = () => {\n        if (!editor.parentDestroyed) {\n          editor.finishEditing(false);\n        }\n        if (origOnClose) {\n          origOnClose();\n        }\n      };\n\n      return options;\n    },\n    hideDatepicker(editor) {\n      editor.pickaday?.hide();\n    },\n    showDatepicker(editor, event) {\n      const dateFormat = editor.getDateFormat(editor);\n      // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      const isMouseDown = editor.hot.view.isMouseDown();\n      // A printable character reports a single-character `key`; anything else is a function key.\n      const isMeta = event && \"key\" in event\n        ? (event as KeyboardEvent).key.length > 1\n        : false;\n      let dateStr;\n\n      editor.datePicker.style.display = \"block\";\n\n      editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n      // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n      // @ts-ignore\n      editor.pickaday._onInputFocus = function () {};\n\n      if (editor.originalValue) {\n        dateStr = editor.originalValue;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n        if (editor.getValue() !== editor.originalValue) {\n          editor.setValue(editor.originalValue);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue(\"\");\n        }\n      } else if (editor.cellProperties.defaultDate) {\n        dateStr = editor.cellProperties.defaultDate;\n\n        if (moment(dateStr, dateFormat, true).isValid()) {\n          editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n        }\n\n        if (!isMeta && !isMouseDown) {\n          editor.setValue(\"\");\n        }\n      } else {\n        // if a default date is not defined, set a soft-default-date: display the current day and month in the\n        // datepicker, but don't fill the editor input\n        editor.pickaday.gotoToday();\n      }\n    },\n    afterClose(editor) {\n      if (editor.pickaday?.destroy) {\n        editor.pickaday.destroy();\n      }\n    },\n\n    afterOpen(editor, event) {\n      const cellRect = editor.TD.getBoundingClientRect();\n\n      editor.input.style.width = `${cellRect.width}px`;\n      editor.input.style.height = `${cellRect.height}px`;\n      editor.showDatepicker(editor, event);\n    },\n    getValue(editor) {\n      return editor.input.value;\n    },\n    setValue(editor, value) {\n      editor.input.value = value;\n    },\n    getDateFormat(\n      editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,\n    ) {\n      return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  height: \"auto\",\n  colHeaders: [\"Item Name\", \"Category\", \"Lead Engineer\", \"Restock Date\", \"Cost\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  width: \"100%\",\n  autoWrapRow: true,\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"itemName\", type: \"text\", width: 130 },\n    { data: \"category\", type: \"text\", width: 120 },\n    { data: \"leadEngineer\", type: \"text\", width: 150 },\n    {\n      data: \"restockDate\",\n      width: 150,\n      allowInvalid: false,\n      ...cellDefinition,\n      renderFormat: DATE_FORMAT_US,\n      dateFormat: DATE_FORMAT_US,\n      defaultDate: \"01/01/2020\",\n      datePickerConfig: {\n        firstDay: 0,\n        showWeekNumber: true,\n        disableDayFn(date: Date) {\n          return date.getDay() === 0 || date.getDay() === 6;\n        },\n      },\n    },\n    {\n      data: \"cost\",\n      type: \"numeric\",\n      width: 120,\n      className: \"htRight\",\n      locale: \"en-US\",\n      numericFormat: {\n        style: \"currency\",\n        currency: \"USD\",\n        minimumFractionDigits: 2,\n      },\n    },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__react__example1.tsx.json
index 6bbe1317d..8714e984b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__pikaday__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\ninterface PikadayEditorInstance {\n  parentDestroyed: boolean;\n  input: HTMLInputElement;\n  datePicker: HTMLElement;\n  pickaday: Pikaday;\n}\n\nconst pikadayRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  td.innerText = value ? moment(new Date(value as string), cellProperties.renderFormat).format(cellProperties.renderFormat) : '';\n});\n\nconst pikadayEditor = editorFactory<PikadayEditorInstance>({\n  position: 'portal',\n  shortcuts: [\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('subtract', 1);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('add', 1);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowUp']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('subtract', 7);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowDown']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('add', 7);\n        _event.preventDefault();\n      },\n    },\n  ],\n  init(editor) {\n    editor.parentDestroyed = false;\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.datePicker = editor.container;\n    editor.hot.rootDocument.addEventListener('mousedown', (event: MouseEvent) => {\n      const target = event.target as Element;\n\n      if (target && target.classList.contains('pika-day')) {\n        editor.hideDatepicker(editor);\n      }\n    });\n  },\n  getDatePickerConfig(editor: any) {\n    const htInput = editor.input;\n    const options: Record<string, any> = {};\n\n    if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n      Object.assign(options, editor.cellProperties.datePickerConfig);\n    }\n\n    const origOnSelect = options.onSelect;\n    const origOnClose = options.onClose;\n\n    options.field = htInput;\n    options.trigger = htInput;\n    options.container = editor.datePicker;\n    options.bound = false;\n    options.keyboardInput = false;\n    options.format = options.format ?? editor.getDateFormat(editor);\n    // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n    // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n    // `format` above is honored both on display and on input.\n    options.toString = (date, format) => moment(date).format(format);\n    options.parse = (dateString, format) => moment(dateString, format).toDate();\n    options.reposition = options.reposition || false;\n    options.isRTL = false;\n    options.onSelect = function (date: Date) {\n      let dateStr: string | undefined;\n\n      if (!isNaN(date.getTime())) {\n        dateStr = moment(date).format(editor.getDateFormat(editor));\n      }\n\n      editor.setValue(dateStr);\n\n      if (origOnSelect) {\n        origOnSelect.call(editor.pickaday, date);\n      }\n\n      if (editor.hot.rootWindow.matchMedia('(pointer: coarse)').matches) {\n        editor.hideDatepicker(editor);\n      }\n    };\n    options.onClose = () => {\n      if (!editor.parentDestroyed) {\n        editor.finishEditing(false);\n      }\n\n      if (origOnClose) {\n        origOnClose();\n      }\n    };\n\n    return options;\n  },\n  hideDatepicker(editor: any) {\n    editor.pickaday?.hide();\n  },\n  showDatepicker(editor: any, event: Event) {\n    const dateFormat = editor.getDateFormat(editor);\n    // @ts-ignore\n    const isMouseDown = editor.hot.view.isMouseDown();\n    // A printable character reports a single-character `key`; anything else is a function key.\n    const isMeta = event && 'key' in event ? (event as KeyboardEvent).key.length > 1 : false;\n\n    let dateStr: string;\n\n    editor.datePicker.style.display = 'block';\n    editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n    // @ts-ignore\n    editor.pickaday._onInputFocus = function () {};\n\n    if (editor.originalValue) {\n      dateStr = editor.originalValue;\n\n      if (moment(dateStr, dateFormat, true).isValid()) {\n        editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n      }\n\n      if (editor.getValue() !== editor.originalValue) {\n        editor.setValue(editor.originalValue);\n      }\n\n      if (!isMeta && !isMouseDown) {\n        editor.setValue('');\n      }\n    } else if (editor.cellProperties.defaultDate) {\n      dateStr = editor.cellProperties.defaultDate;\n\n      if (moment(dateStr, dateFormat, true).isValid()) {\n        editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n      }\n\n      if (!isMeta && !isMouseDown) {\n        editor.setValue('');\n      }\n    } else {\n      editor.pickaday.gotoToday();\n    }\n  },\n  afterClose(editor: any) {\n    if (editor.pickaday?.destroy) {\n      editor.pickaday.destroy();\n    }\n  },\n  afterOpen(editor: any, event: Event) {\n    const cellRect = editor.TD.getBoundingClientRect();\n\n    editor.input.style.width = `${cellRect.width}px`;\n    editor.input.style.height = `${cellRect.height}px`;\n    editor.showDatepicker(editor, event);\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n  },\n  getDateFormat(editor: any): string {\n    return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n  },\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst inputData: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"restockDate\"\n        width={150}\n        allowInvalid={false}\n        hotRenderer={pikadayRenderer}\n        hotEditor={pikadayEditor}\n        renderFormat={DATE_FORMAT_US}\n        dateFormat={DATE_FORMAT_US}\n        correctFormat={true}\n        defaultDate=\"01/01/2020\"\n        datePickerConfig={{\n          firstDay: 0,\n          showWeekNumber: true,\n          disableDayFn(date: Date) {\n            return date.getDay() === 0 || date.getDay() === 6;\n          },\n        }}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"moment\": \"2.31.0\",\n    \"pikaday\": \"1.8.2\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from 'pikaday';\nimport 'pikaday/css/pikaday.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\ninterface PikadayEditorInstance {\n  parentDestroyed: boolean;\n  input: HTMLInputElement;\n  datePicker: HTMLElement;\n  pickaday: Pikaday;\n}\n\nconst pikadayRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  td.innerText = value ? moment(new Date(value as string), cellProperties.renderFormat).format(cellProperties.renderFormat) : '';\n});\n\nconst pikadayEditor = editorFactory<PikadayEditorInstance>({\n  position: 'portal',\n  shortcuts: [\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('subtract', 1);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('add', 1);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowUp']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('subtract', 7);\n        _event.preventDefault();\n      },\n    },\n    {\n      keys: [['ArrowDown']],\n      callback: (editor, _event) => {\n        // @ts-ignore\n        editor.pickaday.adjustDate('add', 7);\n        _event.preventDefault();\n      },\n    },\n  ],\n  init(editor) {\n    editor.parentDestroyed = false;\n    editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n    editor.datePicker = editor.container;\n    editor.hot.rootDocument.addEventListener('mousedown', (event: MouseEvent) => {\n      const target = event.target as Element;\n\n      if (target && target.classList.contains('pika-day')) {\n        editor.hideDatepicker(editor);\n      }\n    });\n  },\n  getDatePickerConfig(editor: any) {\n    const htInput = editor.input;\n    const options: Record<string, any> = {};\n\n    if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n      Object.assign(options, editor.cellProperties.datePickerConfig);\n    }\n\n    const origOnSelect = options.onSelect;\n    const origOnClose = options.onClose;\n\n    options.field = htInput;\n    options.trigger = htInput;\n    options.container = editor.datePicker;\n    options.bound = false;\n    options.keyboardInput = false;\n    options.format = options.format ?? editor.getDateFormat(editor);\n    // Pikaday only formats and parses through Moment.js when it can reach `moment` itself, which\n    // it cannot under a bundler. These two hooks take precedence over its internal path, so the\n    // `format` above is honored both on display and on input.\n    options.toString = (date, format) => moment(date).format(format);\n    options.parse = (dateString, format) => moment(dateString, format).toDate();\n    options.reposition = options.reposition || false;\n    options.isRTL = false;\n    options.onSelect = function (date: Date) {\n      let dateStr: string | undefined;\n\n      if (!isNaN(date.getTime())) {\n        dateStr = moment(date).format(editor.getDateFormat(editor));\n      }\n\n      editor.setValue(dateStr);\n\n      if (origOnSelect) {\n        origOnSelect.call(editor.pickaday, date);\n      }\n\n      if (editor.hot.rootWindow.matchMedia('(pointer: coarse)').matches) {\n        editor.hideDatepicker(editor);\n      }\n    };\n    options.onClose = () => {\n      if (!editor.parentDestroyed) {\n        editor.finishEditing(false);\n      }\n\n      if (origOnClose) {\n        origOnClose();\n      }\n    };\n\n    return options;\n  },\n  hideDatepicker(editor: any) {\n    editor.pickaday?.hide();\n  },\n  showDatepicker(editor: any, event: Event) {\n    const dateFormat = editor.getDateFormat(editor);\n    // @ts-ignore\n    const isMouseDown = editor.hot.view.isMouseDown();\n    // A printable character reports a single-character `key`; anything else is a function key.\n    const isMeta = event && 'key' in event ? (event as KeyboardEvent).key.length > 1 : false;\n\n    let dateStr: string;\n\n    editor.datePicker.style.display = 'block';\n    editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n    // @ts-ignore\n    editor.pickaday._onInputFocus = function () {};\n\n    if (editor.originalValue) {\n      dateStr = editor.originalValue;\n\n      if (moment(dateStr, dateFormat, true).isValid()) {\n        editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n      }\n\n      if (editor.getValue() !== editor.originalValue) {\n        editor.setValue(editor.originalValue);\n      }\n\n      if (!isMeta && !isMouseDown) {\n        editor.setValue('');\n      }\n    } else if (editor.cellProperties.defaultDate) {\n      dateStr = editor.cellProperties.defaultDate;\n\n      if (moment(dateStr, dateFormat, true).isValid()) {\n        editor.pickaday.setDate(moment(dateStr, dateFormat).toDate(), true);\n      }\n\n      if (!isMeta && !isMouseDown) {\n        editor.setValue('');\n      }\n    } else {\n      editor.pickaday.gotoToday();\n    }\n  },\n  afterClose(editor: any) {\n    if (editor.pickaday?.destroy) {\n      editor.pickaday.destroy();\n    }\n  },\n  afterOpen(editor: any, event: Event) {\n    const cellRect = editor.TD.getBoundingClientRect();\n\n    editor.input.style.width = `${cellRect.width}px`;\n    editor.input.style.height = `${cellRect.height}px`;\n    editor.showDatepicker(editor, event);\n  },\n  getValue(editor) {\n    return editor.input.value;\n  },\n  setValue(editor, value) {\n    editor.input.value = value;\n  },\n  getDateFormat(editor: any): string {\n    return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n  },\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n  id: number;\n  itemName: string;\n  itemNo: string;\n  leadEngineer: string;\n  cost: number;\n  inStock: boolean;\n  category: string;\n  itemQuality: number;\n  origin: string;\n  quantity: number;\n  valueStock: number;\n  repairable: boolean;\n  supplierName: string;\n  restockDate: string;\n  operationalStatus: string;\n}\n\nconst inputData: InventoryItem[] = [\n  {\n    id: 640329,\n    itemName: 'Lunar Core',\n    itemNo: 'XJ-12',\n    leadEngineer: 'Ellen Ripley',\n    cost: 350000,\n    inStock: true,\n    category: 'Lander',\n    itemQuality: 87,\n    origin: '🇺🇸 USA',\n    quantity: 2,\n    valueStock: 700000,\n    repairable: false,\n    supplierName: 'TechNova',\n    restockDate: '2025-08-01',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 863104,\n    itemName: 'Zero Thrusters',\n    itemNo: 'QL-54',\n    leadEngineer: 'Sam Bell',\n    cost: 450000,\n    inStock: false,\n    category: 'Propulsion',\n    itemQuality: 0,\n    origin: '🇩🇪 Germany',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'PropelMax',\n    restockDate: '2025-09-15',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 395603,\n    itemName: 'EVA Suits',\n    itemNo: 'PM-67',\n    leadEngineer: 'Alex Rogan',\n    cost: 150000,\n    inStock: true,\n    category: 'Equipment',\n    itemQuality: 79,\n    origin: '🇮🇹 Italy',\n    quantity: 50,\n    valueStock: 7500000,\n    repairable: true,\n    supplierName: 'SuitCraft',\n    restockDate: '2025-10-05',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 679083,\n    itemName: 'Solar Panels',\n    itemNo: 'BW-09',\n    leadEngineer: 'Dave Bowman',\n    cost: 75000,\n    inStock: true,\n    category: 'Energy',\n    itemQuality: 95,\n    origin: '🇺🇸 USA',\n    quantity: 10,\n    valueStock: 750000,\n    repairable: false,\n    supplierName: 'SolarStream',\n    restockDate: '2025-11-10',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 912663,\n    itemName: 'Comm Array',\n    itemNo: 'ZR-56',\n    leadEngineer: 'Louise Banks',\n    cost: 125000,\n    inStock: false,\n    category: 'Communication',\n    itemQuality: 0,\n    origin: '🇯🇵 Japan',\n    quantity: 0,\n    valueStock: 0,\n    repairable: true,\n    supplierName: 'CommTech',\n    restockDate: '2025-12-20',\n    operationalStatus: 'Decommissioned',\n  },\n  {\n    id: 315806,\n    itemName: 'Habitat Dome',\n    itemNo: 'UJ-23',\n    leadEngineer: 'Dr. Ryan Stone',\n    cost: 1000000,\n    inStock: true,\n    category: 'Shelter',\n    itemQuality: 93,\n    origin: '🇨🇦 Canada',\n    quantity: 3,\n    valueStock: 3000000,\n    repairable: false,\n    supplierName: 'DomeInnovate',\n    restockDate: '2026-01-25',\n    operationalStatus: 'Operational',\n  },\n  {\n    id: 954632,\n    itemName: 'Oxygen Unit',\n    itemNo: 'FK-87',\n    leadEngineer: 'Dr. Grace Augustine',\n    cost: 600000,\n    inStock: true,\n    category: 'Life Support',\n    itemQuality: 85,\n    origin: '🇺🇸 USA',\n    quantity: 15,\n    valueStock: 9000000,\n    repairable: true,\n    supplierName: 'OxyGenius',\n    restockDate: '2026-03-02',\n    operationalStatus: 'Awaiting Parts',\n  },\n  {\n    id: 734944,\n    itemName: 'Processing Rig',\n    itemNo: 'LK-13',\n    leadEngineer: 'Jake Sully',\n    cost: 350000,\n    inStock: true,\n    category: 'Mining',\n    itemQuality: 81,\n    origin: '🇦🇺 Australia',\n    quantity: 25,\n    valueStock: 8750000,\n    repairable: true,\n    supplierName: 'RigTech',\n    restockDate: '2026-04-15',\n    operationalStatus: 'Ready for Testing',\n  },\n  {\n    id: 834662,\n    itemName: 'Navigation',\n    itemNo: 'XP-24',\n    leadEngineer: 'Dr. Ellie Arroway',\n    cost: 450000,\n    inStock: true,\n    category: 'Navigation',\n    itemQuality: 89,\n    origin: '🇫🇷 France',\n    quantity: 8,\n    valueStock: 3600000,\n    repairable: false,\n    supplierName: 'NavSolutions',\n    restockDate: '2026-05-30',\n    operationalStatus: 'In Maintenance',\n  },\n  {\n    id: 714329,\n    itemName: 'Surveyor Arm',\n    itemNo: 'QA-86',\n    leadEngineer: 'Mark Watney',\n    cost: 100000,\n    inStock: true,\n    category: 'Exploration',\n    itemQuality: 78,\n    origin: '🇺🇸 USA',\n    quantity: 40,\n    valueStock: 4000000,\n    repairable: true,\n    supplierName: 'ExploreTech',\n    restockDate: '2026-07-12',\n    operationalStatus: 'Decommissioned',\n  },\n];\n\nconst data = inputData.map((item) => ({\n  ...item,\n  restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      height=\"auto\"\n      colHeaders={['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost']}\n      autoRowSize={true}\n      rowHeaders={true}\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"itemName\" type=\"text\" width={130} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn data=\"leadEngineer\" type=\"text\" width={150} />\n      <HotColumn\n        data=\"restockDate\"\n        width={150}\n        allowInvalid={false}\n        hotRenderer={pikadayRenderer}\n        hotEditor={pikadayEditor}\n        renderFormat={DATE_FORMAT_US}\n        dateFormat={DATE_FORMAT_US}\n        correctFormat={true}\n        defaultDate=\"01/01/2020\"\n        datePickerConfig={{\n          firstDay: 0,\n          showWeekNumber: true,\n          disableDayFn(date: Date) {\n            return date.getDay() === 0 || date.getDay() === 6;\n          },\n        }}\n      />\n      <HotColumn\n        data=\"cost\"\n        type=\"numeric\"\n        width={120}\n        className=\"htRight\"\n        locale=\"en-US\"\n        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}\n      />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".ht_editor_visible > input {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  outline: none;\n  margin-top: -1px;\n  margin-left: -1px;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent) !important;\n  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px) !important;\n  border: none !important;\n  font-family: inherit;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n  border: none !important;\n  outline: none !important;\n}\n\n/* Pikaday's own stylesheet ships hardcoded light-mode colors. These rules re-point every\n   visual property at Handsontable's theme variables, so the calendar follows the active\n   theme -- including dark mode.\n\n   Every selector is scoped to the element carrying the theme class. That element is the\n   body-level `.ht-portal` the editor is attached to by `position: 'portal'`, so the\n   `--ht-*` variables and the theme's `color-scheme` resolve on the calendar's own\n   ancestor. Scoping this way also keeps each rule one class more specific than the\n   matching rule in `pikaday.css`, which wins on source order otherwise.\n\n   Handsontable shipped equivalent rules until 18.0, when the built-in Pikaday date editor\n   was replaced by a native date input. The recipe now owns them. */\n[class*='ht-theme-'] .pika-single {\n  position: relative;\n  display: block;\n  z-index: 9999;\n  padding: 10px;\n  font-family: var(--ht-font-family), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n    sans-serif;\n  font-size: var(--ht-font-size);\n  line-height: var(--ht-line-height);\n  font-weight: var(--ht-font-weight);\n  color: var(--ht-foreground-color);\n  background: var(--ht-background-color, #ffffff);\n  border: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);\n  border-radius: var(--ht-menu-border-radius);\n  box-shadow: var(--ht-menu-shadow-x, 0) var(--ht-menu-shadow-y, 0)\n    var(--ht-menu-shadow-blur, 8px)\n    color-mix(\n      in srgb,\n      var(--ht-menu-shadow-color, rgba(0, 0, 0)) var(--ht-menu-shadow-opacity, 100%),\n      transparent\n    );\n}\n\n[class*='ht-theme-'] .pika-single.is-hidden {\n  display: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-row {\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label {\n  position: relative;\n  order: 2;\n  padding: 5px;\n  color: var(--ht-accent-color);\n  background-color: transparent;\n}\n\n[class*='ht-theme-'] .pika-single .pika-label .pika-select {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n/* Replace Pikaday's baked-in PNG arrows with the theme's chevron. `currentColor` on the\n   mask keeps them in step with the accent color in both light and dark mode. */\n[class*='ht-theme-'] .pika-single .pika-prev,\n[class*='ht-theme-'] .pika-single .pika-next {\n  width: var(--ht-icon-size, 20px);\n  height: var(--ht-icon-size, 20px);\n  padding: 0;\n  white-space: nowrap;\n  text-indent: -9999px;\n  cursor: pointer;\n  opacity: 1;\n  color: var(--ht-accent-color);\n  border: none;\n  background-image: none;\n  background-color: currentColor;\n  -webkit-mask-size: contain;\n  mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev.is-disabled,\n[class*='ht-theme-'] .pika-single .pika-next.is-disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n[class*='ht-theme-'] .pika-single .pika-next {\n  order: 3;\n  margin-left: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.64648 10.9393L9.93938 7.64644L6.64648 4.35354' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n[class*='ht-theme-'] .pika-single .pika-prev {\n  order: 1;\n  margin-right: auto;\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49268 11.2929L6.19978 8.00001L9.49268 4.70712' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n}\n\n.pika-single .pika-table,\n[class*='ht-theme-'] .pika-single .pika-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table thead {\n  height: 50px;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th {\n  padding: 1px;\n  vertical-align: middle;\n  color: var(--ht-foreground-color);\n}\n\n[class*='ht-theme-'] .pika-single .pika-table th abbr {\n  text-decoration: none;\n  font-weight: normal;\n  border: none;\n  cursor: initial;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td {\n  padding: 1px;\n  vertical-align: middle;\n}\n\n.pika-single .pika-table .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table .pika-button {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--ht-foreground-color);\n  border: none;\n  border-radius: var(--ht-button-border-radius);\n  box-shadow: none;\n  cursor: pointer;\n  font-size: inherit;\n  text-align: center !important;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table .pika-button:hover,\n[class*='ht-theme-'] .pika-single .pika-table td.is-today .pika-button {\n  color: var(--ht-foreground-color);\n  background: color-mix(\n    in srgb,\n    var(--ht-menu-item-hover-color) var(--ht-menu-item-hover-color-opacity, 12%),\n    transparent\n  );\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button,\n[class*='ht-theme-'] .pika-single .pika-table td.is-selected .pika-button:hover {\n  background: var(--ht-accent-color, #1a42e8);\n  color: var(--ht-primary-button-foreground-color, #ffffff);\n  box-shadow: none;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-disabled .pika-button {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.is-outside-current-month .pika-button {\n  opacity: 0.5;\n}\n\n[class*='ht-theme-'] .pika-single .pika-table td.pika-week {\n  width: calc(100% / 8);\n  text-align: center;\n  color: var(--ht-foreground-color);\n}\n\n/* Right-to-left: Pikaday adds `.is-rtl` to the calendar root. */\n[class*='ht-theme-'] .pika-single.is-rtl .pika-next {\n  transform: rotate(180deg);\n  margin-left: 0;\n  margin-right: auto;\n}\n\n[class*='ht-theme-'] .pika-single.is-rtl .pika-prev {\n  transform: rotate(180deg);\n  margin-left: auto;\n  margin-right: 0;\n}"},"docsPath":"recipes/cell-types/pikaday/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__angular__example1.ts.json
index ebba8e30e..5827d32ad 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-radio></example1-radio>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  override init(): void {}\n  override open(): void {}\n  override close(): void {}\n  override focus(): void {}\n  override getValue(): string { return this.originalValue as string; }\n  override setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer } as any);\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-radio',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    rowHeights: 96,\n    columns: [\n      { data: 'task', type: 'text', width: 300 },\n      { data: 'priority', type: 'radio', width: 160, options: priorityOptions } as Handsontable.ColumnSettings,\n      { data: 'status',   type: 'radio', width: 170, options: statusOptions   } as Handsontable.ColumnSettings,\n    ],\n    afterInit(this: Handsontable.Core) {\n      this.rootElement.addEventListener('keydown', (e) => {\n        if ((e.target as HTMLElement).tagName === 'INPUT') return;\n        if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n        const sel = this.getSelectedLast();\n\n        if (!sel) return;\n\n        const [r, c] = sel;\n\n        if (this.getCellMeta(r, c)['type'] !== 'radio') return;\n\n        const td = this.getCell(r, c);\n        const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n          ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n        if (target) {\n          e.stopImmediatePropagation();\n          e.preventDefault();\n          target.focus();\n        }\n      }, true);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-radio></example1-radio>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst inputData = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  override init(): void {}\n  override open(): void {}\n  override close(): void {}\n  override focus(): void {}\n  override getValue(): string { return this.originalValue as string; }\n  override setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer } as any);\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-radio',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    rowHeights: 96,\n    columns: [\n      { data: 'task', type: 'text', width: 300 },\n      { data: 'priority', type: 'radio', width: 160, options: priorityOptions } as Handsontable.ColumnSettings,\n      { data: 'status',   type: 'radio', width: 170, options: statusOptions   } as Handsontable.ColumnSettings,\n    ],\n    afterInit(this: Handsontable.Core) {\n      this.rootElement.addEventListener('keydown', (e) => {\n        if ((e.target as HTMLElement).tagName === 'INPUT') return;\n        if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n        const sel = this.getSelectedLast();\n\n        if (!sel) return;\n\n        const [r, c] = sel;\n\n        if (this.getCellMeta(r, c)['type'] !== 'radio') return;\n\n        const td = this.getCell(r, c);\n        const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n          ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n        if (target) {\n          e.stopImmediatePropagation();\n          e.preventDefault();\n          target.focus();\n        }\n      }, true);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.js.json
index f9cd17b0a..d9c7c1e75 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\n// Register all Handsontable's modules.\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { task: 'Refactor licensing app navigation', priority: 'high', status: 'in-progress' },\n    { task: 'Theme Builder onboarding tour', priority: 'medium', status: 'todo' },\n    { task: 'MCP server v1 release prep', priority: 'high', status: 'in-progress' },\n    { task: 'GitHub triage rotation docs', priority: 'low', status: 'done' },\n    { task: 'shadcn/ui integration recipe', priority: 'medium', status: 'todo' },\n];\n// Minimal editor stub — all interaction is handled by the renderer.\nclass RadioEditor extends BaseEditor {\n    init() { }\n    open() { }\n    close() { }\n    focus() { }\n    getValue() { return this.originalValue; }\n    setValue(value) { this.originalValue = value; }\n}\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n    while (td.firstChild)\n        td.removeChild(td.firstChild);\n    const options = cellProperties.options || [];\n    const wrapper = document.createElement('div');\n    wrapper.className = 'htRadioCell';\n    wrapper.setAttribute('role', 'radiogroup');\n    const colHeader = instance.getColHeader(column);\n    if (colHeader)\n        wrapper.setAttribute('aria-label', String(colHeader));\n    const isReadOnly = !!cellProperties.readOnly;\n    const hasChecked = options.some((opt) => {\n        const v = typeof opt === 'object' ? opt.value : opt;\n        return String(v) === String(value);\n    });\n    // Cycle to the next or previous option and commit via setDataAtCell.\n    // queueMicrotask restores focus after Handsontable re-renders the cell.\n    const cycle = (direction) => {\n        if (!options.length)\n            return;\n        const i = options.findIndex((opt) => {\n            const v = typeof opt === 'object' ? opt.value : opt;\n            return String(v) === String(value);\n        });\n        const last = options.length - 1;\n        const next = direction === 'next'\n            ? (i === last || i === -1 ? 0 : i + 1)\n            : (i <= 0 ? last : i - 1);\n        const newValue = typeof options[next] === 'object'\n            ? options[next].value\n            : options[next];\n        instance.setDataAtCell(row, column, newValue);\n        queueMicrotask(() => {\n            const newTd = instance.getCell(row, column);\n            newTd?.querySelector(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n        });\n    };\n    options.forEach((opt, idx) => {\n        const optValue = typeof opt === 'object' ? opt.value : opt;\n        const optLabel = typeof opt === 'object' ? opt.label : opt;\n        const label = document.createElement('label');\n        label.className = 'htUIRadio';\n        const input = document.createElement('input');\n        input.type = 'radio';\n        input.className = 'htUIRadioInput';\n        input.name = `radio-r${row}-c${column}`;\n        input.value = optValue;\n        input.checked = String(optValue) === String(value);\n        // Roving tabindex: exactly one radio per group is tabbable.\n        input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n        input.disabled = isReadOnly;\n        const span = document.createElement('span');\n        span.className = 'htUIRadioLabel';\n        span.textContent = optLabel;\n        label.appendChild(input);\n        label.appendChild(span);\n        wrapper.appendChild(label);\n        input.addEventListener('change', (e) => {\n            e.stopPropagation();\n            const v = e.target.value;\n            instance.setDataAtCell(row, column, v);\n            queueMicrotask(() => {\n                const newTd = instance.getCell(row, column);\n                newTd?.querySelector(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n            });\n        });\n        // Stop mousedown so Handsontable doesn't hijack the click for cell selection.\n        label.addEventListener('mousedown', (e) => e.stopPropagation());\n        input.addEventListener('keydown', (e) => {\n            if (e.key === 'Escape') {\n                e.preventDefault();\n                e.stopPropagation();\n                instance.selectCell(row, column);\n                return;\n            }\n            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n                e.preventDefault();\n                e.stopPropagation();\n                cycle('next');\n                return;\n            }\n            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n                e.preventDefault();\n                e.stopPropagation();\n                cycle('prev');\n                return;\n            }\n            // Block other keys from reaching Handsontable's shortcut system.\n            e.stopPropagation();\n        });\n    });\n    td.appendChild(wrapper);\n    td.style.verticalAlign = 'top';\n});\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst priorityOptions = [\n    { value: 'low', label: 'Low' },\n    { value: 'medium', label: 'Medium' },\n    { value: 'high', label: 'High' },\n];\nconst statusOptions = [\n    { value: 'todo', label: 'Todo' },\n    { value: 'in-progress', label: 'In progress' },\n    { value: 'done', label: 'Done' },\n];\n// Define configuration options for the Handsontable\nconst hotOptions = {\n    data,\n    colHeaders: ['Task', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    rowHeights: 96,\n    columns: [\n        { data: 'task', type: 'text', width: 300 },\n        { data: 'priority', type: 'radio', options: priorityOptions, width: 160 },\n        { data: 'status', type: 'radio', options: statusOptions, width: 170 },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n};\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);\n// Enter / F2 on a radio cell: move focus to the checked (or first) radio input.\n// Use capture so this fires before Handsontable's own keydown handlers.\nhot.rootElement.addEventListener('keydown', (e) => {\n    if (e.target.tagName === 'INPUT')\n        return;\n    if (e.key !== 'Enter' && e.key !== 'F2')\n        return;\n    const sel = hot.getSelectedLast();\n    if (!sel)\n        return;\n    const [r, c] = sel;\n    if (hot.getCellMeta(r, c).type !== 'radio')\n        return;\n    const td = hot.getCell(r, c);\n    const target = td?.querySelector('input[type=\"radio\"]:checked')\n        ?? td?.querySelector('input[type=\"radio\"]');\n    if (target) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        target.focus();\n    }\n}, true);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\n// Register all Handsontable's modules.\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { task: 'Refactor licensing app navigation', priority: 'high', status: 'in-progress' },\n    { task: 'Theme Builder onboarding tour', priority: 'medium', status: 'todo' },\n    { task: 'MCP server v1 release prep', priority: 'high', status: 'in-progress' },\n    { task: 'GitHub triage rotation docs', priority: 'low', status: 'done' },\n    { task: 'shadcn/ui integration recipe', priority: 'medium', status: 'todo' },\n];\n// Minimal editor stub — all interaction is handled by the renderer.\nclass RadioEditor extends BaseEditor {\n    init() { }\n    open() { }\n    close() { }\n    focus() { }\n    getValue() { return this.originalValue; }\n    setValue(value) { this.originalValue = value; }\n}\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n    while (td.firstChild)\n        td.removeChild(td.firstChild);\n    const options = cellProperties.options || [];\n    const wrapper = document.createElement('div');\n    wrapper.className = 'htRadioCell';\n    wrapper.setAttribute('role', 'radiogroup');\n    const colHeader = instance.getColHeader(column);\n    if (colHeader)\n        wrapper.setAttribute('aria-label', String(colHeader));\n    const isReadOnly = !!cellProperties.readOnly;\n    const hasChecked = options.some((opt) => {\n        const v = typeof opt === 'object' ? opt.value : opt;\n        return String(v) === String(value);\n    });\n    // Cycle to the next or previous option and commit via setDataAtCell.\n    // queueMicrotask restores focus after Handsontable re-renders the cell.\n    const cycle = (direction) => {\n        if (!options.length)\n            return;\n        const i = options.findIndex((opt) => {\n            const v = typeof opt === 'object' ? opt.value : opt;\n            return String(v) === String(value);\n        });\n        const last = options.length - 1;\n        const next = direction === 'next'\n            ? (i === last || i === -1 ? 0 : i + 1)\n            : (i <= 0 ? last : i - 1);\n        const newValue = typeof options[next] === 'object'\n            ? options[next].value\n            : options[next];\n        instance.setDataAtCell(row, column, newValue);\n        queueMicrotask(() => {\n            const newTd = instance.getCell(row, column);\n            newTd?.querySelector(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n        });\n    };\n    options.forEach((opt, idx) => {\n        const optValue = typeof opt === 'object' ? opt.value : opt;\n        const optLabel = typeof opt === 'object' ? opt.label : opt;\n        const label = document.createElement('label');\n        label.className = 'htUIRadio';\n        const input = document.createElement('input');\n        input.type = 'radio';\n        input.className = 'htUIRadioInput';\n        input.name = `radio-r${row}-c${column}`;\n        input.value = optValue;\n        input.checked = String(optValue) === String(value);\n        // Roving tabindex: exactly one radio per group is tabbable.\n        input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n        input.disabled = isReadOnly;\n        const span = document.createElement('span');\n        span.className = 'htUIRadioLabel';\n        span.textContent = optLabel;\n        label.appendChild(input);\n        label.appendChild(span);\n        wrapper.appendChild(label);\n        input.addEventListener('change', (e) => {\n            e.stopPropagation();\n            const v = e.target.value;\n            instance.setDataAtCell(row, column, v);\n            queueMicrotask(() => {\n                const newTd = instance.getCell(row, column);\n                newTd?.querySelector(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n            });\n        });\n        // Stop mousedown so Handsontable doesn't hijack the click for cell selection.\n        label.addEventListener('mousedown', (e) => e.stopPropagation());\n        input.addEventListener('keydown', (e) => {\n            if (e.key === 'Escape') {\n                e.preventDefault();\n                e.stopPropagation();\n                instance.selectCell(row, column);\n                return;\n            }\n            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n                e.preventDefault();\n                e.stopPropagation();\n                cycle('next');\n                return;\n            }\n            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n                e.preventDefault();\n                e.stopPropagation();\n                cycle('prev');\n                return;\n            }\n            // Block other keys from reaching Handsontable's shortcut system.\n            e.stopPropagation();\n        });\n    });\n    td.appendChild(wrapper);\n    td.style.verticalAlign = 'top';\n});\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst priorityOptions = [\n    { value: 'low', label: 'Low' },\n    { value: 'medium', label: 'Medium' },\n    { value: 'high', label: 'High' },\n];\nconst statusOptions = [\n    { value: 'todo', label: 'Todo' },\n    { value: 'in-progress', label: 'In progress' },\n    { value: 'done', label: 'Done' },\n];\n// Define configuration options for the Handsontable\nconst hotOptions = {\n    data,\n    colHeaders: ['Task', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    rowHeights: 96,\n    columns: [\n        { data: 'task', type: 'text', width: 300 },\n        { data: 'priority', type: 'radio', options: priorityOptions, width: 160 },\n        { data: 'status', type: 'radio', options: statusOptions, width: 170 },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n};\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);\n// Enter / F2 on a radio cell: move focus to the checked (or first) radio input.\n// Use capture so this fires before Handsontable's own keydown handlers.\nhot.rootElement.addEventListener('keydown', (e) => {\n    if (e.target.tagName === 'INPUT')\n        return;\n    if (e.key !== 'Enter' && e.key !== 'F2')\n        return;\n    const sel = hot.getSelectedLast();\n    if (!sel)\n        return;\n    const [r, c] = sel;\n    if (hot.getCellMeta(r, c).type !== 'radio')\n        return;\n    const td = hot.getCell(r, c);\n    const target = td?.querySelector('input[type=\"radio\"]:checked')\n        ?? td?.querySelector('input[type=\"radio\"]');\n    if (target) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        target.focus();\n    }\n}, true);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.ts.json
index c77f79ec9..af33e990c 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\n// Minimal editor stub — all interaction is handled by the renderer.\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  // Cycle to the next or previous option and commit via setDataAtCell.\n  // queueMicrotask restores focus after Handsontable re-renders the cell.\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    // Roving tabindex: exactly one radio per group is tabbable.\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    // Stop mousedown so Handsontable doesn't hijack the click for cell selection.\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      // Block other keys from reaching Handsontable's shortcut system.\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Task', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  rowHeights: 96,\n  columns: [\n    { data: 'task',     type: 'text',  width: 300 },\n    { data: 'priority', type: 'radio', options: priorityOptions, width: 160 } as Handsontable.ColumnSettings,\n    { data: 'status',   type: 'radio', options: statusOptions,   width: 170 } as Handsontable.ColumnSettings,\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);\n\n// Enter / F2 on a radio cell: move focus to the checked (or first) radio input.\n// Use capture so this fires before Handsontable's own keydown handlers.\nhot.rootElement.addEventListener('keydown', (e) => {\n  if ((e.target as HTMLElement).tagName === 'INPUT') return;\n  if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n  const sel = hot.getSelectedLast();\n\n  if (!sel) return;\n\n  const [r, c] = sel;\n\n  if (hot.getCellMeta(r, c).type !== 'radio') return;\n\n  const td = hot.getCell(r, c);\n  const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n    ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n  if (target) {\n    e.stopImmediatePropagation();\n    e.preventDefault();\n    target.focus();\n  }\n}, true);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\n// Minimal editor stub — all interaction is handled by the renderer.\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  // Cycle to the next or previous option and commit via setDataAtCell.\n  // queueMicrotask restores focus after Handsontable re-renders the cell.\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    // Roving tabindex: exactly one radio per group is tabbable.\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    // Stop mousedown so Handsontable doesn't hijack the click for cell selection.\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      // Block other keys from reaching Handsontable's shortcut system.\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: ['Task', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  rowHeights: 96,\n  columns: [\n    { data: 'task',     type: 'text',  width: 300 },\n    { data: 'priority', type: 'radio', options: priorityOptions, width: 160 } as Handsontable.ColumnSettings,\n    { data: 'status',   type: 'radio', options: statusOptions,   width: 170 } as Handsontable.ColumnSettings,\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);\n\n// Enter / F2 on a radio cell: move focus to the checked (or first) radio input.\n// Use capture so this fires before Handsontable's own keydown handlers.\nhot.rootElement.addEventListener('keydown', (e) => {\n  if ((e.target as HTMLElement).tagName === 'INPUT') return;\n  if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n  const sel = hot.getSelectedLast();\n\n  if (!sel) return;\n\n  const [r, c] = sel;\n\n  if (hot.getCellMeta(r, c).type !== 'radio') return;\n\n  const td = hot.getCell(r, c);\n  const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n    ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n  if (target) {\n    e.stopImmediatePropagation();\n    e.preventDefault();\n    target.focus();\n  }\n}, true);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__react__example1.tsx.json
index 675ef75b9..a4fbe9e11 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n/* start:skip-in-preview */\ninterface TaskRow {\n  task: string;\n  priority: string;\n  status: string;\n}\n\nconst data: TaskRow[] = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<{ hotInstance: Handsontable.Core | null }>(null);\n\n  const afterInit = function(this: Handsontable.Core) {\n    this.rootElement.addEventListener('keydown', (e) => {\n      if ((e.target as HTMLElement).tagName === 'INPUT') return;\n      if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n      const sel = this.getSelectedLast();\n\n      if (!sel) return;\n\n      const [r, c] = sel;\n\n      if (this.getCellMeta(r, c).type !== 'radio') return;\n\n      const td = this.getCell(r, c);\n      const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n        ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n      if (target) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        target.focus();\n      }\n    }, true);\n  };\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Task', 'Priority', 'Status']}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      rowHeights={96}\n      afterInit={afterInit}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\"     type=\"text\"  width={300} />\n      <HotColumn data=\"priority\" type=\"radio\" width={160} {...{ options: priorityOptions } as object} />\n      <HotColumn data=\"status\"   type=\"radio\" width={170} {...{ options: statusOptions } as object} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n/* start:skip-in-preview */\ninterface TaskRow {\n  task: string;\n  priority: string;\n  status: string;\n}\n\nconst data: TaskRow[] = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\nconst priorityOptions: RadioOption[] = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions: RadioOption[] = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<{ hotInstance: Handsontable.Core | null }>(null);\n\n  const afterInit = function(this: Handsontable.Core) {\n    this.rootElement.addEventListener('keydown', (e) => {\n      if ((e.target as HTMLElement).tagName === 'INPUT') return;\n      if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n      const sel = this.getSelectedLast();\n\n      if (!sel) return;\n\n      const [r, c] = sel;\n\n      if (this.getCellMeta(r, c).type !== 'radio') return;\n\n      const td = this.getCell(r, c);\n      const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n        ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n      if (target) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        target.focus();\n      }\n    }, true);\n  };\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      colHeaders={['Task', 'Priority', 'Status']}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      rowHeights={96}\n      afterInit={afterInit}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\"     type=\"text\"  width={300} />\n      <HotColumn data=\"priority\" type=\"radio\" width={160} {...{ options: priorityOptions } as object} />\n      <HotColumn data=\"status\"   type=\"radio\" width={170} {...{ options: statusOptions } as object} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and\n   filter panels are not affected. The radio indicator appearance (dot, border,\n   checked state) is intentionally left to the Handsontable theme. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n/* Ensure pointer cursor and prevent default outline; theme handles appearance. */\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}"},"docsPath":"recipes/cell-types/radio/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__vue__example1.vue.json
index f29c74e4d..572a8be1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__radio__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef, onMounted } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\nconst priorityOptions = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\nconst hotSettings: GridSettings = {\n  rowHeights: 96,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) return;\n  hot.rootElement.addEventListener('keydown', (e) => {\n    if ((e.target as HTMLElement).tagName === 'INPUT') return;\n    if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n    const sel = hot.getSelectedLast();\n\n    if (!sel) return;\n\n    const [r, c] = sel;\n\n    if (hot.getCellMeta(r, c).type !== 'radio') return;\n\n    const td = hot.getCell(r, c);\n    const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n      ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n    if (target) {\n      e.stopImmediatePropagation();\n      e.preventDefault();\n      target.focus();\n    }\n  }, true);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable\n      ref=\"hotRef\"\n      :data=\"data\"\n      :col-headers=\"['Task', 'Priority', 'Status']\"\n      :settings=\"hotSettings\"\n    >\n      <HotColumn data=\"task\"     type=\"text\"  :width=\"300\" />\n      <HotColumn data=\"priority\" type=\"radio\" :width=\"160\" :settings=\"{ options: priorityOptions }\" />\n      <HotColumn data=\"status\"   type=\"radio\" :width=\"170\" :settings=\"{ options: statusOptions }\" />\n    </HotTable>\n  </div>\n</template>\n\n<style>\n/* Not scoped: Handsontable cells are outside the component root. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}\n</style>"},"docsPath":"recipes/cell-types/radio/vue/example1.vue","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"Vue 3"}
+{"framework":"vue","displayName":"Recipes ▸ Cell Types ▸ Radio buttons · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { useTemplateRef, onMounted } from 'vue';\nimport { HotTable, HotColumn } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport type { CellProperties } from 'handsontable/settings';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype RadioOption = { value: string; label: string } | string;\n\ninterface RadioCellProperties extends CellProperties {\n  options: RadioOption[];\n}\n\nclass RadioEditor extends BaseEditor {\n  init(): void {}\n  open(): void {}\n  close(): void {}\n  focus(): void {}\n  getValue(): string { return this.originalValue as string; }\n  setValue(value: string): void { this.originalValue = value; }\n}\n\nconst radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {\n  while (td.firstChild) td.removeChild(td.firstChild);\n\n  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];\n  const wrapper = document.createElement('div');\n\n  wrapper.className = 'htRadioCell';\n  wrapper.setAttribute('role', 'radiogroup');\n\n  const colHeader = instance.getColHeader(column as number);\n\n  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));\n\n  const isReadOnly = !!cellProperties.readOnly;\n\n  const hasChecked = options.some((opt) => {\n    const v = typeof opt === 'object' ? opt.value : opt;\n\n    return String(v) === String(value);\n  });\n\n  const cycle = (direction: 'next' | 'prev') => {\n    if (!options.length) return;\n    const i = options.findIndex((opt) => {\n      const v = typeof opt === 'object' ? opt.value : opt;\n\n      return String(v) === String(value);\n    });\n    const last = options.length - 1;\n    const next = direction === 'next'\n      ? (i === last || i === -1 ? 0 : i + 1)\n      : (i <= 0 ? last : i - 1);\n    const newValue = typeof options[next] === 'object'\n      ? (options[next] as { value: string }).value\n      : (options[next] as string);\n\n    instance.setDataAtCell(row as number, column as number, newValue);\n    queueMicrotask(() => {\n      const newTd = instance.getCell(row as number, column as number);\n\n      newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(newValue)}\"]`)?.focus();\n    });\n  };\n\n  options.forEach((opt, idx) => {\n    const optValue = typeof opt === 'object' ? opt.value : opt;\n    const optLabel = typeof opt === 'object' ? opt.label : opt;\n    const label = document.createElement('label');\n\n    label.className = 'htUIRadio';\n\n    const input = document.createElement('input');\n\n    input.type = 'radio';\n    input.className = 'htUIRadioInput';\n    input.name = `radio-r${row}-c${column}`;\n    input.value = optValue;\n    input.checked = String(optValue) === String(value);\n    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;\n    input.disabled = isReadOnly;\n\n    const span = document.createElement('span');\n\n    span.className = 'htUIRadioLabel';\n    span.textContent = optLabel;\n\n    label.appendChild(input);\n    label.appendChild(span);\n    wrapper.appendChild(label);\n\n    input.addEventListener('change', (e) => {\n      e.stopPropagation();\n      const v = (e.target as HTMLInputElement).value;\n\n      instance.setDataAtCell(row as number, column as number, v);\n      queueMicrotask(() => {\n        const newTd = instance.getCell(row as number, column as number);\n\n        newTd?.querySelector<HTMLInputElement>(`input[type=\"radio\"][value=\"${CSS.escape(v)}\"]`)?.focus();\n      });\n    });\n\n    label.addEventListener('mousedown', (e) => e.stopPropagation());\n\n    input.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        instance.selectCell(row as number, column as number);\n\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('next');\n\n        return;\n      }\n      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        e.stopPropagation();\n        cycle('prev');\n\n        return;\n      }\n      e.stopPropagation();\n    });\n  });\n\n  td.appendChild(wrapper);\n  td.style.verticalAlign = 'top';\n});\n\nregisterCellType('radio', { editor: RadioEditor, renderer: radioRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },\n  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },\n  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },\n  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },\n  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },\n];\n/* end:skip-in-preview */\n\nconst priorityOptions = [\n  { value: 'low',    label: 'Low'    },\n  { value: 'medium', label: 'Medium' },\n  { value: 'high',   label: 'High'   },\n];\n\nconst statusOptions = [\n  { value: 'todo',        label: 'Todo'        },\n  { value: 'in-progress', label: 'In progress' },\n  { value: 'done',        label: 'Done'        },\n];\n\nconst hotSettings: GridSettings = {\n  rowHeights: 96,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  if (!hot) return;\n  hot.rootElement.addEventListener('keydown', (e) => {\n    if ((e.target as HTMLElement).tagName === 'INPUT') return;\n    if (e.key !== 'Enter' && e.key !== 'F2') return;\n\n    const sel = hot.getSelectedLast();\n\n    if (!sel) return;\n\n    const [r, c] = sel;\n\n    if (hot.getCellMeta(r, c).type !== 'radio') return;\n\n    const td = hot.getCell(r, c);\n    const target = td?.querySelector<HTMLInputElement>('input[type=\"radio\"]:checked')\n      ?? td?.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n\n    if (target) {\n      e.stopImmediatePropagation();\n      e.preventDefault();\n      target.focus();\n    }\n  }, true);\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable\n      ref=\"hotRef\"\n      :data=\"data\"\n      :col-headers=\"['Task', 'Priority', 'Status']\"\n      :settings=\"hotSettings\"\n    >\n      <HotColumn data=\"task\"     type=\"text\"  :width=\"300\" />\n      <HotColumn data=\"priority\" type=\"radio\" :width=\"160\" :settings=\"{ options: priorityOptions }\" />\n      <HotColumn data=\"status\"   type=\"radio\" :width=\"170\" :settings=\"{ options: statusOptions }\" />\n    </HotTable>\n  </div>\n</template>\n\n<style>\n/* Not scoped: Handsontable cells are outside the component root. */\n.htRadioCell {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n  line-height: 1.4;\n}\n\n.htRadioCell .htUIRadio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--ht-foreground-color, #1f2937);\n  padding: 2px 6px !important;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.htRadioCell .htUIRadioLabel {\n  flex: 1;\n}\n\n.htRadioCell .htUIRadio > input[type='radio'] {\n  cursor: pointer;\n}\n</style>"},"docsPath":"recipes/cell-types/radio/vue/example1.vue","breadcrumb":["Recipes","Cell Types","Radio buttons"],"guide":"recipes/cell-types/radio/radio.md","guideTitle":"Radio buttons","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/radio","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__angular__example1.ts.json
index 284ebcf4c..7bb91d237 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-rating></example1-rating>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  KeyboardShortcutConfig,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst inputData = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  selector: 'example1-star-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"rating-cell\">\n      @for (star of stars; track $index) {\n        <span class=\"rating-star\" [class.active]=\"$index < value\" [innerHTML]=\"starSvgMarkup\"></span>\n      }\n    </div>`,\n})\nexport class StarRendererComponent extends HotCellRendererAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-star-editor',\n  template: `\n    <div class=\"rating-editor\" (mouseover)=\"onMouseOver($event)\" (mousedown)=\"onMouseDown()\">\n      @for (star of stars; track $index) {\n        <span\n          [attr.data-value]=\"$index + 1\"\n          class=\"rating-star\"\n          [class.active]=\"$index < getValue()\"\n          [class.current]=\"isCurrentStar($index)\"\n          [innerHTML]=\"starSvgMarkup\"\n        ></span>\n      }\n    </div>\n  `,\n})\nexport class StarEditorComponent extends HotCellEditorAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n\n  isCurrentStar(index: number): boolean {\n    return (index + 1) === parseInt(this.getValue()?.toString() ?? '0', 10);\n  }\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (_editor, event) => {\n        this.setValue(parseInt((event as KeyboardEvent).key, 10));\n        this.cdr.detectChanges();\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (_editor, _event) => {\n        if (parseInt(this.getValue()?.toString() ?? '0') < 5) {\n          this.setValue(parseInt(this.getValue()?.toString() ?? '0') + 1);\n          this.cdr.detectChanges();\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (_editor, _event) => {\n        if (parseInt(this.getValue()?.toString() ?? '0') > 1) {\n          this.setValue(parseInt(this.getValue()?.toString() ?? '0') - 1);\n          this.cdr.detectChanges();\n        }\n      },\n    },\n  ];\n\n  onMouseOver(event: MouseEvent): void {\n    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;\n\n    if (\n      star?.dataset['value'] &&\n      parseInt(this.getValue()?.toString() ?? '0') !== parseInt(star.dataset['value'], 10)\n    ) {\n      this.setValue(parseInt(star.dataset['value'], 10));\n      this.cdr.detectChanges();\n    }\n  }\n\n  onMouseDown(): void {\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-rating',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],\n    columns: [\n      { data: 'product', type: 'text', width: 240 },\n      { data: 'category', type: 'text', width: 120 },\n      {\n        data: 'rating',\n        width: 150,\n        renderer: StarRendererComponent,\n        editor: StarEditorComponent,\n        validator: (value: unknown, callback: (valid: boolean) => void) => {\n          const num = parseInt(String(value), 10);\n\n          callback(num >= 1 && num <= 5);\n        },\n      },\n      { data: 'reviews', type: 'numeric', width: 80 },\n      { data: 'price', type: 'numeric', width: 80 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0);\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-rating></example1-rating>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport {\n  GridSettings,\n  HotCellEditorAdvancedComponent,\n  HotCellRendererAdvancedComponent,\n  KeyboardShortcutConfig,\n  HotTableModule\n} from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst inputData = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  selector: 'example1-star-renderer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"rating-cell\">\n      @for (star of stars; track $index) {\n        <span class=\"rating-star\" [class.active]=\"$index < value\" [innerHTML]=\"starSvgMarkup\"></span>\n      }\n    </div>`,\n})\nexport class StarRendererComponent extends HotCellRendererAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n}\n\n@Component({\n  standalone: true,\n  selector: 'example1-star-editor',\n  template: `\n    <div class=\"rating-editor\" (mouseover)=\"onMouseOver($event)\" (mousedown)=\"onMouseDown()\">\n      @for (star of stars; track $index) {\n        <span\n          [attr.data-value]=\"$index + 1\"\n          class=\"rating-star\"\n          [class.active]=\"$index < getValue()\"\n          [class.current]=\"isCurrentStar($index)\"\n          [innerHTML]=\"starSvgMarkup\"\n        ></span>\n      }\n    </div>\n  `,\n})\nexport class StarEditorComponent extends HotCellEditorAdvancedComponent<number> {\n  readonly stars = Array(5);\n  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);\n\n  isCurrentStar(index: number): boolean {\n    return (index + 1) === parseInt(this.getValue()?.toString() ?? '0', 10);\n  }\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  override shortcuts?: KeyboardShortcutConfig[] = [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (_editor, event) => {\n        this.setValue(parseInt((event as KeyboardEvent).key, 10));\n        this.cdr.detectChanges();\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (_editor, _event) => {\n        if (parseInt(this.getValue()?.toString() ?? '0') < 5) {\n          this.setValue(parseInt(this.getValue()?.toString() ?? '0') + 1);\n          this.cdr.detectChanges();\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (_editor, _event) => {\n        if (parseInt(this.getValue()?.toString() ?? '0') > 1) {\n          this.setValue(parseInt(this.getValue()?.toString() ?? '0') - 1);\n          this.cdr.detectChanges();\n        }\n      },\n    },\n  ];\n\n  onMouseOver(event: MouseEvent): void {\n    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;\n\n    if (\n      star?.dataset['value'] &&\n      parseInt(this.getValue()?.toString() ?? '0') !== parseInt(star.dataset['value'], 10)\n    ) {\n      this.setValue(parseInt(star.dataset['value'], 10));\n      this.cdr.detectChanges();\n    }\n  }\n\n  onMouseDown(): void {\n    this.finishEdit.emit();\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-rating',\n  template: `<div><hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table></div>`,\n})\nexport class AppComponent {\n  readonly data = inputData;\n\n  readonly gridSettings: GridSettings = {\n    autoRowSize: true,\n    rowHeaders: true,\n    autoWrapRow: true,\n    height: 'auto',\n    width: '100%',\n    headerClassName: 'htLeft',\n    colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],\n    columns: [\n      { data: 'product', type: 'text', width: 240 },\n      { data: 'category', type: 'text', width: 120 },\n      {\n        data: 'rating',\n        width: 150,\n        renderer: StarRendererComponent,\n        editor: StarEditorComponent,\n        validator: (value: unknown, callback: (valid: boolean) => void) => {\n          const num = parseInt(String(value), 10);\n\n          callback(num >= 1 && num <= 5);\n        },\n      },\n      { data: 'reviews', type: 'numeric', width: 80 },\n      { data: 'price', type: 'numeric', width: 80 },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0);\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.js.json
index 40abffdc5..7043856a5 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n      { length: 5 },\n      (_, index) => `<span class=\"rating-star ${index < value ? 'active' : ''}\">${starSvg}</span>`\n    ).join('')}</div>`;\n  }),\n  validator: (value, callback) => {\n    value = parseInt(value);\n    callback(value >= 0 && value <= 100);\n  },\n  editor: editorFactory({\n    shortcuts: [\n      {\n        keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n        callback: (editor, _event) => {\n          editor.setValue(_event.key);\n        },\n      },\n      {\n        keys: [['ArrowRight']],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) < 5) {\n            editor.setValue(parseInt(editor.value) + 1);\n          }\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) > 1) {\n            editor.setValue(parseInt(editor.value) - 1);\n          }\n        },\n      },\n    ],\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('DIV');\n      editor.input.classList.add('rating-editor');\n    },\n    afterInit(editor) {\n      editor.input.addEventListener('mouseover', (event) => {\n        const star = event.target.closest('.rating-star');\n\n        if (star?.dataset.value && parseInt(editor.value) !== parseInt(star.dataset.value)) {\n          editor.setValue(star.dataset.value);\n        }\n      });\n      editor.input.addEventListener('mousedown', () => {\n        editor.finishEditing();\n      });\n    },\n    render(editor) {\n      editor.input.innerHTML = Array.from(\n        { length: 5 },\n        (_, index) =>\n          `<span data-value=\"${index + 1}\" class=\"rating-star ${index < editor.value ? 'active' : ''}${\n            index + 1 === parseInt(editor.value) ? ' current' : ''\n          }\">${starSvg}</span>`\n      ).join('');\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 240 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'rating', width: 150, ...cellDefinition },\n    { data: 'reviews', type: 'numeric', width: 80 },\n    { data: 'price', type: 'numeric', width: 80 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst cellDefinition = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n      { length: 5 },\n      (_, index) => `<span class=\"rating-star ${index < value ? 'active' : ''}\">${starSvg}</span>`\n    ).join('')}</div>`;\n  }),\n  validator: (value, callback) => {\n    value = parseInt(value);\n    callback(value >= 0 && value <= 100);\n  },\n  editor: editorFactory({\n    shortcuts: [\n      {\n        keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n        callback: (editor, _event) => {\n          editor.setValue(_event.key);\n        },\n      },\n      {\n        keys: [['ArrowRight']],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) < 5) {\n            editor.setValue(parseInt(editor.value) + 1);\n          }\n        },\n      },\n      {\n        keys: [['ArrowLeft']],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) > 1) {\n            editor.setValue(parseInt(editor.value) - 1);\n          }\n        },\n      },\n    ],\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement('DIV');\n      editor.input.classList.add('rating-editor');\n    },\n    afterInit(editor) {\n      editor.input.addEventListener('mouseover', (event) => {\n        const star = event.target.closest('.rating-star');\n\n        if (star?.dataset.value && parseInt(editor.value) !== parseInt(star.dataset.value)) {\n          editor.setValue(star.dataset.value);\n        }\n      });\n      editor.input.addEventListener('mousedown', () => {\n        editor.finishEditing();\n      });\n    },\n    render(editor) {\n      editor.input.innerHTML = Array.from(\n        { length: 5 },\n        (_, index) =>\n          `<span data-value=\"${index + 1}\" class=\"rating-star ${index < editor.value ? 'active' : ''}${\n            index + 1 === parseInt(editor.value) ? ' current' : ''\n          }\">${starSvg}</span>`\n      ).join('');\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n  data,\n  colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  headerClassName: 'htLeft',\n  columns: [\n    { data: 'product', type: 'text', width: 240 },\n    { data: 'category', type: 'text', width: 120 },\n    { data: 'rating', width: 150, ...cellDefinition },\n    { data: 'reviews', type: 'numeric', width: 80 },\n    { data: 'price', type: 'numeric', width: 80 },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.ts.json
index 00570211b..ec017091b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { rendererFactory } from \"handsontable/renderers\";\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { product: \"Dashboard Pro\", category: \"Analytics\", rating: 5, reviews: 342, price: 49 },\n  { product: \"Form Builder\", category: \"Tools\", rating: 4, reviews: 218, price: 29 },\n  { product: \"Chart Engine\", category: \"Analytics\", rating: 3, reviews: 156, price: 39 },\n  { product: \"Auth Module\", category: \"Security\", rating: 5, reviews: 89, price: 19 },\n  { product: \"File Manager\", category: \"Storage\", rating: 2, reviews: 64, price: 15 },\n  { product: \"Email Service\", category: \"Communication\", rating: 4, reviews: 275, price: 25 },\n  { product: \"Search Index\", category: \"Tools\", rating: 1, reviews: 31, price: 35 },\n  { product: \"Cache Layer\", category: \"Infra\", rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n      { length: 5 },\n      (_, index) =>\n        `<span class=\"rating-star ${index < value ? \"active\" : \"\"}\">${starSvg}</span>`,\n    ).join(\"\")}</div>`;\n  }),\n  validator: (value, callback) => {\n    value = parseInt(value);\n    callback(value >= 0 && value <= 100);\n  },\n\n  editor: editorFactory<{ input: HTMLDivElement }>({\n    shortcuts: [\n      {\n        keys: [[\"1\"], [\"2\"], [\"3\"], [\"4\"], [\"5\"]],\n        callback: (editor, _event) => {\n          editor.setValue((_event as KeyboardEvent).key);\n        },\n      },\n      {\n        keys: [[\"ArrowRight\"]],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) < 5) {\n            editor.setValue(parseInt(editor.value) + 1);\n          }\n        },\n      },\n      {\n        keys: [[\"ArrowLeft\"]],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) > 1) {\n            editor.setValue(parseInt(editor.value) - 1);\n          }\n        },\n      },\n    ],\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement(\n        \"DIV\",\n      ) as HTMLDivElement;\n      editor.input.classList.add(\"rating-editor\");\n    },\n    afterInit(editor) {\n      editor.input.addEventListener(\"mouseover\", (event) => {\n        const star = (event.target as HTMLElement).closest(\n          \".rating-star\",\n        ) as HTMLElement | null;\n\n        if (\n          star?.dataset.value &&\n          parseInt(editor.value) !== parseInt(star.dataset.value)\n        ) {\n          editor.setValue(star.dataset.value);\n        }\n      });\n      editor.input.addEventListener(\"mousedown\", () => {\n        editor.finishEditing();\n      });\n    },\n    render(editor) {\n      editor.input.innerHTML = Array.from(\n        { length: 5 },\n        (_, index) =>\n          `<span data-value=\"${index + 1}\" class=\"rating-star ${\n            index < editor.value ? \"active\" : \"\"\n          }${index + 1 === parseInt(editor.value) ? \" current\" : \"\"}\">${starSvg}</span>`,\n      ).join(\"\");\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: [\"Product\", \"Category\", \"Rating\", \"Reviews\", \"Price\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: \"auto\",\n  width: \"100%\",\n  autoWrapRow: true,\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"product\", type: \"text\", width: 240 },\n    { data: \"category\", type: \"text\", width: 120 },\n    { data: \"rating\", width: 150, ...cellDefinition },\n    { data: \"reviews\", type: \"numeric\", width: 80 },\n    { data: \"price\", type: \"numeric\", width: 80 },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { rendererFactory } from \"handsontable/renderers\";\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { product: \"Dashboard Pro\", category: \"Analytics\", rating: 5, reviews: 342, price: 49 },\n  { product: \"Form Builder\", category: \"Tools\", rating: 4, reviews: 218, price: 29 },\n  { product: \"Chart Engine\", category: \"Analytics\", rating: 3, reviews: 156, price: 39 },\n  { product: \"Auth Module\", category: \"Security\", rating: 5, reviews: 89, price: 19 },\n  { product: \"File Manager\", category: \"Storage\", rating: 2, reviews: 64, price: 15 },\n  { product: \"Email Service\", category: \"Communication\", rating: 4, reviews: 275, price: 25 },\n  { product: \"Search Index\", category: \"Tools\", rating: 1, reviews: 31, price: 35 },\n  { product: \"Cache Layer\", category: \"Infra\", rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\nconst cellDefinition: Pick<\n  CellProperties,\n  \"renderer\" | \"validator\" | \"editor\"\n> = {\n  renderer: rendererFactory(({ td, value }) => {\n    td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n      { length: 5 },\n      (_, index) =>\n        `<span class=\"rating-star ${index < value ? \"active\" : \"\"}\">${starSvg}</span>`,\n    ).join(\"\")}</div>`;\n  }),\n  validator: (value, callback) => {\n    value = parseInt(value);\n    callback(value >= 0 && value <= 100);\n  },\n\n  editor: editorFactory<{ input: HTMLDivElement }>({\n    shortcuts: [\n      {\n        keys: [[\"1\"], [\"2\"], [\"3\"], [\"4\"], [\"5\"]],\n        callback: (editor, _event) => {\n          editor.setValue((_event as KeyboardEvent).key);\n        },\n      },\n      {\n        keys: [[\"ArrowRight\"]],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) < 5) {\n            editor.setValue(parseInt(editor.value) + 1);\n          }\n        },\n      },\n      {\n        keys: [[\"ArrowLeft\"]],\n        callback: (editor, _event) => {\n          if (parseInt(editor.value) > 1) {\n            editor.setValue(parseInt(editor.value) - 1);\n          }\n        },\n      },\n    ],\n    init(editor) {\n      editor.input = editor.hot.rootDocument.createElement(\n        \"DIV\",\n      ) as HTMLDivElement;\n      editor.input.classList.add(\"rating-editor\");\n    },\n    afterInit(editor) {\n      editor.input.addEventListener(\"mouseover\", (event) => {\n        const star = (event.target as HTMLElement).closest(\n          \".rating-star\",\n        ) as HTMLElement | null;\n\n        if (\n          star?.dataset.value &&\n          parseInt(editor.value) !== parseInt(star.dataset.value)\n        ) {\n          editor.setValue(star.dataset.value);\n        }\n      });\n      editor.input.addEventListener(\"mousedown\", () => {\n        editor.finishEditing();\n      });\n    },\n    render(editor) {\n      editor.input.innerHTML = Array.from(\n        { length: 5 },\n        (_, index) =>\n          `<span data-value=\"${index + 1}\" class=\"rating-star ${\n            index < editor.value ? \"active\" : \"\"\n          }${index + 1 === parseInt(editor.value) ? \" current\" : \"\"}\">${starSvg}</span>`,\n      ).join(\"\");\n    },\n  }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  colHeaders: [\"Product\", \"Category\", \"Rating\", \"Reviews\", \"Price\"],\n  autoRowSize: true,\n  rowHeaders: true,\n  height: \"auto\",\n  width: \"100%\",\n  autoWrapRow: true,\n  headerClassName: \"htLeft\",\n  columns: [\n    { data: \"product\", type: \"text\", width: 240 },\n    { data: \"category\", type: \"text\", width: 120 },\n    { data: \"rating\", width: 150, ...cellDefinition },\n    { data: \"reviews\", type: \"numeric\", width: 80 },\n    { data: \"price\", type: \"numeric\", width: 80 },\n  ],\n  licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__react__example1.tsx.json
index 8e22f4651..d51eee263 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__rating__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\ninterface RatingEditorInstance {\n  input: HTMLDivElement;\n  value: number | string;\n}\n\nconst ratingRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n    { length: 5 },\n    (_, index) => `<span class=\"rating-star ${index < (value as number) ? 'active' : ''}\">${starSvg}</span>`\n  ).join('')}</div>`;\n});\n\nconst ratingValidator = (value: unknown, callback: (valid: boolean) => void) => {\n  const num = parseInt(String(value));\n\n  callback(num >= 1 && num <= 5);\n};\n\nconst ratingEditor = editorFactory<RatingEditorInstance>({\n  shortcuts: [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (editor, _event) => {\n        editor.setValue((_event as KeyboardEvent).key);\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        if (parseInt(String(editor.value)) < 5) {\n          editor.setValue(parseInt(String(editor.value)) + 1);\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        if (parseInt(String(editor.value)) > 1) {\n          editor.setValue(parseInt(String(editor.value)) - 1);\n        }\n      },\n    },\n  ],\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('DIV') as HTMLDivElement;\n    editor.input.classList.add('rating-editor');\n  },\n  afterInit(editor) {\n    editor.input.addEventListener('mouseover', (event: MouseEvent) => {\n      const star = (event.target as Element).closest('.rating-star') as HTMLElement | null;\n\n      if (star?.dataset.value && parseInt(String(editor.value)) !== parseInt(star.dataset.value)) {\n        editor.setValue(star.dataset.value);\n      }\n    });\n    editor.input.addEventListener('mousedown', () => {\n      editor.finishEditing();\n    });\n  },\n  render(editor) {\n    editor.input.innerHTML = Array.from(\n      { length: 5 },\n      (_, index) =>\n        `<span data-value=\"${index + 1}\" class=\"rating-star ${index < (editor.value as number) ? 'active' : ''}${\n          index + 1 === parseInt(String(editor.value)) ? ' current' : ''\n        }\">${starSvg}</span>`\n    ).join('');\n  },\n});\n\n/* start:skip-in-preview */\ninterface ProductRow {\n  product: string;\n  category: string;\n  rating: number;\n  reviews: number;\n  price: number;\n}\n\nconst data: ProductRow[] = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Category', 'Rating', 'Reviews', 'Price']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={240} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn\n        data=\"rating\"\n        width={150}\n        hotRenderer={ratingRenderer}\n        hotEditor={ratingEditor}\n        validator={ratingValidator}\n      />\n      <HotColumn data=\"reviews\" type=\"numeric\" width={80} />\n      <HotColumn data=\"price\" type=\"numeric\" width={80} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst starSvg =\n  '<svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>';\n\ninterface RatingEditorInstance {\n  input: HTMLDivElement;\n  value: number | string;\n}\n\nconst ratingRenderer = rendererFactory(({ td, value }) => {\n  td.innerHTML = `<div class=\"rating-cell\">${Array.from(\n    { length: 5 },\n    (_, index) => `<span class=\"rating-star ${index < (value as number) ? 'active' : ''}\">${starSvg}</span>`\n  ).join('')}</div>`;\n});\n\nconst ratingValidator = (value: unknown, callback: (valid: boolean) => void) => {\n  const num = parseInt(String(value));\n\n  callback(num >= 1 && num <= 5);\n};\n\nconst ratingEditor = editorFactory<RatingEditorInstance>({\n  shortcuts: [\n    {\n      keys: [['1'], ['2'], ['3'], ['4'], ['5']],\n      callback: (editor, _event) => {\n        editor.setValue((_event as KeyboardEvent).key);\n      },\n    },\n    {\n      keys: [['ArrowRight']],\n      callback: (editor, _event) => {\n        if (parseInt(String(editor.value)) < 5) {\n          editor.setValue(parseInt(String(editor.value)) + 1);\n        }\n      },\n    },\n    {\n      keys: [['ArrowLeft']],\n      callback: (editor, _event) => {\n        if (parseInt(String(editor.value)) > 1) {\n          editor.setValue(parseInt(String(editor.value)) - 1);\n        }\n      },\n    },\n  ],\n  init(editor) {\n    editor.input = editor.hot.rootDocument.createElement('DIV') as HTMLDivElement;\n    editor.input.classList.add('rating-editor');\n  },\n  afterInit(editor) {\n    editor.input.addEventListener('mouseover', (event: MouseEvent) => {\n      const star = (event.target as Element).closest('.rating-star') as HTMLElement | null;\n\n      if (star?.dataset.value && parseInt(String(editor.value)) !== parseInt(star.dataset.value)) {\n        editor.setValue(star.dataset.value);\n      }\n    });\n    editor.input.addEventListener('mousedown', () => {\n      editor.finishEditing();\n    });\n  },\n  render(editor) {\n    editor.input.innerHTML = Array.from(\n      { length: 5 },\n      (_, index) =>\n        `<span data-value=\"${index + 1}\" class=\"rating-star ${index < (editor.value as number) ? 'active' : ''}${\n          index + 1 === parseInt(String(editor.value)) ? ' current' : ''\n        }\">${starSvg}</span>`\n    ).join('');\n  },\n});\n\n/* start:skip-in-preview */\ninterface ProductRow {\n  product: string;\n  category: string;\n  rating: number;\n  reviews: number;\n  price: number;\n}\n\nconst data: ProductRow[] = [\n  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },\n  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },\n  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },\n  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },\n  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },\n  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },\n  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },\n  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Product', 'Category', 'Rating', 'Reviews', 'Price']}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={240} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn\n        data=\"rating\"\n        width={150}\n        hotRenderer={ratingRenderer}\n        hotEditor={ratingEditor}\n        validator={ratingValidator}\n      />\n      <HotColumn data=\"reviews\" type=\"numeric\" width={80} />\n      <HotColumn data=\"price\" type=\"numeric\" width={80} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-star {\n  color: var(--ht-background-secondary-color, #e0e0e0 );\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rating-star.active {\n  color: #facc15;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n}\n\n.rating-editor .rating-star {\n  cursor: pointer;\n}\n\n.rating-editor .rating-star.current {\n  color: var(--ht-accent-color, #1a42e8);\n}"},"docsPath":"recipes/cell-types/rating/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/rating/rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/rating","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__react-rating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__react-rating__react__example1.tsx.json
index 2685385a5..ee418b6ee 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__react-rating__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__cell-types__react-rating__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface StarRatingProps {\n  name: string;\n  value: number;\n  editing?: boolean;\n  onStarHover?: (value: number) => void;\n  onStarClick?: (value: number) => void;\n}\n\nfunction StarRating({ name, value, editing = true, onStarHover, onStarClick }: StarRatingProps) {\n  return (\n    <div className=\"star-rating\" aria-label={`Rating: ${value} out of 5`}>\n      {[1, 2, 3, 4, 5].map((star) => (\n        <span\n          key={`${name}-${star}`}\n          className={star <= value ? 'star filled' : 'star'}\n          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}\n          onClick={editing ? () => onStarClick?.(star) : undefined}\n        >\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\n/* start:skip-in-preview */\n\nexport const data = [\n  { product: \"Dashboard Pro\", category: \"Analytics\", rating: 5, reviews: 342, price: 49 },\n  { product: \"Form Builder\", category: \"Tools\", rating: 4, reviews: 218, price: 29 },\n  { product: \"Chart Engine\", category: \"Analytics\", rating: 3, reviews: 156, price: 39 },\n  { product: \"Auth Module\", category: \"Security\", rating: 5, reviews: 89, price: 19 },\n  { product: \"File Manager\", category: \"Storage\", rating: 2, reviews: 64, price: 15 },\n  { product: \"Email Service\", category: \"Communication\", rating: 4, reviews: 275, price: 25 },\n  { product: \"Search Index\", category: \"Tools\", rating: 1, reviews: 31, price: 35 },\n  { product: \"Cache Layer\", category: \"Infra\", rating: 4, reviews: 112, price: 20 },\n];\n\n/* end:skip-in-preview */\n\nconst RatingCellRenderer = ({ value }: { value: unknown }) => (\n  <div className=\"rating-cell\">\n    <StarRating\n      name=\"rating-cell\"\n      value={Number(value) || 0}\n      editing={false}\n    />\n  </div>\n);\n\nconst ratingValidator = (value: string | number, callback: (valid: boolean) => void) => {\n  const parsed = parseInt(String(value));\n  callback(parsed >= 0 && parsed <= 100);\n};\n\nexport const RatingEditor = () => {\n  return (\n    <EditorComponent<number>>\n      {({ value, setValue, finishEditing }) => (\n        <div className=\"rating-editor\">\n          <StarRating\n            name=\"rating\"\n            value={Number(value) || 0}\n            onStarHover={(nextValue) => setValue(nextValue)}\n            onStarClick={(nextValue) => {\n              setValue(nextValue);\n              finishEditing();\n            }}\n          />\n        </div>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={[\"Product\", \"Category\", \"Rating\", \"Reviews\", \"Price\"]}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={240} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn\n        data=\"rating\"\n        width={150}\n        editor={RatingEditor}\n        renderer={RatingCellRenderer}\n        validator={ratingValidator}\n      />\n      <HotColumn data=\"reviews\" type=\"numeric\" width={80} />\n      <HotColumn data=\"price\" type=\"numeric\" width={80} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".star-rating {\n  display: inline-flex;\n  gap: 1px;\n}\n\n.star-rating .star {\n  font-size: 18px;\n  color: #d3d3d3;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  transition: color 0.1s;\n}\n\n.rating-editor .star-rating .star {\n  cursor: pointer;\n}\n\n.star-rating .star.filled {\n  color: #ffb400;\n}\n\n.rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: var(--ht-font-family, inherit);\n  font-size: var(--ht-font-size, 14px);\n  line-height: var(--ht-line-height, 1.5);\n}"},"docsPath":"recipes/cell-types/react-rating/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/react-rating/react-rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/react-rating","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Star Rating · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface StarRatingProps {\n  name: string;\n  value: number;\n  editing?: boolean;\n  onStarHover?: (value: number) => void;\n  onStarClick?: (value: number) => void;\n}\n\nfunction StarRating({ name, value, editing = true, onStarHover, onStarClick }: StarRatingProps) {\n  return (\n    <div className=\"star-rating\" aria-label={`Rating: ${value} out of 5`}>\n      {[1, 2, 3, 4, 5].map((star) => (\n        <span\n          key={`${name}-${star}`}\n          className={star <= value ? 'star filled' : 'star'}\n          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}\n          onClick={editing ? () => onStarClick?.(star) : undefined}\n        >\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\n/* start:skip-in-preview */\n\nexport const data = [\n  { product: \"Dashboard Pro\", category: \"Analytics\", rating: 5, reviews: 342, price: 49 },\n  { product: \"Form Builder\", category: \"Tools\", rating: 4, reviews: 218, price: 29 },\n  { product: \"Chart Engine\", category: \"Analytics\", rating: 3, reviews: 156, price: 39 },\n  { product: \"Auth Module\", category: \"Security\", rating: 5, reviews: 89, price: 19 },\n  { product: \"File Manager\", category: \"Storage\", rating: 2, reviews: 64, price: 15 },\n  { product: \"Email Service\", category: \"Communication\", rating: 4, reviews: 275, price: 25 },\n  { product: \"Search Index\", category: \"Tools\", rating: 1, reviews: 31, price: 35 },\n  { product: \"Cache Layer\", category: \"Infra\", rating: 4, reviews: 112, price: 20 },\n];\n\n/* end:skip-in-preview */\n\nconst RatingCellRenderer = ({ value }: { value: unknown }) => (\n  <div className=\"rating-cell\">\n    <StarRating\n      name=\"rating-cell\"\n      value={Number(value) || 0}\n      editing={false}\n    />\n  </div>\n);\n\nconst ratingValidator = (value: string | number, callback: (valid: boolean) => void) => {\n  const parsed = parseInt(String(value));\n  callback(parsed >= 0 && parsed <= 100);\n};\n\nexport const RatingEditor = () => {\n  return (\n    <EditorComponent<number>>\n      {({ value, setValue, finishEditing }) => (\n        <div className=\"rating-editor\">\n          <StarRating\n            name=\"rating\"\n            value={Number(value) || 0}\n            onStarHover={(nextValue) => setValue(nextValue)}\n            onStarClick={(nextValue) => {\n              setValue(nextValue);\n              finishEditing();\n            }}\n          />\n        </div>\n      )}\n    </EditorComponent>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={[\"Product\", \"Category\", \"Rating\", \"Reviews\", \"Price\"]}\n      autoRowSize={true}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      headerClassName=\"htLeft\"\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"product\" type=\"text\" width={240} />\n      <HotColumn data=\"category\" type=\"text\" width={120} />\n      <HotColumn\n        data=\"rating\"\n        width={150}\n        editor={RatingEditor}\n        renderer={RatingCellRenderer}\n        validator={ratingValidator}\n      />\n      <HotColumn data=\"reviews\" type=\"numeric\" width={80} />\n      <HotColumn data=\"price\" type=\"numeric\" width={80} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".star-rating {\n  display: inline-flex;\n  gap: 1px;\n}\n\n.star-rating .star {\n  font-size: 18px;\n  color: #d3d3d3;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  transition: color 0.1s;\n}\n\n.rating-editor .star-rating .star {\n  cursor: pointer;\n}\n\n.star-rating .star.filled {\n  color: #ffb400;\n}\n\n.rating-cell {\n  display: flex;\n  align-items: center;\n  margin: 3px 0 0 -1px;\n}\n\n.rating-editor {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  box-sizing: border-box !important;\n  border: none;\n  border-radius: 0;\n  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n    var(--ht-cell-editor-border-color, #1a42e8),\n    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n    var(--ht-cell-editor-shadow-color, transparent);\n  background-color: var(--ht-cell-editor-background-color, #ffffff);\n  padding: var(--ht-cell-vertical-padding, 4px)\n    var(--ht-cell-horizontal-padding, 8px);\n  font-family: var(--ht-font-family, inherit);\n  font-size: var(--ht-font-size, 14px);\n  line-height: var(--ht-line-height, 1.5);\n}"},"docsPath":"recipes/cell-types/react-rating/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Star Rating"],"guide":"recipes/cell-types/react-rating/react-rating.md","guideTitle":"Star Rating","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/react-rating","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__angular__example1.ts.json
index 7450443f6..e8e4fbadc 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-column-visibility></example1-column-visibility></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ColumnConfig = {\n  data: string;\n  title: string;\n  type: string;\n  width: number;\n  locale?: string;\n  numericFormat?: Intl.NumberFormatOptions;\n  dateFormat?: Intl.DateTimeFormatOptions;\n  source?: string[];\n};\n\nconst allColumns: ColumnConfig[] = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\nconst data = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12', location: 'New York',      status: 'Active' },\n  { name: 'Bob Martinez',  department: 'Marketing',   role: 'Marketing Manager',  salary: 78000,  startDate: '2020-07-01', location: 'Chicago',       status: 'Active' },\n  { name: 'Carol Lee',     department: 'Engineering', role: 'Tech Lead',          salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim',     department: 'HR',          role: 'HR Specialist',      salary: 65000,  startDate: '2021-02-28', location: 'Austin',        status: 'On Leave' },\n  { name: 'Eva Novak',     department: 'Finance',     role: 'Financial Analyst',  salary: 82000,  startDate: '2018-09-03', location: 'New York',      status: 'Active' },\n  { name: 'Frank Chen',    department: 'Engineering', role: 'Junior Engineer',    salary: 72000,  startDate: '2022-05-16', location: 'Seattle',       status: 'Active' },\n  { name: 'Grace Okafor',  department: 'Sales',       role: 'Sales Executive',    salary: 70000,  startDate: '2020-01-20', location: 'Dallas',        status: 'Active' },\n  { name: 'Henry Walsh',   department: 'Finance',     role: 'Finance Director',   salary: 130000, startDate: '2015-06-10', location: 'Chicago',       status: 'Active' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-column-visibility',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @for (col of allColumns; track col.data; let i = $index) {\n          <label>\n            <input\n              type=\"checkbox\"\n              [checked]=\"visibleIndices.has(i)\"\n              [disabled]=\"visibleIndices.size === 1 && visibleIndices.has(i)\"\n              (change)=\"toggleColumn(i, $event)\"\n            />\n            {{ col.title }}\n          </label>\n        }\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n  readonly allColumns = allColumns;\n\n  // Track which column indices are currently visible. Start with all visible.\n  visibleIndices = new Set(allColumns.map((_, i) => i));\n\n  gridSettings: GridSettings = {\n    columns: this.getVisibleColumns(),\n    colHeaders: this.getVisibleHeaders(),\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  toggleColumn(index: number, event: Event): void {\n    const checked = (event.target as HTMLInputElement).checked;\n\n    if (!checked) {\n      // Prevent hiding the last visible column.\n      if (this.visibleIndices.size === 1) {\n        (event.target as HTMLInputElement).checked = true;\n        return;\n      }\n      this.visibleIndices.delete(index);\n    } else {\n      this.visibleIndices.add(index);\n    }\n\n    // Reassign to trigger Angular change detection on the template bindings.\n    this.visibleIndices = new Set(this.visibleIndices);\n\n    this.hotTable?.hotInstance?.updateSettings({\n      columns: this.getVisibleColumns(),\n      colHeaders: this.getVisibleHeaders(),\n    });\n  }\n\n  private getVisibleColumns(): ColumnConfig[] {\n    return allColumns.filter((_, i) => this.visibleIndices.has(i));\n  }\n\n  private getVisibleHeaders(): string[] {\n    return allColumns.filter((_, i) => this.visibleIndices.has(i)).map(col => col.title);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/column-management/column-visibility/angular/example1.ts","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-column-visibility></example1-column-visibility></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ColumnConfig = {\n  data: string;\n  title: string;\n  type: string;\n  width: number;\n  locale?: string;\n  numericFormat?: Intl.NumberFormatOptions;\n  dateFormat?: Intl.DateTimeFormatOptions;\n  source?: string[];\n};\n\nconst allColumns: ColumnConfig[] = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\nconst data = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer',    salary: 95000,  startDate: '2019-03-12', location: 'New York',      status: 'Active' },\n  { name: 'Bob Martinez',  department: 'Marketing',   role: 'Marketing Manager',  salary: 78000,  startDate: '2020-07-01', location: 'Chicago',       status: 'Active' },\n  { name: 'Carol Lee',     department: 'Engineering', role: 'Tech Lead',          salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim',     department: 'HR',          role: 'HR Specialist',      salary: 65000,  startDate: '2021-02-28', location: 'Austin',        status: 'On Leave' },\n  { name: 'Eva Novak',     department: 'Finance',     role: 'Financial Analyst',  salary: 82000,  startDate: '2018-09-03', location: 'New York',      status: 'Active' },\n  { name: 'Frank Chen',    department: 'Engineering', role: 'Junior Engineer',    salary: 72000,  startDate: '2022-05-16', location: 'Seattle',       status: 'Active' },\n  { name: 'Grace Okafor',  department: 'Sales',       role: 'Sales Executive',    salary: 70000,  startDate: '2020-01-20', location: 'Dallas',        status: 'Active' },\n  { name: 'Henry Walsh',   department: 'Finance',     role: 'Finance Director',   salary: 130000, startDate: '2015-06-10', location: 'Chicago',       status: 'Active' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-column-visibility',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @for (col of allColumns; track col.data; let i = $index) {\n          <label>\n            <input\n              type=\"checkbox\"\n              [checked]=\"visibleIndices.has(i)\"\n              [disabled]=\"visibleIndices.size === 1 && visibleIndices.has(i)\"\n              (change)=\"toggleColumn(i, $event)\"\n            />\n            {{ col.title }}\n          </label>\n        }\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n  readonly allColumns = allColumns;\n\n  // Track which column indices are currently visible. Start with all visible.\n  visibleIndices = new Set(allColumns.map((_, i) => i));\n\n  gridSettings: GridSettings = {\n    columns: this.getVisibleColumns(),\n    colHeaders: this.getVisibleHeaders(),\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  toggleColumn(index: number, event: Event): void {\n    const checked = (event.target as HTMLInputElement).checked;\n\n    if (!checked) {\n      // Prevent hiding the last visible column.\n      if (this.visibleIndices.size === 1) {\n        (event.target as HTMLInputElement).checked = true;\n        return;\n      }\n      this.visibleIndices.delete(index);\n    } else {\n      this.visibleIndices.add(index);\n    }\n\n    // Reassign to trigger Angular change detection on the template bindings.\n    this.visibleIndices = new Set(this.visibleIndices);\n\n    this.hotTable?.hotInstance?.updateSettings({\n      columns: this.getVisibleColumns(),\n      colHeaders: this.getVisibleHeaders(),\n    });\n  }\n\n  private getVisibleColumns(): ColumnConfig[] {\n    return allColumns.filter((_, i) => this.visibleIndices.has(i));\n  }\n\n  private getVisibleHeaders(): string[] {\n    return allColumns.filter((_, i) => this.visibleIndices.has(i)).map(col => col.title);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/column-management/column-visibility/angular/example1.ts","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.js.json
index 12e6f4460..970e1c36b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n    { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n    { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n    { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n    { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n    { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n    { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n    { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns = [\n    { data: 'name', title: 'Name', type: 'text', width: 140 },\n    { data: 'department', title: 'Department', type: 'text', width: 120 },\n    { data: 'role', title: 'Role', type: 'text', width: 150 },\n    {\n        data: 'salary',\n        title: 'Salary',\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n        width: 110,\n    },\n    { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n    { data: 'location', title: 'Location', type: 'text', width: 120 },\n    {\n        data: 'status',\n        title: 'Status',\n        type: 'dropdown',\n        source: ['Active', 'On Leave', 'Inactive'],\n        width: 120,\n    },\n];\n// Track which column indices (into allColumns) are currently visible.\n// Start with all columns visible.\nconst visibleIndices = new Set(allColumns.map((_, i) => i));\n// Returns only the column configs that are currently visible.\nfunction getVisibleColumns() {\n    return allColumns.filter((_, i) => visibleIndices.has(i));\n}\n// Returns only the column headers that are currently visible.\nfunction getVisibleHeaders() {\n    return allColumns.filter((_, i) => visibleIndices.has(i)).map(col => col.title);\n}\nconst rootContainer = document.querySelector('#example1');\n// Inject the toolbar and the grid mount point inside #example1.\n// Avoids container.before() which requires #example1 to have a parent node.\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\"><div class=\"controls\"></div></div>\n  <div class=\"column-visibility-grid\"></div>\n`;\nconst container = rootContainer.querySelector('.column-visibility-grid');\nconst togglesContainer = rootContainer.querySelector('.controls');\nconst hot = new Handsontable(container, {\n    data,\n    columns: getVisibleColumns(),\n    colHeaders: getVisibleHeaders(),\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Build a checkbox for each column and attach toggle logic.\nallColumns.forEach((col, index) => {\n    const label = document.createElement('label');\n    const checkbox = document.createElement('input');\n    checkbox.type = 'checkbox';\n    checkbox.checked = true; // all columns are visible on load\n    checkbox.dataset.colIndex = String(index);\n    checkbox.addEventListener('change', () => {\n        if (!checkbox.checked) {\n            // Prevent hiding the last visible column.\n            if (visibleIndices.size === 1) {\n                checkbox.checked = true;\n                return;\n            }\n            visibleIndices.delete(index);\n        }\n        else {\n            visibleIndices.add(index);\n        }\n        // Apply the new visible subset. hot.updateSettings() re-renders the grid\n        // with only the provided columns config -- no DOM manipulation needed.\n        hot.updateSettings({\n            columns: getVisibleColumns(),\n            colHeaders: getVisibleHeaders(),\n        });\n        // When only one column remains visible, disable its checkbox so the user\n        // cannot produce an empty grid.\n        togglesContainer.querySelectorAll('input[type=\"checkbox\"]').forEach(cb => {\n            const idx = Number(cb.dataset.colIndex);\n            cb.disabled = visibleIndices.size === 1 && visibleIndices.has(idx);\n        });\n    });\n    label.appendChild(checkbox);\n    label.appendChild(document.createTextNode(col.title));\n    togglesContainer.appendChild(label);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/column-management/column-visibility/javascript/example1.js","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n    { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n    { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n    { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n    { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n    { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n    { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n    { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns = [\n    { data: 'name', title: 'Name', type: 'text', width: 140 },\n    { data: 'department', title: 'Department', type: 'text', width: 120 },\n    { data: 'role', title: 'Role', type: 'text', width: 150 },\n    {\n        data: 'salary',\n        title: 'Salary',\n        type: 'numeric',\n        locale: 'en-US',\n        numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n        width: 110,\n    },\n    { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n    { data: 'location', title: 'Location', type: 'text', width: 120 },\n    {\n        data: 'status',\n        title: 'Status',\n        type: 'dropdown',\n        source: ['Active', 'On Leave', 'Inactive'],\n        width: 120,\n    },\n];\n// Track which column indices (into allColumns) are currently visible.\n// Start with all columns visible.\nconst visibleIndices = new Set(allColumns.map((_, i) => i));\n// Returns only the column configs that are currently visible.\nfunction getVisibleColumns() {\n    return allColumns.filter((_, i) => visibleIndices.has(i));\n}\n// Returns only the column headers that are currently visible.\nfunction getVisibleHeaders() {\n    return allColumns.filter((_, i) => visibleIndices.has(i)).map(col => col.title);\n}\nconst rootContainer = document.querySelector('#example1');\n// Inject the toolbar and the grid mount point inside #example1.\n// Avoids container.before() which requires #example1 to have a parent node.\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\"><div class=\"controls\"></div></div>\n  <div class=\"column-visibility-grid\"></div>\n`;\nconst container = rootContainer.querySelector('.column-visibility-grid');\nconst togglesContainer = rootContainer.querySelector('.controls');\nconst hot = new Handsontable(container, {\n    data,\n    columns: getVisibleColumns(),\n    colHeaders: getVisibleHeaders(),\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});\n// Build a checkbox for each column and attach toggle logic.\nallColumns.forEach((col, index) => {\n    const label = document.createElement('label');\n    const checkbox = document.createElement('input');\n    checkbox.type = 'checkbox';\n    checkbox.checked = true; // all columns are visible on load\n    checkbox.dataset.colIndex = String(index);\n    checkbox.addEventListener('change', () => {\n        if (!checkbox.checked) {\n            // Prevent hiding the last visible column.\n            if (visibleIndices.size === 1) {\n                checkbox.checked = true;\n                return;\n            }\n            visibleIndices.delete(index);\n        }\n        else {\n            visibleIndices.add(index);\n        }\n        // Apply the new visible subset. hot.updateSettings() re-renders the grid\n        // with only the provided columns config -- no DOM manipulation needed.\n        hot.updateSettings({\n            columns: getVisibleColumns(),\n            colHeaders: getVisibleHeaders(),\n        });\n        // When only one column remains visible, disable its checkbox so the user\n        // cannot produce an empty grid.\n        togglesContainer.querySelectorAll('input[type=\"checkbox\"]').forEach(cb => {\n            const idx = Number(cb.dataset.colIndex);\n            cb.disabled = visibleIndices.size === 1 && visibleIndices.has(idx);\n        });\n    });\n    label.appendChild(checkbox);\n    label.appendChild(document.createTextNode(col.title));\n    togglesContainer.appendChild(label);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/column-management/column-visibility/javascript/example1.js","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.ts.json
index aa1e054a6..c3e1c1a69 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n  { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n  { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n  { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n  { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n  { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n  { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\n// Track which column indices (into allColumns) are currently visible.\n// Start with all columns visible.\nconst visibleIndices = new Set(allColumns.map((_, i) => i));\n\n// Returns only the column configs that are currently visible.\nfunction getVisibleColumns() {\n  return allColumns.filter((_, i) => visibleIndices.has(i));\n}\n\n// Returns only the column headers that are currently visible.\nfunction getVisibleHeaders() {\n  return allColumns.filter((_, i) => visibleIndices.has(i)).map(col => col.title);\n}\n\nconst rootContainer = document.querySelector<HTMLElement>('#example1')!;\n\n// Inject the toolbar and the grid mount point inside #example1.\n// Avoids container.before() which requires #example1 to have a parent node.\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\"><div class=\"controls\"></div></div>\n  <div class=\"column-visibility-grid\"></div>\n`;\n\nconst container = rootContainer.querySelector<HTMLElement>('.column-visibility-grid')!;\nconst togglesContainer = rootContainer.querySelector<HTMLElement>('.controls')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  columns: getVisibleColumns(),\n  colHeaders: getVisibleHeaders(),\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Build a checkbox for each column and attach toggle logic.\n\nallColumns.forEach((col, index) => {\n  const label = document.createElement('label');\n  const checkbox = document.createElement('input');\n\n  checkbox.type = 'checkbox';\n  checkbox.checked = true; // all columns are visible on load\n  checkbox.dataset.colIndex = String(index);\n\n  checkbox.addEventListener('change', () => {\n    if (!checkbox.checked) {\n      // Prevent hiding the last visible column.\n      if (visibleIndices.size === 1) {\n        checkbox.checked = true;\n        return;\n      }\n      visibleIndices.delete(index);\n    } else {\n      visibleIndices.add(index);\n    }\n\n    // Apply the new visible subset. hot.updateSettings() re-renders the grid\n    // with only the provided columns config -- no DOM manipulation needed.\n    hot.updateSettings({\n      columns: getVisibleColumns(),\n      colHeaders: getVisibleHeaders(),\n    });\n\n    // When only one column remains visible, disable its checkbox so the user\n    // cannot produce an empty grid.\n    togglesContainer.querySelectorAll('input[type=\"checkbox\"]').forEach(cb => {\n      const idx = Number((cb as HTMLInputElement).dataset.colIndex);\n\n      (cb as HTMLInputElement).disabled = visibleIndices.size === 1 && visibleIndices.has(idx);\n    });\n  });\n\n  label.appendChild(checkbox);\n  label.appendChild(document.createTextNode(col.title));\n  togglesContainer.appendChild(label);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/column-management/column-visibility/javascript/example1.ts","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n  { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n  { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n  { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n  { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n  { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n  { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\n// Track which column indices (into allColumns) are currently visible.\n// Start with all columns visible.\nconst visibleIndices = new Set(allColumns.map((_, i) => i));\n\n// Returns only the column configs that are currently visible.\nfunction getVisibleColumns() {\n  return allColumns.filter((_, i) => visibleIndices.has(i));\n}\n\n// Returns only the column headers that are currently visible.\nfunction getVisibleHeaders() {\n  return allColumns.filter((_, i) => visibleIndices.has(i)).map(col => col.title);\n}\n\nconst rootContainer = document.querySelector<HTMLElement>('#example1')!;\n\n// Inject the toolbar and the grid mount point inside #example1.\n// Avoids container.before() which requires #example1 to have a parent node.\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\"><div class=\"controls\"></div></div>\n  <div class=\"column-visibility-grid\"></div>\n`;\n\nconst container = rootContainer.querySelector<HTMLElement>('.column-visibility-grid')!;\nconst togglesContainer = rootContainer.querySelector<HTMLElement>('.controls')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  columns: getVisibleColumns(),\n  colHeaders: getVisibleHeaders(),\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Build a checkbox for each column and attach toggle logic.\n\nallColumns.forEach((col, index) => {\n  const label = document.createElement('label');\n  const checkbox = document.createElement('input');\n\n  checkbox.type = 'checkbox';\n  checkbox.checked = true; // all columns are visible on load\n  checkbox.dataset.colIndex = String(index);\n\n  checkbox.addEventListener('change', () => {\n    if (!checkbox.checked) {\n      // Prevent hiding the last visible column.\n      if (visibleIndices.size === 1) {\n        checkbox.checked = true;\n        return;\n      }\n      visibleIndices.delete(index);\n    } else {\n      visibleIndices.add(index);\n    }\n\n    // Apply the new visible subset. hot.updateSettings() re-renders the grid\n    // with only the provided columns config -- no DOM manipulation needed.\n    hot.updateSettings({\n      columns: getVisibleColumns(),\n      colHeaders: getVisibleHeaders(),\n    });\n\n    // When only one column remains visible, disable its checkbox so the user\n    // cannot produce an empty grid.\n    togglesContainer.querySelectorAll('input[type=\"checkbox\"]').forEach(cb => {\n      const idx = Number((cb as HTMLInputElement).dataset.colIndex);\n\n      (cb as HTMLInputElement).disabled = visibleIndices.size === 1 && visibleIndices.has(idx);\n    });\n  });\n\n  label.appendChild(checkbox);\n  label.appendChild(document.createTextNode(col.title));\n  togglesContainer.appendChild(label);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/column-management/column-visibility/javascript/example1.ts","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__react__example1.tsx.json
index ff2c7ff30..410c93a79 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__column-visibility__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useMemo, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype EmployeeRow = {\n  name: string;\n  department: string;\n  role: string;\n  salary: number;\n  startDate: string;\n  location: string;\n  status: string;\n};\n\nconst data: EmployeeRow[] = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n  { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n  { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n  { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n  { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n  { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n  { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns: (ColumnSettings & { title: string })[] = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\nconst ExampleComponent = () => {\n  // Track which column indices (into allColumns) are currently visible.\n  // Start with all columns visible.\n  const [visibleIndices, setVisibleIndices] = useState<Set<number>>(\n    () => new Set(allColumns.map((_, i) => i))\n  );\n\n  const handleToggle = useCallback((index: number) => {\n    setVisibleIndices((prev) => {\n      // Prevent hiding the last visible column.\n      if (prev.has(index) && prev.size === 1) {\n        return prev;\n      }\n\n      const next = new Set(prev);\n\n      if (prev.has(index)) {\n        next.delete(index);\n      } else {\n        next.add(index);\n      }\n\n      return next;\n    });\n  }, []);\n\n  const columns = useMemo(\n    (): ColumnSettings[] => allColumns.filter((_, i) => visibleIndices.has(i)),\n    [visibleIndices]\n  );\n  const colHeaders = useMemo(\n    (): string[] => allColumns.filter((_, i) => visibleIndices.has(i)).map((col) => col.title),\n    [visibleIndices]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {allColumns.map((col, index) => (\n            <label key={col.data as string}>\n              <input\n                type=\"checkbox\"\n                checked={visibleIndices.has(index)}\n                disabled={visibleIndices.size === 1 && visibleIndices.has(index)}\n                onChange={() => handleToggle(index)}\n              />\n              {col.title}\n            </label>\n          ))}\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        columns={columns}\n        colHeaders={colHeaders}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/column-management/column-visibility/react/example1.tsx","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Column Management ▸ Build a dynamic column visibility toggle · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useMemo, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype EmployeeRow = {\n  name: string;\n  department: string;\n  role: string;\n  salary: number;\n  startDate: string;\n  location: string;\n  status: string;\n};\n\nconst data: EmployeeRow[] = [\n  { name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },\n  { name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },\n  { name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },\n  { name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },\n  { name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },\n  { name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },\n  { name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },\n  { name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// The full columns config is the immutable source of truth.\n// Never mutate this array -- always derive a visible subset from it.\nconst allColumns: (ColumnSettings & { title: string })[] = [\n  { data: 'name', title: 'Name', type: 'text', width: 140 },\n  { data: 'department', title: 'Department', type: 'text', width: 120 },\n  { data: 'role', title: 'Role', type: 'text', width: 150 },\n  {\n    data: 'salary',\n    title: 'Salary',\n    type: 'numeric',\n    locale: 'en-US',\n    numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n    width: 110,\n  },\n  { data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },\n  { data: 'location', title: 'Location', type: 'text', width: 120 },\n  {\n    data: 'status',\n    title: 'Status',\n    type: 'dropdown',\n    source: ['Active', 'On Leave', 'Inactive'],\n    width: 120,\n  },\n];\n\nconst ExampleComponent = () => {\n  // Track which column indices (into allColumns) are currently visible.\n  // Start with all columns visible.\n  const [visibleIndices, setVisibleIndices] = useState<Set<number>>(\n    () => new Set(allColumns.map((_, i) => i))\n  );\n\n  const handleToggle = useCallback((index: number) => {\n    setVisibleIndices((prev) => {\n      // Prevent hiding the last visible column.\n      if (prev.has(index) && prev.size === 1) {\n        return prev;\n      }\n\n      const next = new Set(prev);\n\n      if (prev.has(index)) {\n        next.delete(index);\n      } else {\n        next.add(index);\n      }\n\n      return next;\n    });\n  }, []);\n\n  const columns = useMemo(\n    (): ColumnSettings[] => allColumns.filter((_, i) => visibleIndices.has(i)),\n    [visibleIndices]\n  );\n  const colHeaders = useMemo(\n    (): string[] => allColumns.filter((_, i) => visibleIndices.has(i)).map((col) => col.title),\n    [visibleIndices]\n  );\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {allColumns.map((col, index) => (\n            <label key={col.data as string}>\n              <input\n                type=\"checkbox\"\n                checked={visibleIndices.has(index)}\n                disabled={visibleIndices.size === 1 && visibleIndices.has(index)}\n                onChange={() => handleToggle(index)}\n              />\n              {col.title}\n            </label>\n          ))}\n        </div>\n      </div>\n      <HotTable\n        data={data}\n        columns={columns}\n        colHeaders={colHeaders}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/column-management/column-visibility/react/example1.tsx","breadcrumb":["Recipes","Column Management","Build a dynamic column visibility toggle"],"guide":"recipes/column-management/column-visibility/column-visibility.md","guideTitle":"Build a dynamic column visibility toggle","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/column-visibility","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__angular__example1.ts.json
index 4d3098b39..5de0fa31a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-freeze-columns></example1-freeze-columns></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\ntype CampaignRow = {\n  campaign: string;\n  channel: string;\n  impressions: number;\n  clicks: number;\n  conversions: number;\n  cpc: number;\n  revenue: number;\n  roi: number;\n};\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-freeze-columns',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @for (header of colHeaders; track header; let i = $index) {\n          <button type=\"button\" (click)=\"freezeUpTo(i + 1)\">\n            Freeze up to \"{{ header }}\"\n          </button>\n        }\n      </div>\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"unfreezeAll()\">Unfreeze all</button>\n        <span class=\"freeze-status\">{{ statusText }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n  readonly colHeaders = colHeaders;\n\n  frozenCount = 0;\n\n  get statusText(): string {\n    return this.frozenCount === 0\n      ? 'No columns frozen'\n      : `${this.frozenCount} column${this.frozenCount > 1 ? 's' : ''} frozen`;\n  }\n\n  readonly gridSettings: GridSettings = {\n    colHeaders,\n    columns: [\n      { data: 'campaign', type: 'text' },\n      { data: 'channel', type: 'text' },\n      { data: 'impressions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'clicks', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'conversions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'cpc', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n      { data: 'roi', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    fixedColumnsStart: 0,\n    manualColumnMove: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  freezeUpTo(n: number): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return;\n    const total = hot.countCols();\n\n    this.frozenCount = Math.min(n, total);\n    hot.updateSettings({ fixedColumnsStart: this.frozenCount });\n  }\n\n  unfreezeAll(): void {\n    this.frozenCount = 0;\n    this.hotTable?.hotInstance?.updateSettings({ fixedColumnsStart: 0 });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/angular/example1.ts","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-freeze-columns></example1-freeze-columns></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\ntype CampaignRow = {\n  campaign: string;\n  channel: string;\n  impressions: number;\n  clicks: number;\n  conversions: number;\n  cpc: number;\n  revenue: number;\n  roi: number;\n};\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-freeze-columns',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @for (header of colHeaders; track header; let i = $index) {\n          <button type=\"button\" (click)=\"freezeUpTo(i + 1)\">\n            Freeze up to \"{{ header }}\"\n          </button>\n        }\n      </div>\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"unfreezeAll()\">Unfreeze all</button>\n        <span class=\"freeze-status\">{{ statusText }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n  readonly colHeaders = colHeaders;\n\n  frozenCount = 0;\n\n  get statusText(): string {\n    return this.frozenCount === 0\n      ? 'No columns frozen'\n      : `${this.frozenCount} column${this.frozenCount > 1 ? 's' : ''} frozen`;\n  }\n\n  readonly gridSettings: GridSettings = {\n    colHeaders,\n    columns: [\n      { data: 'campaign', type: 'text' },\n      { data: 'channel', type: 'text' },\n      { data: 'impressions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'clicks', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'conversions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'cpc', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n      { data: 'roi', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    fixedColumnsStart: 0,\n    manualColumnMove: true,\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n  };\n\n  freezeUpTo(n: number): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return;\n    const total = hot.countCols();\n\n    this.frozenCount = Math.min(n, total);\n    hot.updateSettings({ fixedColumnsStart: this.frozenCount });\n  }\n\n  unfreezeAll(): void {\n    this.frozenCount = 0;\n    this.hotTable?.hotInstance?.updateSettings({ fixedColumnsStart: 0 });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/angular/example1.ts","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__javascript__example1.js.json
index d4be3be04..ba5fc615d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\n// Number of columns currently frozen. Starts at 0 (no frozen columns).\nlet frozenCount = 0;\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\nconst container = document.querySelector('#example1');\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\n\nconst freezeRow = document.createElement('div');\n\nfreezeRow.className = 'controls';\n\nconst unfreezeRow = document.createElement('div');\n\nunfreezeRow.className = 'controls';\n\nconst statusEl = document.createElement('span');\n\nstatusEl.className = 'freeze-status';\n\ntoolbar.appendChild(freezeRow);\ntoolbar.appendChild(unfreezeRow);\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders,\n  columns: [\n    { data: 'campaign', type: 'text' },\n    { data: 'channel', type: 'text' },\n    { data: 'impressions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'clicks', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'conversions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'cpc', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n    { data: 'roi', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  ],\n  fixedColumnsStart: 0,\n  manualColumnMove: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Updates the status indicator to reflect the current frozen column count.\nfunction updateStatus() {\n  statusEl.textContent = frozenCount === 0\n    ? 'No columns frozen'\n    : `${frozenCount} column${frozenCount > 1 ? 's' : ''} frozen`;\n}\n\n// Applies the freeze boundary and refreshes the status indicator.\nfunction freezeUpTo(n) {\n  const total = hot.countCols();\n\n  // Guard: clamp to the number of columns actually present in the grid.\n  frozenCount = Math.min(n, total);\n  hot.updateSettings({ fixedColumnsStart: frozenCount });\n  updateStatus();\n}\n\n// Generates one \"Freeze up to column N\" button for each column.\ncolHeaders.forEach((header, index) => {\n  const btn = document.createElement('button');\n\n  btn.type = 'button';\n  btn.textContent = `Freeze up to \"${header}\"`;\n\n  btn.addEventListener('click', () => {\n    freezeUpTo(index + 1);\n  });\n\n  freezeRow.appendChild(btn);\n});\n\n// \"Unfreeze all\" resets fixedColumnsStart to 0.\nconst unfreezeBtn = document.createElement('button');\n\nunfreezeBtn.type = 'button';\nunfreezeBtn.textContent = 'Unfreeze all';\n\nunfreezeBtn.addEventListener('click', () => {\n  frozenCount = 0;\n  hot.updateSettings({ fixedColumnsStart: 0 });\n  updateStatus();\n});\n\nunfreezeRow.appendChild(unfreezeBtn);\nunfreezeRow.appendChild(statusEl);\n\nupdateStatus();","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/javascript/example1.js","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\n// Number of columns currently frozen. Starts at 0 (no frozen columns).\nlet frozenCount = 0;\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\nconst container = document.querySelector('#example1');\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\n\nconst freezeRow = document.createElement('div');\n\nfreezeRow.className = 'controls';\n\nconst unfreezeRow = document.createElement('div');\n\nunfreezeRow.className = 'controls';\n\nconst statusEl = document.createElement('span');\n\nstatusEl.className = 'freeze-status';\n\ntoolbar.appendChild(freezeRow);\ntoolbar.appendChild(unfreezeRow);\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders,\n  columns: [\n    { data: 'campaign', type: 'text' },\n    { data: 'channel', type: 'text' },\n    { data: 'impressions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'clicks', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'conversions', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'cpc', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n    { data: 'roi', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  ],\n  fixedColumnsStart: 0,\n  manualColumnMove: true,\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Updates the status indicator to reflect the current frozen column count.\nfunction updateStatus() {\n  statusEl.textContent = frozenCount === 0\n    ? 'No columns frozen'\n    : `${frozenCount} column${frozenCount > 1 ? 's' : ''} frozen`;\n}\n\n// Applies the freeze boundary and refreshes the status indicator.\nfunction freezeUpTo(n) {\n  const total = hot.countCols();\n\n  // Guard: clamp to the number of columns actually present in the grid.\n  frozenCount = Math.min(n, total);\n  hot.updateSettings({ fixedColumnsStart: frozenCount });\n  updateStatus();\n}\n\n// Generates one \"Freeze up to column N\" button for each column.\ncolHeaders.forEach((header, index) => {\n  const btn = document.createElement('button');\n\n  btn.type = 'button';\n  btn.textContent = `Freeze up to \"${header}\"`;\n\n  btn.addEventListener('click', () => {\n    freezeUpTo(index + 1);\n  });\n\n  freezeRow.appendChild(btn);\n});\n\n// \"Unfreeze all\" resets fixedColumnsStart to 0.\nconst unfreezeBtn = document.createElement('button');\n\nunfreezeBtn.type = 'button';\nunfreezeBtn.textContent = 'Unfreeze all';\n\nunfreezeBtn.addEventListener('click', () => {\n  frozenCount = 0;\n  hot.updateSettings({ fixedColumnsStart: 0 });\n  updateStatus();\n});\n\nunfreezeRow.appendChild(unfreezeBtn);\nunfreezeRow.appendChild(statusEl);\n\nupdateStatus();","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/javascript/example1.js","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__react__example1.tsx.json
index 142690e94..a90a0944a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__column-management__freeze-columns__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { HotTableRef } from '@handsontable/react-wrapper';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype CampaignRow = {\n  campaign: string;\n  channel: string;\n  impressions: number;\n  clicks: number;\n  conversions: number;\n  cpc: number;\n  revenue: number;\n  roi: number;\n};\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\nconst columns = [\n  { data: 'campaign', type: 'text' as const },\n  { data: 'channel', type: 'text' as const },\n  { data: 'impressions', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'clicks', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'conversions', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'cpc', type: 'numeric' as const, numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'revenue', type: 'numeric' as const, numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n  { data: 'roi', type: 'numeric' as const, numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [frozenCount, setFrozenCount] = useState(0);\n\n  const freezeUpTo = useCallback((n: number) => {\n    const hot = hotRef.current?.hotInstance;\n    const total = hot ? hot.countCols() : colHeaders.length;\n\n    setFrozenCount(Math.min(n, total));\n  }, []);\n\n  const unfreezeAll = useCallback(() => {\n    setFrozenCount(0);\n  }, []);\n\n  const statusText = frozenCount === 0\n    ? 'No columns frozen'\n    : `${frozenCount} column${frozenCount > 1 ? 's' : ''} frozen`;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {colHeaders.map((header, index) => (\n            <button\n              key={header}\n              type=\"button\"\n              onClick={() => freezeUpTo(index + 1)}\n            >\n              Freeze up to &quot;{header}&quot;\n            </button>\n          ))}\n        </div>\n        <div className=\"controls\">\n          <button type=\"button\" onClick={unfreezeAll}>Unfreeze all</button>\n          <span className=\"freeze-status\">{statusText}</span>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={colHeaders}\n        columns={columns}\n        fixedColumnsStart={frozenCount}\n        manualColumnMove={true}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/react/example1.tsx","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Column Management ▸ Freeze and unfreeze columns at runtime · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { HotTableRef } from '@handsontable/react-wrapper';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype CampaignRow = {\n  campaign: string;\n  channel: string;\n  impressions: number;\n  clicks: number;\n  conversions: number;\n  cpc: number;\n  revenue: number;\n  roi: number;\n};\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale', channel: 'Email', impressions: 120000, clicks: 4800, conversions: 320, cpc: 0.42, revenue: 9600, roi: 2.28 },\n  { campaign: 'Summer Push', channel: 'Paid Search', impressions: 85000, clicks: 3100, conversions: 210, cpc: 1.15, revenue: 6300, roi: 1.82 },\n  { campaign: 'Back to School', channel: 'Social', impressions: 200000, clicks: 7200, conversions: 540, cpc: 0.31, revenue: 16200, roi: 3.10 },\n  { campaign: 'Black Friday', channel: 'Display', impressions: 450000, clicks: 9000, conversions: 720, cpc: 0.65, revenue: 28800, roi: 2.94 },\n  { campaign: 'Holiday Deals', channel: 'Email', impressions: 310000, clicks: 11200, conversions: 890, cpc: 0.28, revenue: 35600, roi: 4.12 },\n  { campaign: 'New Year Offer', channel: 'Paid Search', impressions: 95000, clicks: 3800, conversions: 290, cpc: 1.22, revenue: 8700, roi: 1.65 },\n  { campaign: 'Valentine Push', channel: 'Social', impressions: 140000, clicks: 5600, conversions: 410, cpc: 0.38, revenue: 12300, roi: 2.56 },\n  { campaign: 'Spring Relaunch', channel: 'Display', impressions: 175000, clicks: 6300, conversions: 480, cpc: 0.55, revenue: 14400, roi: 2.18 },\n];\n/* end:skip-in-preview */\n\nconst colHeaders = ['Campaign', 'Channel', 'Impressions', 'Clicks', 'Conversions', 'CPC ($)', 'Revenue ($)', 'ROI'];\n\nconst columns = [\n  { data: 'campaign', type: 'text' as const },\n  { data: 'channel', type: 'text' as const },\n  { data: 'impressions', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'clicks', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'conversions', type: 'numeric' as const, numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n  { data: 'cpc', type: 'numeric' as const, numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'revenue', type: 'numeric' as const, numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } },\n  { data: 'roi', type: 'numeric' as const, numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [frozenCount, setFrozenCount] = useState(0);\n\n  const freezeUpTo = useCallback((n: number) => {\n    const hot = hotRef.current?.hotInstance;\n    const total = hot ? hot.countCols() : colHeaders.length;\n\n    setFrozenCount(Math.min(n, total));\n  }, []);\n\n  const unfreezeAll = useCallback(() => {\n    setFrozenCount(0);\n  }, []);\n\n  const statusText = frozenCount === 0\n    ? 'No columns frozen'\n    : `${frozenCount} column${frozenCount > 1 ? 's' : ''} frozen`;\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {colHeaders.map((header, index) => (\n            <button\n              key={header}\n              type=\"button\"\n              onClick={() => freezeUpTo(index + 1)}\n            >\n              Freeze up to &quot;{header}&quot;\n            </button>\n          ))}\n        </div>\n        <div className=\"controls\">\n          <button type=\"button\" onClick={unfreezeAll}>Unfreeze all</button>\n          <span className=\"freeze-status\">{statusText}</span>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={colHeaders}\n        columns={columns}\n        fixedColumnsStart={frozenCount}\n        manualColumnMove={true}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".example-controls-container .controls + .controls {\n  margin-top: 0.5rem;\n}\n\n.freeze-controls__freeze-btns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.freeze-controls__footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.freeze-controls button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 0;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.freeze-controls button:hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.freeze-controls button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.freeze-controls__status {\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-style: italic;\n  color: var(--sl-color-gray-2, #555555);\n}"},"docsPath":"recipes/column-management/freeze-columns/react/example1.tsx","breadcrumb":["Recipes","Column Management","Freeze and unfreeze columns at runtime"],"guide":"recipes/column-management/freeze-columns/freeze-columns.md","guideTitle":"Freeze and unfreeze columns at runtime","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/column-management/freeze-columns","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__angular__example1.ts.json
index 4d83c1def..07f25c1fe 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-add-column-object-data></example1-add-column-object-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\ntype ColumnConfig = { data: string; width: number; className?: string };\n\n// `columns` and `colHeaders` are kept in mutable variables so the custom menu\n// item can extend them and push the change back through `updateSettings`.\nconst columns: ColumnConfig[] = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-add-column-object-data',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Handsontable.RowObject[] = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders,\n    columns,\n    height: 'auto',\n    width: '100%',\n    contextMenu: {\n      items: {\n        add_column: {\n          name: 'Add column',\n          callback: (_key: string, selection: Array<{ start: { col: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const insertAt = selection[0].start.col + 1;\n\n            newColumnCount += 1;\n            const newKey = `custom_${newColumnCount}`;\n\n            (hot.getSourceData() as Array<Record<string, unknown>>).forEach((row) => {\n              row[newKey] = '';\n            });\n\n            columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n            colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n            hot.updateSettings({ columns, colHeaders });\n          },\n        },\n        sep1: { name: '---------' },\n        row_above: { name: 'Insert row above' },\n        row_below: { name: 'Insert row below' },\n        remove_row: { name: 'Remove row' },\n      },\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-add-column-object-data></example1-add-column-object-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\ntype ColumnConfig = { data: string; width: number; className?: string };\n\n// `columns` and `colHeaders` are kept in mutable variables so the custom menu\n// item can extend them and push the change back through `updateSettings`.\nconst columns: ColumnConfig[] = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-add-column-object-data',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Handsontable.RowObject[] = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders,\n    columns,\n    height: 'auto',\n    width: '100%',\n    contextMenu: {\n      items: {\n        add_column: {\n          name: 'Add column',\n          callback: (_key: string, selection: Array<{ start: { col: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const insertAt = selection[0].start.col + 1;\n\n            newColumnCount += 1;\n            const newKey = `custom_${newColumnCount}`;\n\n            (hot.getSourceData() as Array<Record<string, unknown>>).forEach((row) => {\n              row[newKey] = '';\n            });\n\n            columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n            colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n            hot.updateSettings({ columns, colHeaders });\n          },\n        },\n        sep1: { name: '---------' },\n        row_above: { name: 'Insert row above' },\n        row_below: { name: 'Insert row below' },\n        remove_row: { name: 'Remove row' },\n      },\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__javascript__example1.js.json
index d81b9e922..db7bf829c 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\n// `columns` and `colHeaders` are kept in mutable variables so the custom menu\n// item can extend them and push the change back through `updateSettings`.\nconst columns = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders,\n  columns,\n  height: 'auto',\n  width: '100%',\n  contextMenu: {\n    items: {\n      // Object data blocks the built-in `col_left` / `col_right` items, so a\n      // custom action does the work instead.\n      add_column: {\n        name: 'Add column',\n        callback(key, selection) {\n          const insertAt = selection[0].start.col + 1;\n\n          newColumnCount += 1;\n          const newKey = `custom_${newColumnCount}`;\n\n          // 1. Add the new property to every source row object.\n          hot.getSourceData().forEach((row) => {\n            row[newKey] = '';\n          });\n\n          // 2. Extend the `columns` and `colHeaders` arrays at the clicked position.\n          columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n          colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n          // 3. Apply the new structure.\n          hot.updateSettings({ columns, colHeaders });\n        },\n      },\n      sep1: '---------',\n      row_above: { name: 'Insert row above' },\n      row_below: { name: 'Insert row below' },\n      remove_row: { name: 'Remove row' },\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\n// `columns` and `colHeaders` are kept in mutable variables so the custom menu\n// item can extend them and push the change back through `updateSettings`.\nconst columns = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders,\n  columns,\n  height: 'auto',\n  width: '100%',\n  contextMenu: {\n    items: {\n      // Object data blocks the built-in `col_left` / `col_right` items, so a\n      // custom action does the work instead.\n      add_column: {\n        name: 'Add column',\n        callback(key, selection) {\n          const insertAt = selection[0].start.col + 1;\n\n          newColumnCount += 1;\n          const newKey = `custom_${newColumnCount}`;\n\n          // 1. Add the new property to every source row object.\n          hot.getSourceData().forEach((row) => {\n            row[newKey] = '';\n          });\n\n          // 2. Extend the `columns` and `colHeaders` arrays at the clicked position.\n          columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n          colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n          // 3. Apply the new structure.\n          hot.updateSettings({ columns, colHeaders });\n        },\n      },\n      sep1: '---------',\n      row_above: { name: 'Insert row above' },\n      row_below: { name: 'Insert row below' },\n      remove_row: { name: 'Remove row' },\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__react__example1.tsx.json
index 7a761930c..3adf5e57f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__add-column-object-data__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\ntype ColumnConfig = { data: string; width: number; className?: string };\n\n// `columns` and `colHeaders` live outside the component so the custom menu item\n// can extend them and push the change back through `updateSettings`.\nconst columns: ColumnConfig[] = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      colHeaders={colHeaders}\n      columns={columns}\n      height=\"auto\"\n      width=\"100%\"\n      contextMenu={{\n        items: {\n          add_column: {\n            name: 'Add column',\n            callback(_key: string, selection: Array<{ start: { col: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const insertAt = selection[0].start.col + 1;\n\n              newColumnCount += 1;\n              const newKey = `custom_${newColumnCount}`;\n\n              (hot.getSourceData() as Array<Record<string, unknown>>).forEach((row) => {\n                row[newKey] = '';\n              });\n\n              columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n              colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n              hot.updateSettings({ columns, colHeaders });\n            },\n          },\n          sep1: '---------',\n          row_above: { name: 'Insert row above' },\n          row_below: { name: 'Insert row below' },\n          remove_row: { name: 'Remove row' },\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Add a column to an object-based dataset · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },\n  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },\n  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },\n  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },\n  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },\n  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },\n];\n/* end:skip-in-preview */\n\ntype ColumnConfig = { data: string; width: number; className?: string };\n\n// `columns` and `colHeaders` live outside the component so the custom menu item\n// can extend them and push the change back through `updateSettings`.\nconst columns: ColumnConfig[] = [\n  { data: 'sku', width: 120 },\n  { data: 'supplier', width: 170 },\n  { data: 'stock', width: 90 },\n  { data: 'category', width: 130 },\n];\nconst colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];\n\nlet newColumnCount = 0;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      colHeaders={colHeaders}\n      columns={columns}\n      height=\"auto\"\n      width=\"100%\"\n      contextMenu={{\n        items: {\n          add_column: {\n            name: 'Add column',\n            callback(_key: string, selection: Array<{ start: { col: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const insertAt = selection[0].start.col + 1;\n\n              newColumnCount += 1;\n              const newKey = `custom_${newColumnCount}`;\n\n              (hot.getSourceData() as Array<Record<string, unknown>>).forEach((row) => {\n                row[newKey] = '';\n              });\n\n              columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });\n              colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);\n\n              hot.updateSettings({ columns, colHeaders });\n            },\n          },\n          sep1: '---------',\n          row_above: { name: 'Insert row above' },\n          row_below: { name: 'Insert row below' },\n          remove_row: { name: 'Remove row' },\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"td.ht-new-column {\n  background-color: #e3f2fd;\n}"},"docsPath":"recipes/context-menu/add-column-object-data/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Add a column to an object-based dataset"],"guide":"recipes/context-menu/add-column-object-data/add-column-object-data.md","guideTitle":"Add a column to an object-based dataset","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/add-column-object-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__angular__example1.ts.json
index e68f0899d..ab2e18abb 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-custom-context-menu></example1-custom-context-menu>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set<number>();\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-custom-context-menu',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Handsontable.RowObject[] = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Task', 'Assignee', 'Status', 'Priority', 'Due Date'],\n    columns: [\n      { data: 'task', width: 200 },\n      { data: 'assignee', width: 130 },\n      { data: 'status', width: 110 },\n      { data: 'priority', width: 90 },\n      { data: 'dueDate', width: 110 },\n    ],\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    cells(row: number) {\n      if (flaggedRows.has(row)) {\n        return { className: 'ht-flagged-row' };\n      }\n      return {};\n    },\n    contextMenu: {\n      items: {\n        duplicate_row: {\n          name: 'Duplicate row',\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row)) as Record<string, unknown>;\n\n            hot.alter('insert_row_below', row, 1);\n            hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n          },\n        },\n        flag_row: {\n          name: (): string => {\n            const row = this.hotTable?.hotInstance?.getSelectedRangeLast()?.from.row;\n\n            return flaggedRows.has(row as number) ? 'Unflag row' : 'Flag row';\n          },\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n\n            if (flaggedRows.has(row)) {\n              flaggedRows.delete(row);\n            } else {\n              flaggedRows.add(row);\n            }\n\n            hot.render();\n          },\n        },\n        copy_row_as_json: {\n          name: 'Copy row as JSON',\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n            navigator.clipboard.writeText(JSON.stringify(rowData));\n          },\n        },\n        sep1: { name: '---------' },\n        row_above: { name: 'Insert row above' },\n        row_below: { name: 'Insert row below' },\n        remove_row: { name: 'Remove row' },\n        sep2: { name: '---------' },\n        undo: { name: 'Undo' },\n        redo: { name: 'Redo' },\n      },\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-custom-context-menu></example1-custom-context-menu>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set<number>();\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-custom-context-menu',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Handsontable.RowObject[] = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Task', 'Assignee', 'Status', 'Priority', 'Due Date'],\n    columns: [\n      { data: 'task', width: 200 },\n      { data: 'assignee', width: 130 },\n      { data: 'status', width: 110 },\n      { data: 'priority', width: 90 },\n      { data: 'dueDate', width: 110 },\n    ],\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    cells(row: number) {\n      if (flaggedRows.has(row)) {\n        return { className: 'ht-flagged-row' };\n      }\n      return {};\n    },\n    contextMenu: {\n      items: {\n        duplicate_row: {\n          name: 'Duplicate row',\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row)) as Record<string, unknown>;\n\n            hot.alter('insert_row_below', row, 1);\n            hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n          },\n        },\n        flag_row: {\n          name: (): string => {\n            const row = this.hotTable?.hotInstance?.getSelectedRangeLast()?.from.row;\n\n            return flaggedRows.has(row as number) ? 'Unflag row' : 'Flag row';\n          },\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n\n            if (flaggedRows.has(row)) {\n              flaggedRows.delete(row);\n            } else {\n              flaggedRows.add(row);\n            }\n\n            hot.render();\n          },\n        },\n        copy_row_as_json: {\n          name: 'Copy row as JSON',\n          callback: (_key: string, selection: Array<{ start: { row: number } }>) => {\n            const hot = this.hotTable?.hotInstance;\n\n            if (!hot) return;\n\n            const row = selection[0].start.row;\n            const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n            navigator.clipboard.writeText(JSON.stringify(rowData));\n          },\n        },\n        sep1: { name: '---------' },\n        row_above: { name: 'Insert row above' },\n        row_below: { name: 'Insert row below' },\n        remove_row: { name: 'Remove row' },\n        sep2: { name: '---------' },\n        undo: { name: 'Undo' },\n        redo: { name: 'Redo' },\n      },\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__javascript__example1.js.json
index 498a55972..81e0b929e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set();\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Task', 'Assignee', 'Status', 'Priority', 'Due Date'],\n  columns: [\n    { data: 'task', width: 200 },\n    { data: 'assignee', width: 130 },\n    { data: 'status', width: 110 },\n    { data: 'priority', width: 90 },\n    { data: 'dueDate', width: 110 },\n  ],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  // The `cells` callback runs for every cell and lets you attach per-row metadata.\n  // Returning `className: 'ht-flagged-row'` for flagged rows makes the CSS rule apply.\n  cells(row) {\n    if (flaggedRows.has(row)) {\n      return { className: 'ht-flagged-row' };\n    }\n  },\n  contextMenu: {\n    items: {\n      // --- Custom actions ---\n      duplicate_row: {\n        name: 'Duplicate row',\n        callback(key, selection) {\n          const row = selection[0].start.row;\n          const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n          hot.alter('insert_row_below', row, 1);\n          hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n        },\n      },\n      flag_row: {\n        name() {\n          const row = this.getSelectedRangeLast()?.from.row;\n\n          return flaggedRows.has(row) ? 'Unflag row' : 'Flag row';\n        },\n        callback(key, selection) {\n          const row = selection[0].start.row;\n\n          if (flaggedRows.has(row)) {\n            flaggedRows.delete(row);\n          } else {\n            flaggedRows.add(row);\n          }\n\n          hot.render();\n        },\n      },\n      copy_row_as_json: {\n        name: 'Copy row as JSON',\n        callback(key, selection) {\n          const row = selection[0].start.row;\n          const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n          navigator.clipboard.writeText(JSON.stringify(rowData));\n        },\n      },\n      // --- Separator between custom and built-in items ---\n      sep1: '-',\n      // --- Built-in items (col_left and col_right are omitted) ---\n      row_above: { name: 'Insert row above' },\n      row_below: { name: 'Insert row below' },\n      remove_row: { name: 'Remove row' },\n      sep2: '-',\n      undo: { name: 'Undo' },\n      redo: { name: 'Redo' },\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set();\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Task', 'Assignee', 'Status', 'Priority', 'Due Date'],\n  columns: [\n    { data: 'task', width: 200 },\n    { data: 'assignee', width: 130 },\n    { data: 'status', width: 110 },\n    { data: 'priority', width: 90 },\n    { data: 'dueDate', width: 110 },\n  ],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  // The `cells` callback runs for every cell and lets you attach per-row metadata.\n  // Returning `className: 'ht-flagged-row'` for flagged rows makes the CSS rule apply.\n  cells(row) {\n    if (flaggedRows.has(row)) {\n      return { className: 'ht-flagged-row' };\n    }\n  },\n  contextMenu: {\n    items: {\n      // --- Custom actions ---\n      duplicate_row: {\n        name: 'Duplicate row',\n        callback(key, selection) {\n          const row = selection[0].start.row;\n          const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n          hot.alter('insert_row_below', row, 1);\n          hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n        },\n      },\n      flag_row: {\n        name() {\n          const row = this.getSelectedRangeLast()?.from.row;\n\n          return flaggedRows.has(row) ? 'Unflag row' : 'Flag row';\n        },\n        callback(key, selection) {\n          const row = selection[0].start.row;\n\n          if (flaggedRows.has(row)) {\n            flaggedRows.delete(row);\n          } else {\n            flaggedRows.add(row);\n          }\n\n          hot.render();\n        },\n      },\n      copy_row_as_json: {\n        name: 'Copy row as JSON',\n        callback(key, selection) {\n          const row = selection[0].start.row;\n          const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n          navigator.clipboard.writeText(JSON.stringify(rowData));\n        },\n      },\n      // --- Separator between custom and built-in items ---\n      sep1: '-',\n      // --- Built-in items (col_left and col_right are omitted) ---\n      row_above: { name: 'Insert row above' },\n      row_below: { name: 'Insert row below' },\n      remove_row: { name: 'Remove row' },\n      sep2: '-',\n      undo: { name: 'Undo' },\n      redo: { name: 'Redo' },\n    },\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__react__example1.tsx.json
index d52d82193..889900b7f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__custom-context-menu__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set<number>();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Task', 'Assignee', 'Status', 'Priority', 'Due Date']}\n      columns={[\n        { data: 'task', width: 200 },\n        { data: 'assignee', width: 130 },\n        { data: 'status', width: 110 },\n        { data: 'priority', width: 90 },\n        { data: 'dueDate', width: 110 },\n      ]}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      cells={function(row: number) {\n        if (flaggedRows.has(row)) {\n          return { className: 'ht-flagged-row' };\n        }\n      }}\n      contextMenu={{\n        items: {\n          duplicate_row: {\n            name: 'Duplicate row',\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n              const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row)) as Record<string, unknown>;\n\n              hot.alter('insert_row_below', row, 1);\n              hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n            },\n          },\n          flag_row: {\n            name() {\n              const row = hotRef.current?.hotInstance?.getSelectedRangeLast()?.from.row;\n\n              return flaggedRows.has(row as number) ? 'Unflag row' : 'Flag row';\n            },\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n\n              if (flaggedRows.has(row)) {\n                flaggedRows.delete(row);\n              } else {\n                flaggedRows.add(row);\n              }\n\n              hot.render();\n            },\n          },\n          copy_row_as_json: {\n            name: 'Copy row as JSON',\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n              const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n              navigator.clipboard.writeText(JSON.stringify(rowData));\n            },\n          },\n          sep1: '-',\n          row_above: { name: 'Insert row above' },\n          row_below: { name: 'Insert row below' },\n          remove_row: { name: 'Remove row' },\n          sep2: '-',\n          undo: { name: 'Undo' },\n          redo: { name: 'Redo' },\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Custom context menu actions · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Deploy API v2', assignee: 'Alice Chen', status: 'In Progress', priority: 'High', dueDate: '2026-05-10' },\n  { task: 'Write unit tests', assignee: 'Bob Smith', status: 'To Do', priority: 'Medium', dueDate: '2026-05-15' },\n  { task: 'Review PR #142', assignee: 'Carol Davis', status: 'Done', priority: 'Low', dueDate: '2026-04-30' },\n  { task: 'Fix login timeout', assignee: 'David Lee', status: 'In Progress', priority: 'High', dueDate: '2026-05-08' },\n  { task: 'Update SSL certs', assignee: 'Eve Martin', status: 'To Do', priority: 'Urgent', dueDate: '2026-05-01' },\n  { task: 'Migrate DB schema', assignee: 'Frank Wang', status: 'To Do', priority: 'High', dueDate: '2026-05-20' },\n  { task: 'Refactor auth module', assignee: 'Grace Kim', status: 'In Progress', priority: 'Medium', dueDate: '2026-05-25' },\n  { task: 'Load test staging', assignee: 'Henry Park', status: 'To Do', priority: 'Low', dueDate: '2026-06-01' },\n];\n/* end:skip-in-preview */\n\nconst flaggedRows = new Set<number>();\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      colHeaders={['Task', 'Assignee', 'Status', 'Priority', 'Due Date']}\n      columns={[\n        { data: 'task', width: 200 },\n        { data: 'assignee', width: 130 },\n        { data: 'status', width: 110 },\n        { data: 'priority', width: 90 },\n        { data: 'dueDate', width: 110 },\n      ]}\n      height=\"auto\"\n      width=\"100%\"\n      autoWrapRow={true}\n      cells={function(row: number) {\n        if (flaggedRows.has(row)) {\n          return { className: 'ht-flagged-row' };\n        }\n      }}\n      contextMenu={{\n        items: {\n          duplicate_row: {\n            name: 'Duplicate row',\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n              const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row)) as Record<string, unknown>;\n\n              hot.alter('insert_row_below', row, 1);\n              hot.populateFromArray(row + 1, 0, [Object.values(rowData)]);\n            },\n          },\n          flag_row: {\n            name() {\n              const row = hotRef.current?.hotInstance?.getSelectedRangeLast()?.from.row;\n\n              return flaggedRows.has(row as number) ? 'Unflag row' : 'Flag row';\n            },\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n\n              if (flaggedRows.has(row)) {\n                flaggedRows.delete(row);\n              } else {\n                flaggedRows.add(row);\n              }\n\n              hot.render();\n            },\n          },\n          copy_row_as_json: {\n            name: 'Copy row as JSON',\n            callback(_key: string, selection: Array<{ start: { row: number } }>) {\n              const hot = hotRef.current?.hotInstance;\n\n              if (!hot) return;\n\n              const row = selection[0].start.row;\n              const rowData = hot.getSourceDataAtRow(hot.toPhysicalRow(row));\n\n              navigator.clipboard.writeText(JSON.stringify(rowData));\n            },\n          },\n          sep1: '-',\n          row_above: { name: 'Insert row above' },\n          row_below: { name: 'Insert row below' },\n          remove_row: { name: 'Remove row' },\n          sep2: '-',\n          undo: { name: 'Undo' },\n          redo: { name: 'Redo' },\n        },\n      }}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"td.ht-flagged-row {\n  background-color: #fff9c4 !important;\n}"},"docsPath":"recipes/context-menu/custom-context-menu/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Custom context menu actions"],"guide":"recipes/context-menu/custom-context-menu/custom-context-menu.md","guideTitle":"Custom context menu actions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/custom-context-menu","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__angular__example1.ts.json
index 121c701ce..9d06ac5e4 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-row-operations></example1-row-operations>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ElementRef, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst INITIAL_DATA: string[][] = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-row-operations',\n  template: `\n    <div class=\"example-controls-container\" #toolbar>\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"addRow()\">Add Row</button>\n        <button type=\"button\" (click)=\"deleteRow()\" [disabled]=\"selectedRow === null\">Delete Row</button>\n        <button type=\"button\" (click)=\"moveUp()\" [disabled]=\"selectedRow === null || selectedRow === 0\">Move Up</button>\n        <button type=\"button\" (click)=\"moveDown()\" [disabled]=\"selectedRow === null || isLastRow\">Move Down</button>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('toolbar', { static: true }) readonly toolbarRef!: ElementRef<HTMLElement>;\n\n  readonly hotData: string[][] = [...INITIAL_DATA];\n\n  selectedRow: number | null = null;\n\n  get isLastRow(): boolean {\n    const hot = this.hotTable?.hotInstance;\n\n    return hot ? this.selectedRow === hot.countRows() - 1 : false;\n  }\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    manualRowMove: true,\n    // Keep the grid selected when clicking toolbar buttons. Without this,\n    // Handsontable treats toolbar clicks as outside clicks and deselects,\n    // which clears selectedRow before the button's click handler runs.\n    outsideClickDeselects: (target: HTMLElement) => {\n      return !this.toolbarRef?.nativeElement?.contains(target);\n    },\n    afterSelectionEnd: (row: number, _col: number, row2: number) => {\n      this.selectedRow = row === row2 ? Math.min(row, row2) : null;\n    },\n    afterDeselect: () => {\n      this.selectedRow = null;\n    },\n  };\n\n  addRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.alter('insert_row_below', hot.countRows() - 1);\n  }\n\n  deleteRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const selected = hot.getSelected();\n\n    if (!selected) {\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    selected.forEach(([r1, , r2]) => {\n      const from = Math.min(r1, r2);\n      const to = Math.max(r1, r2);\n\n      for (let r = from; r <= to; r++) {\n        rowSet.add(r);\n      }\n    });\n\n    // Delete from bottom to top so earlier indices stay valid\n    const rows = [...rowSet].sort((a, b) => b - a);\n\n    rows.forEach((row) => hot.alter('remove_row', row, 1));\n  }\n\n  moveUp(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (this.selectedRow === null || this.selectedRow === 0 || !hot) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(this.selectedRow, this.selectedRow - 1);\n    hot.render();\n    this.selectedRow -= 1;\n    hot.selectRows(this.selectedRow);\n  }\n\n  moveDown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (this.selectedRow === null || !hot || this.selectedRow === hot.countRows() - 1) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(this.selectedRow, this.selectedRow + 2);\n    hot.render();\n    this.selectedRow += 1;\n    hot.selectRows(this.selectedRow);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/context-menu/row-operations/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-row-operations></example1-row-operations>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ElementRef, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\nconst INITIAL_DATA: string[][] = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-row-operations',\n  template: `\n    <div class=\"example-controls-container\" #toolbar>\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"addRow()\">Add Row</button>\n        <button type=\"button\" (click)=\"deleteRow()\" [disabled]=\"selectedRow === null\">Delete Row</button>\n        <button type=\"button\" (click)=\"moveUp()\" [disabled]=\"selectedRow === null || selectedRow === 0\">Move Up</button>\n        <button type=\"button\" (click)=\"moveDown()\" [disabled]=\"selectedRow === null || isLastRow\">Move Down</button>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('toolbar', { static: true }) readonly toolbarRef!: ElementRef<HTMLElement>;\n\n  readonly hotData: string[][] = [...INITIAL_DATA];\n\n  selectedRow: number | null = null;\n\n  get isLastRow(): boolean {\n    const hot = this.hotTable?.hotInstance;\n\n    return hot ? this.selectedRow === hot.countRows() - 1 : false;\n  }\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    manualRowMove: true,\n    // Keep the grid selected when clicking toolbar buttons. Without this,\n    // Handsontable treats toolbar clicks as outside clicks and deselects,\n    // which clears selectedRow before the button's click handler runs.\n    outsideClickDeselects: (target: HTMLElement) => {\n      return !this.toolbarRef?.nativeElement?.contains(target);\n    },\n    afterSelectionEnd: (row: number, _col: number, row2: number) => {\n      this.selectedRow = row === row2 ? Math.min(row, row2) : null;\n    },\n    afterDeselect: () => {\n      this.selectedRow = null;\n    },\n  };\n\n  addRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    hot.alter('insert_row_below', hot.countRows() - 1);\n  }\n\n  deleteRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const selected = hot.getSelected();\n\n    if (!selected) {\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    selected.forEach(([r1, , r2]) => {\n      const from = Math.min(r1, r2);\n      const to = Math.max(r1, r2);\n\n      for (let r = from; r <= to; r++) {\n        rowSet.add(r);\n      }\n    });\n\n    // Delete from bottom to top so earlier indices stay valid\n    const rows = [...rowSet].sort((a, b) => b - a);\n\n    rows.forEach((row) => hot.alter('remove_row', row, 1));\n  }\n\n  moveUp(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (this.selectedRow === null || this.selectedRow === 0 || !hot) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(this.selectedRow, this.selectedRow - 1);\n    hot.render();\n    this.selectedRow -= 1;\n    hot.selectRows(this.selectedRow);\n  }\n\n  moveDown(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (this.selectedRow === null || !hot || this.selectedRow === hot.countRows() - 1) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(this.selectedRow, this.selectedRow + 2);\n    hot.render();\n    this.selectedRow += 1;\n    hot.selectRows(this.selectedRow);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/context-menu/row-operations/angular/example1.ts","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.js.json
index 7df21ba54..94c1dd008 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\ntoolbar.innerHTML = `\n  <div class=\"controls\">\n    <button id=\"btn-add-row\" type=\"button\">Add Row</button>\n    <button id=\"btn-delete-row\" type=\"button\">Delete Row</button>\n    <button id=\"btn-move-up\" type=\"button\">Move Up</button>\n    <button id=\"btn-move-down\" type=\"button\">Move Down</button>\n  </div>\n`;\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  manualRowMove: true,\n  // Keep the grid selected when clicking toolbar buttons. Without this,\n  // Handsontable treats toolbar clicks as outside clicks and deselects,\n  // which clears selectedRow before the button's click handler runs.\n  outsideClickDeselects(target) {\n    return !toolbar.contains(target);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst btnAddRow = toolbar.querySelector('#btn-add-row');\nconst btnDeleteRow = toolbar.querySelector('#btn-delete-row');\nconst btnMoveUp = toolbar.querySelector('#btn-move-up');\nconst btnMoveDown = toolbar.querySelector('#btn-move-down');\n\nlet selectedRow = null;\n\nfunction updateButtonStates() {\n  const hasSelection = selectedRow !== null;\n  const isFirst = selectedRow === 0;\n  const isLast = selectedRow === hot.countRows() - 1;\n\n  btnDeleteRow.disabled = !hasSelection;\n  btnMoveUp.disabled = !hasSelection || isFirst;\n  btnMoveDown.disabled = !hasSelection || isLast;\n}\n\nhot.addHook('afterSelectionEnd', (row, col, row2) => {\n  selectedRow = row === row2 ? Math.min(row, row2) : null;\n  updateButtonStates();\n});\n\nhot.addHook('afterDeselect', () => {\n  selectedRow = null;\n  updateButtonStates();\n});\n\nbtnAddRow.addEventListener('click', () => {\n  hot.alter('insert_row_below', hot.countRows() - 1);\n});\n\nbtnDeleteRow.addEventListener('click', () => {\n  const selected = hot.getSelected();\n\n  if (!selected) {\n    return;\n  }\n\n  const rowSet = new Set();\n\n  selected.forEach(([r1, , r2]) => {\n    const from = Math.min(r1, r2);\n    const to = Math.max(r1, r2);\n\n    for (let r = from; r <= to; r++) {\n      rowSet.add(r);\n    }\n  });\n\n  const rows = [...rowSet].sort((a, b) => b - a);\n\n  rows.forEach(row => hot.alter('remove_row', row, 1));\n  updateButtonStates();\n});\n\nbtnMoveUp.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === 0) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n  hot.render();\n  selectedRow -= 1;\n  hot.selectRows(selectedRow);\n});\n\n// ManualRowMove inserts BEFORE the target index, so moving row N down\n// requires a target of N + 2 (the slot after the next row).\nbtnMoveDown.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === hot.countRows() - 1) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n  hot.render();\n  selectedRow += 1;\n  hot.selectRows(selectedRow);\n});\n\nupdateButtonStates();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/context-menu/row-operations/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\ntoolbar.innerHTML = `\n  <div class=\"controls\">\n    <button id=\"btn-add-row\" type=\"button\">Add Row</button>\n    <button id=\"btn-delete-row\" type=\"button\">Delete Row</button>\n    <button id=\"btn-move-up\" type=\"button\">Move Up</button>\n    <button id=\"btn-move-down\" type=\"button\">Move Down</button>\n  </div>\n`;\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  manualRowMove: true,\n  // Keep the grid selected when clicking toolbar buttons. Without this,\n  // Handsontable treats toolbar clicks as outside clicks and deselects,\n  // which clears selectedRow before the button's click handler runs.\n  outsideClickDeselects(target) {\n    return !toolbar.contains(target);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst btnAddRow = toolbar.querySelector('#btn-add-row');\nconst btnDeleteRow = toolbar.querySelector('#btn-delete-row');\nconst btnMoveUp = toolbar.querySelector('#btn-move-up');\nconst btnMoveDown = toolbar.querySelector('#btn-move-down');\n\nlet selectedRow = null;\n\nfunction updateButtonStates() {\n  const hasSelection = selectedRow !== null;\n  const isFirst = selectedRow === 0;\n  const isLast = selectedRow === hot.countRows() - 1;\n\n  btnDeleteRow.disabled = !hasSelection;\n  btnMoveUp.disabled = !hasSelection || isFirst;\n  btnMoveDown.disabled = !hasSelection || isLast;\n}\n\nhot.addHook('afterSelectionEnd', (row, col, row2) => {\n  selectedRow = row === row2 ? Math.min(row, row2) : null;\n  updateButtonStates();\n});\n\nhot.addHook('afterDeselect', () => {\n  selectedRow = null;\n  updateButtonStates();\n});\n\nbtnAddRow.addEventListener('click', () => {\n  hot.alter('insert_row_below', hot.countRows() - 1);\n});\n\nbtnDeleteRow.addEventListener('click', () => {\n  const selected = hot.getSelected();\n\n  if (!selected) {\n    return;\n  }\n\n  const rowSet = new Set();\n\n  selected.forEach(([r1, , r2]) => {\n    const from = Math.min(r1, r2);\n    const to = Math.max(r1, r2);\n\n    for (let r = from; r <= to; r++) {\n      rowSet.add(r);\n    }\n  });\n\n  const rows = [...rowSet].sort((a, b) => b - a);\n\n  rows.forEach(row => hot.alter('remove_row', row, 1));\n  updateButtonStates();\n});\n\nbtnMoveUp.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === 0) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n  hot.render();\n  selectedRow -= 1;\n  hot.selectRows(selectedRow);\n});\n\n// ManualRowMove inserts BEFORE the target index, so moving row N down\n// requires a target of N + 2 (the slot after the next row).\nbtnMoveDown.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === hot.countRows() - 1) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n  hot.render();\n  selectedRow += 1;\n  hot.selectRows(selectedRow);\n});\n\nupdateButtonStates();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/context-menu/row-operations/javascript/example1.js","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.ts.json
index 05663f02a..162ce2ca2 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1')!;\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\ntoolbar.innerHTML = `\n  <div class=\"controls\">\n    <button id=\"btn-add-row\" type=\"button\">Add Row</button>\n    <button id=\"btn-delete-row\" type=\"button\">Delete Row</button>\n    <button id=\"btn-move-up\" type=\"button\">Move Up</button>\n    <button id=\"btn-move-down\" type=\"button\">Move Down</button>\n  </div>\n`;\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  manualRowMove: true,\n  outsideClickDeselects(target: HTMLElement) {\n    return !toolbar.contains(target);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst btnAddRow = toolbar.querySelector('#btn-add-row') as HTMLButtonElement;\nconst btnDeleteRow = toolbar.querySelector('#btn-delete-row') as HTMLButtonElement;\nconst btnMoveUp = toolbar.querySelector('#btn-move-up') as HTMLButtonElement;\nconst btnMoveDown = toolbar.querySelector('#btn-move-down') as HTMLButtonElement;\n\nlet selectedRow: number | null = null;\n\nfunction updateButtonStates(): void {\n  const hasSelection = selectedRow !== null;\n  const isFirst = selectedRow === 0;\n  const isLast = selectedRow === hot.countRows() - 1;\n\n  btnDeleteRow.disabled = !hasSelection;\n  btnMoveUp.disabled = !hasSelection || isFirst;\n  btnMoveDown.disabled = !hasSelection || isLast;\n}\n\nhot.addHook('afterSelectionEnd', (row: number, _col: number, row2: number) => {\n  selectedRow = row === row2 ? Math.min(row, row2) : null;\n  updateButtonStates();\n});\n\nhot.addHook('afterDeselect', () => {\n  selectedRow = null;\n  updateButtonStates();\n});\n\nbtnAddRow.addEventListener('click', () => {\n  hot.alter('insert_row_below', hot.countRows() - 1);\n});\n\nbtnDeleteRow.addEventListener('click', () => {\n  const selected = hot.getSelected();\n\n  if (!selected) {\n    return;\n  }\n\n  const rowSet = new Set<number>();\n\n  selected.forEach(([r1, , r2]) => {\n    const from = Math.min(r1, r2);\n    const to = Math.max(r1, r2);\n\n    for (let r = from; r <= to; r++) {\n      rowSet.add(r);\n    }\n  });\n\n  const rows = [...rowSet].sort((a, b) => b - a);\n\n  rows.forEach(row => hot.alter('remove_row', row, 1));\n  updateButtonStates();\n});\n\nbtnMoveUp.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === 0) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n  hot.render();\n  selectedRow -= 1;\n  hot.selectRows(selectedRow);\n});\n\n// ManualRowMove inserts BEFORE the target index, so moving row N down\n// requires a target of N + 2 (the slot after the next row).\nbtnMoveDown.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === hot.countRows() - 1) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n  hot.render();\n  selectedRow += 1;\n  hot.selectRows(selectedRow);\n});\n\nupdateButtonStates();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/context-menu/row-operations/javascript/example1.ts","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1')!;\n\nconst toolbar = document.createElement('div');\n\ntoolbar.classList.add('example-controls-container');\ntoolbar.innerHTML = `\n  <div class=\"controls\">\n    <button id=\"btn-add-row\" type=\"button\">Add Row</button>\n    <button id=\"btn-delete-row\" type=\"button\">Delete Row</button>\n    <button id=\"btn-move-up\" type=\"button\">Move Up</button>\n    <button id=\"btn-move-down\" type=\"button\">Move Down</button>\n  </div>\n`;\ncontainer.before(toolbar);\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Priority', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  manualRowMove: true,\n  outsideClickDeselects(target: HTMLElement) {\n    return !toolbar.contains(target);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst btnAddRow = toolbar.querySelector('#btn-add-row') as HTMLButtonElement;\nconst btnDeleteRow = toolbar.querySelector('#btn-delete-row') as HTMLButtonElement;\nconst btnMoveUp = toolbar.querySelector('#btn-move-up') as HTMLButtonElement;\nconst btnMoveDown = toolbar.querySelector('#btn-move-down') as HTMLButtonElement;\n\nlet selectedRow: number | null = null;\n\nfunction updateButtonStates(): void {\n  const hasSelection = selectedRow !== null;\n  const isFirst = selectedRow === 0;\n  const isLast = selectedRow === hot.countRows() - 1;\n\n  btnDeleteRow.disabled = !hasSelection;\n  btnMoveUp.disabled = !hasSelection || isFirst;\n  btnMoveDown.disabled = !hasSelection || isLast;\n}\n\nhot.addHook('afterSelectionEnd', (row: number, _col: number, row2: number) => {\n  selectedRow = row === row2 ? Math.min(row, row2) : null;\n  updateButtonStates();\n});\n\nhot.addHook('afterDeselect', () => {\n  selectedRow = null;\n  updateButtonStates();\n});\n\nbtnAddRow.addEventListener('click', () => {\n  hot.alter('insert_row_below', hot.countRows() - 1);\n});\n\nbtnDeleteRow.addEventListener('click', () => {\n  const selected = hot.getSelected();\n\n  if (!selected) {\n    return;\n  }\n\n  const rowSet = new Set<number>();\n\n  selected.forEach(([r1, , r2]) => {\n    const from = Math.min(r1, r2);\n    const to = Math.max(r1, r2);\n\n    for (let r = from; r <= to; r++) {\n      rowSet.add(r);\n    }\n  });\n\n  const rows = [...rowSet].sort((a, b) => b - a);\n\n  rows.forEach(row => hot.alter('remove_row', row, 1));\n  updateButtonStates();\n});\n\nbtnMoveUp.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === 0) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n  hot.render();\n  selectedRow -= 1;\n  hot.selectRows(selectedRow);\n});\n\n// ManualRowMove inserts BEFORE the target index, so moving row N down\n// requires a target of N + 2 (the slot after the next row).\nbtnMoveDown.addEventListener('click', () => {\n  if (selectedRow === null || selectedRow === hot.countRows() - 1) {\n    return;\n  }\n\n  hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n  hot.render();\n  selectedRow += 1;\n  hot.selectRows(selectedRow);\n});\n\nupdateButtonStates();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/context-menu/row-operations/javascript/example1.ts","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__react__example1.tsx.json
index 76e19eb9e..dab56185a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__context-menu__row-operations__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst INITIAL_DATA: string[][] = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [selectedRow, setSelectedRow] = useState<number | null>(null);\n\n  const getHot = () => hotRef.current?.hotInstance;\n\n  const isFirst = selectedRow === 0;\n  const isLast =\n    selectedRow !== null && !!getHot() && selectedRow === (getHot()?.countRows() ?? 0) - 1;\n\n  const handleAddRow = (): void => {\n    const hot = getHot();\n\n    if (!hot) {\n      return;\n    }\n\n    hot.alter('insert_row_below', hot.countRows() - 1);\n  };\n\n  const handleDeleteRow = (): void => {\n    const hot = getHot();\n    const selected = hot?.getSelected();\n\n    if (!selected) {\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    selected.forEach(([r1, , r2]) => {\n      const from = Math.min(r1, r2);\n      const to = Math.max(r1, r2);\n\n      for (let r = from; r <= to; r++) {\n        rowSet.add(r);\n      }\n    });\n\n    // Delete from bottom to top so earlier indices stay valid\n    const rows = [...rowSet].sort((a, b) => b - a);\n\n    rows.forEach((row) => hot.alter('remove_row', row, 1));\n  };\n\n  const handleMoveUp = (): void => {\n    const hot = getHot();\n\n    if (selectedRow === null || selectedRow === 0 || !hot) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n    hot.render();\n    const newRow = selectedRow - 1;\n\n    hot.selectRows(newRow);\n    setSelectedRow(newRow);\n  };\n\n  const handleMoveDown = (): void => {\n    const hot = getHot();\n\n    if (selectedRow === null || !hot || selectedRow === hot.countRows() - 1) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n    hot.render();\n    const newRow = selectedRow + 1;\n\n    hot.selectRows(newRow);\n    setSelectedRow(newRow);\n  };\n\n  const handleSelectionEnd = (row: number, _col: number, row2: number): void => {\n    setSelectedRow(row === row2 ? row : null);\n  };\n\n  const handleDeselect = (): void => {\n    setSelectedRow(null);\n  };\n\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  // Keep the grid selected when clicking toolbar buttons. Without this,\n  // Handsontable treats toolbar clicks as outside clicks and deselects,\n  // which clears selectedRow before the button's onClick handler runs.\n  const outsideClickDeselects = (target: HTMLElement): boolean => {\n    return !toolbarRef.current?.contains(target);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\" ref={toolbarRef}>\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleAddRow}>\n            Add Row\n          </button>\n          <button type=\"button\" onClick={handleDeleteRow} disabled={selectedRow === null}>\n            Delete Row\n          </button>\n          <button type=\"button\" onClick={handleMoveUp} disabled={selectedRow === null || isFirst}>\n            Move Up\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleMoveDown}\n            disabled={selectedRow === null || isLast}\n          >\n            Move Down\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={INITIAL_DATA}\n        colHeaders={['Task', 'Assignee', 'Priority', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        manualRowMove={true}\n        outsideClickDeselects={outsideClickDeselects}\n        afterSelectionEnd={handleSelectionEnd}\n        afterDeselect={handleDeselect}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/context-menu/row-operations/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Context Menu ▸ Programmatic row operations · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst INITIAL_DATA: string[][] = [\n  ['Migrate auth service to OAuth 2.0', 'Alice Johnson', 'High', 'In Progress'],\n  ['Write API documentation', 'Bob Smith', 'Normal', 'To Do'],\n  ['Fix pagination bug on dashboard', 'Carol White', 'High', 'In Review'],\n  ['Add CSV export feature', 'David Lee', 'Normal', 'To Do'],\n  ['Upgrade React to v19', 'Eve Martinez', 'Low', 'Backlog'],\n  ['Implement dark mode toggle', 'Frank Brown', 'Normal', 'In Progress'],\n  ['Set up end-to-end test suite', 'Grace Kim', 'High', 'To Do'],\n  ['Refactor database connection pool', 'Henry Wilson', 'Low', 'Backlog'],\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [selectedRow, setSelectedRow] = useState<number | null>(null);\n\n  const getHot = () => hotRef.current?.hotInstance;\n\n  const isFirst = selectedRow === 0;\n  const isLast =\n    selectedRow !== null && !!getHot() && selectedRow === (getHot()?.countRows() ?? 0) - 1;\n\n  const handleAddRow = (): void => {\n    const hot = getHot();\n\n    if (!hot) {\n      return;\n    }\n\n    hot.alter('insert_row_below', hot.countRows() - 1);\n  };\n\n  const handleDeleteRow = (): void => {\n    const hot = getHot();\n    const selected = hot?.getSelected();\n\n    if (!selected) {\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    selected.forEach(([r1, , r2]) => {\n      const from = Math.min(r1, r2);\n      const to = Math.max(r1, r2);\n\n      for (let r = from; r <= to; r++) {\n        rowSet.add(r);\n      }\n    });\n\n    // Delete from bottom to top so earlier indices stay valid\n    const rows = [...rowSet].sort((a, b) => b - a);\n\n    rows.forEach((row) => hot.alter('remove_row', row, 1));\n  };\n\n  const handleMoveUp = (): void => {\n    const hot = getHot();\n\n    if (selectedRow === null || selectedRow === 0 || !hot) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow - 1);\n    hot.render();\n    const newRow = selectedRow - 1;\n\n    hot.selectRows(newRow);\n    setSelectedRow(newRow);\n  };\n\n  const handleMoveDown = (): void => {\n    const hot = getHot();\n\n    if (selectedRow === null || !hot || selectedRow === hot.countRows() - 1) {\n      return;\n    }\n\n    hot.getPlugin('manualRowMove').moveRow(selectedRow, selectedRow + 2);\n    hot.render();\n    const newRow = selectedRow + 1;\n\n    hot.selectRows(newRow);\n    setSelectedRow(newRow);\n  };\n\n  const handleSelectionEnd = (row: number, _col: number, row2: number): void => {\n    setSelectedRow(row === row2 ? row : null);\n  };\n\n  const handleDeselect = (): void => {\n    setSelectedRow(null);\n  };\n\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  // Keep the grid selected when clicking toolbar buttons. Without this,\n  // Handsontable treats toolbar clicks as outside clicks and deselects,\n  // which clears selectedRow before the button's onClick handler runs.\n  const outsideClickDeselects = (target: HTMLElement): boolean => {\n    return !toolbarRef.current?.contains(target);\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\" ref={toolbarRef}>\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleAddRow}>\n            Add Row\n          </button>\n          <button type=\"button\" onClick={handleDeleteRow} disabled={selectedRow === null}>\n            Delete Row\n          </button>\n          <button type=\"button\" onClick={handleMoveUp} disabled={selectedRow === null || isFirst}>\n            Move Up\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleMoveDown}\n            disabled={selectedRow === null || isLast}\n          >\n            Move Down\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={INITIAL_DATA}\n        colHeaders={['Task', 'Assignee', 'Priority', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        manualRowMove={true}\n        outsideClickDeselects={outsideClickDeselects}\n        afterSelectionEnd={handleSelectionEnd}\n        afterDeselect={handleDeselect}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/context-menu/row-operations/react/example1.tsx","breadcrumb":["Recipes","Context Menu","Programmatic row operations"],"guide":"recipes/context-menu/row-operations/row-operations.md","guideTitle":"Programmatic row operations","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/context-menu/row-operations","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__angular__example1.ts.json
index 929d1381d..1679f0404 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-auto-save-backend></example1-auto-save-backend>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ntype RowData = {\n  id: number;\n  product: string;\n  stock: number;\n  price: number;\n  status: 'active' | 'draft' | 'paused';\n};\n\ntype SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\nconst STATUS_LABELS: Record<SaveStatus, string> = {\n  idle: 'No pending changes',\n  saving: 'Saving...',\n  saved: 'Saved ✓',\n  error: 'Error',\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-auto-save-backend',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span class=\"auto-save-backend-status\" [attr.data-state]=\"saveStatus\">{{ statusLabel }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  saveStatus: SaveStatus = 'idle';\n\n  get statusLabel(): string {\n    return STATUS_LABELS[this.saveStatus];\n  }\n\n  readonly hotData: RowData[] = [\n    { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n    { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n    { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n    { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n    { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n  ];\n\n  private dirtyRows = new Set<number>();\n  private saveTimeout: ReturnType<typeof setTimeout> | null = null;\n  private saveRequestCounter = 0;\n\n  private saveRowsToBackend(rows: RowData[]): Promise<void> {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  }\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow as number);\n\n          if (physicalRow !== null && physicalRow >= 0) {\n            this.dirtyRows.add(physicalRow);\n          }\n        }\n      });\n\n      if (this.saveTimeout) {\n        clearTimeout(this.saveTimeout);\n      }\n\n      this.saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(this.dirtyRows);\n\n        if (physicalRows.length === 0) {\n          return;\n        }\n\n        const requestId = ++this.saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row): row is number => row !== null);\n\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === this.saveRequestCounter) {\n              this.ngZone.run(() => {\n                this.saveStatus = 'error';\n              });\n            }\n\n            return;\n          }\n\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row): row is RowData => row !== undefined && row !== null);\n\n          this.dirtyRows.clear();\n          this.ngZone.run(() => {\n            this.saveStatus = 'saving';\n          });\n\n          void this.saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === this.saveRequestCounter) {\n                this.ngZone.run(() => {\n                  this.saveStatus = 'saved';\n                });\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => this.dirtyRows.add(physicalRow));\n\n              if (requestId === this.saveRequestCounter) {\n                this.ngZone.run(() => {\n                  this.saveStatus = 'error';\n                });\n              }\n            });\n        });\n      }, 800);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/angular/example1.ts","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-auto-save-backend></example1-auto-save-backend>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ntype RowData = {\n  id: number;\n  product: string;\n  stock: number;\n  price: number;\n  status: 'active' | 'draft' | 'paused';\n};\n\ntype SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\nconst STATUS_LABELS: Record<SaveStatus, string> = {\n  idle: 'No pending changes',\n  saving: 'Saving...',\n  saved: 'Saved ✓',\n  error: 'Error',\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-auto-save-backend',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <span class=\"auto-save-backend-status\" [attr.data-state]=\"saveStatus\">{{ statusLabel }}</span>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  saveStatus: SaveStatus = 'idle';\n\n  get statusLabel(): string {\n    return STATUS_LABELS[this.saveStatus];\n  }\n\n  readonly hotData: RowData[] = [\n    { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n    { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n    { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n    { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n    { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n  ];\n\n  private dirtyRows = new Set<number>();\n  private saveTimeout: ReturnType<typeof setTimeout> | null = null;\n  private saveRequestCounter = 0;\n\n  private saveRowsToBackend(rows: RowData[]): Promise<void> {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  }\n\n  readonly hotSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow as number);\n\n          if (physicalRow !== null && physicalRow >= 0) {\n            this.dirtyRows.add(physicalRow);\n          }\n        }\n      });\n\n      if (this.saveTimeout) {\n        clearTimeout(this.saveTimeout);\n      }\n\n      this.saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(this.dirtyRows);\n\n        if (physicalRows.length === 0) {\n          return;\n        }\n\n        const requestId = ++this.saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row): row is number => row !== null);\n\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === this.saveRequestCounter) {\n              this.ngZone.run(() => {\n                this.saveStatus = 'error';\n              });\n            }\n\n            return;\n          }\n\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row): row is RowData => row !== undefined && row !== null);\n\n          this.dirtyRows.clear();\n          this.ngZone.run(() => {\n            this.saveStatus = 'saving';\n          });\n\n          void this.saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === this.saveRequestCounter) {\n                this.ngZone.run(() => {\n                  this.saveStatus = 'saved';\n                });\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => this.dirtyRows.add(physicalRow));\n\n              if (requestId === this.saveRequestCounter) {\n                this.ngZone.run(() => {\n                  this.saveStatus = 'error';\n                });\n              }\n            });\n        });\n      }, 800);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/angular/example1.ts","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.js.json
index 8952b2b4a..67c9afb1a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n\nconst data = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\nconst rootContainer = document.querySelector('#example1');\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const statusEl = document.createElement('span');\n  const gridContainer = document.createElement('div');\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n  statusEl.className = 'auto-save-backend-status';\n  toolbar.appendChild(controls);\n  controls.appendChild(statusEl);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n  const dirtyRows = new Set();\n  let saveTimeout = null;\n  let saveRequestCounter = 0;\n  const setSaveStatus = (state) => {\n    const labels = {\n      idle: 'No pending changes',\n      saving: 'Saving...',\n      saved: 'Saved ✓',\n      error: 'Error',\n    };\n    statusEl.textContent = labels[state];\n    statusEl.dataset.state = state;\n  };\n  const saveRowsToBackend = (rows) => {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  };\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    afterChange(changes, source) {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow);\n          if (physicalRow !== null && physicalRow >= 0) {\n            dirtyRows.add(physicalRow);\n          }\n        }\n      });\n      if (saveTimeout) {\n        clearTimeout(saveTimeout);\n      }\n      saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(dirtyRows);\n        if (physicalRows.length === 0) {\n          return;\n        }\n        const requestId = ++saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row) => row !== null);\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === saveRequestCounter) {\n              setSaveStatus('error');\n            }\n            return;\n          }\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row) => row !== undefined && row !== null);\n          dirtyRows.clear();\n          setSaveStatus('saving');\n          void saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('saved');\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => dirtyRows.add(physicalRow));\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('error');\n              }\n            });\n        });\n      }, 800);\n    },\n  });\n  // Demonstrate that loadData updates do not trigger save requests.\n  hot.loadData(data.map((row) => ({ ...row })));\n  setSaveStatus('idle');\n}","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/javascript/example1.js","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n\nconst data = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\nconst rootContainer = document.querySelector('#example1');\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const statusEl = document.createElement('span');\n  const gridContainer = document.createElement('div');\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n  statusEl.className = 'auto-save-backend-status';\n  toolbar.appendChild(controls);\n  controls.appendChild(statusEl);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n  const dirtyRows = new Set();\n  let saveTimeout = null;\n  let saveRequestCounter = 0;\n  const setSaveStatus = (state) => {\n    const labels = {\n      idle: 'No pending changes',\n      saving: 'Saving...',\n      saved: 'Saved ✓',\n      error: 'Error',\n    };\n    statusEl.textContent = labels[state];\n    statusEl.dataset.state = state;\n  };\n  const saveRowsToBackend = (rows) => {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  };\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    afterChange(changes, source) {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow);\n          if (physicalRow !== null && physicalRow >= 0) {\n            dirtyRows.add(physicalRow);\n          }\n        }\n      });\n      if (saveTimeout) {\n        clearTimeout(saveTimeout);\n      }\n      saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(dirtyRows);\n        if (physicalRows.length === 0) {\n          return;\n        }\n        const requestId = ++saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row) => row !== null);\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === saveRequestCounter) {\n              setSaveStatus('error');\n            }\n            return;\n          }\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row) => row !== undefined && row !== null);\n          dirtyRows.clear();\n          setSaveStatus('saving');\n          void saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('saved');\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => dirtyRows.add(physicalRow));\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('error');\n              }\n            });\n        });\n      }, 800);\n    },\n  });\n  // Demonstrate that loadData updates do not trigger save requests.\n  hot.loadData(data.map((row) => ({ ...row })));\n  setSaveStatus('idle');\n}","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/javascript/example1.js","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.ts.json
index a4ec0a68f..2a2e1b9de 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype RowData = {\n  id: number;\n  product: string;\n  stock: number;\n  price: number;\n  status: 'active' | 'draft' | 'paused';\n};\n\nconst data: RowData[] = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\n\nconst rootContainer = document.querySelector('#example1');\n\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const statusEl = document.createElement('span');\n  const gridContainer = document.createElement('div');\n\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n  statusEl.className = 'auto-save-backend-status';\n\n  toolbar.appendChild(controls);\n  controls.appendChild(statusEl);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n\n  const dirtyRows = new Set<number>();\n  let saveTimeout: ReturnType<typeof setTimeout> | null = null;\n  let saveRequestCounter = 0;\n\n  const setSaveStatus = (state: 'idle' | 'saving' | 'saved' | 'error') => {\n    const labels = {\n      idle: 'No pending changes',\n      saving: 'Saving...',\n      saved: 'Saved ✓',\n      error: 'Error',\n    };\n\n    statusEl.textContent = labels[state];\n    statusEl.dataset.state = state;\n  };\n\n  const saveRowsToBackend = (rows: RowData[]): Promise<void> => {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  };\n\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    afterChange(changes, source) {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow as number);\n\n          if (physicalRow !== null && physicalRow >= 0) {\n            dirtyRows.add(physicalRow);\n          }\n        }\n      });\n\n      if (saveTimeout) {\n        clearTimeout(saveTimeout);\n      }\n\n      saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(dirtyRows);\n\n        if (physicalRows.length === 0) {\n          return;\n        }\n\n        const requestId = ++saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row): row is number => row !== null);\n\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === saveRequestCounter) {\n              setSaveStatus('error');\n            }\n\n            return;\n          }\n\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row): row is RowData => row !== undefined && row !== null);\n\n          dirtyRows.clear();\n          setSaveStatus('saving');\n\n          void saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('saved');\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => dirtyRows.add(physicalRow));\n\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('error');\n              }\n            });\n        });\n      }, 800);\n    },\n  });\n\n  // Demonstrate that loadData updates do not trigger save requests.\n  hot.loadData(data.map((row) => ({ ...row })));\n  setSaveStatus('idle');\n}","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype RowData = {\n  id: number;\n  product: string;\n  stock: number;\n  price: number;\n  status: 'active' | 'draft' | 'paused';\n};\n\nconst data: RowData[] = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\n\nconst rootContainer = document.querySelector('#example1');\n\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const statusEl = document.createElement('span');\n  const gridContainer = document.createElement('div');\n\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n  statusEl.className = 'auto-save-backend-status';\n\n  toolbar.appendChild(controls);\n  controls.appendChild(statusEl);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n\n  const dirtyRows = new Set<number>();\n  let saveTimeout: ReturnType<typeof setTimeout> | null = null;\n  let saveRequestCounter = 0;\n\n  const setSaveStatus = (state: 'idle' | 'saving' | 'saved' | 'error') => {\n    const labels = {\n      idle: 'No pending changes',\n      saving: 'Saving...',\n      saved: 'Saved ✓',\n      error: 'Error',\n    };\n\n    statusEl.textContent = labels[state];\n    statusEl.dataset.state = state;\n  };\n\n  const saveRowsToBackend = (rows: RowData[]): Promise<void> => {\n    return new Promise((resolve) => setTimeout(resolve, 450)).then(() => {\n      // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n      // eslint-disable-next-line no-console\n      console.log('PATCH /api/products', rows);\n    });\n  };\n\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Product', 'Stock', 'Price', 'Status'],\n    columns: [\n      { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n      { data: 'product', type: 'text', width: 180 },\n      { data: 'stock', type: 'numeric', width: 90 },\n      { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n      { data: 'status', type: 'text', width: 120 },\n    ],\n    stretchH: 'all',\n    height: 'auto',\n    licenseKey: 'non-commercial-and-evaluation',\n    afterChange(changes, source) {\n      if (!changes || source === 'loadData') {\n        return;\n      }\n\n      changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n        if (oldValue !== newValue) {\n          const physicalRow = hot.toPhysicalRow(visualRow as number);\n\n          if (physicalRow !== null && physicalRow >= 0) {\n            dirtyRows.add(physicalRow);\n          }\n        }\n      });\n\n      if (saveTimeout) {\n        clearTimeout(saveTimeout);\n      }\n\n      saveTimeout = setTimeout(() => {\n        const physicalRows = Array.from(dirtyRows);\n\n        if (physicalRows.length === 0) {\n          return;\n        }\n\n        const requestId = ++saveRequestCounter;\n        const visualRows = physicalRows\n          .map((physicalRow) => hot.toVisualRow(physicalRow))\n          .filter((row): row is number => row !== null);\n\n        hot.validateRows(visualRows, (valid) => {\n          if (!valid) {\n            if (requestId === saveRequestCounter) {\n              setSaveStatus('error');\n            }\n\n            return;\n          }\n\n          const rowsToSave = physicalRows\n            .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n            .filter((row): row is RowData => row !== undefined && row !== null);\n\n          dirtyRows.clear();\n          setSaveStatus('saving');\n\n          void saveRowsToBackend(rowsToSave)\n            .then(() => {\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('saved');\n              }\n            })\n            .catch(() => {\n              physicalRows.forEach((physicalRow) => dirtyRows.add(physicalRow));\n\n              if (requestId === saveRequestCounter) {\n                setSaveStatus('error');\n              }\n            });\n        });\n      }, 800);\n    },\n  });\n\n  // Demonstrate that loadData updates do not trigger save requests.\n  hot.loadData(data.map((row) => ({ ...row })));\n  setSaveStatus('idle');\n}","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__react__example1.tsx.json
index dec74955c..c890cf84e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__auto-save-backend__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\n\ntype SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\nconst statusLabels: Record<SaveStatus, string> = {\n  idle: 'No pending changes',\n  saving: 'Saving...',\n  saved: 'Saved ✓',\n  error: 'Error',\n};\n\nconst saveRowsToBackend = (rows: unknown[]): Promise<void> => {\n  return new Promise<void>((resolve) => setTimeout(resolve, 450)).then(() => {\n    // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n    // eslint-disable-next-line no-console\n    console.log('PATCH /api/products', rows);\n  });\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');\n  const dirtyRowsRef = useRef(new Set<number>());\n  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const saveRequestCounterRef = useRef(0);\n\n  const handleAfterChange = (\n    changes: [number, string | number, unknown, unknown][] | null,\n    source: string\n  ): void => {\n    if (!changes || source === 'loadData') {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n      if (oldValue !== newValue) {\n        const physicalRow = hot.toPhysicalRow(visualRow);\n\n        if (physicalRow !== null && physicalRow >= 0) {\n          dirtyRowsRef.current.add(physicalRow);\n        }\n      }\n    });\n\n    if (saveTimeoutRef.current) {\n      clearTimeout(saveTimeoutRef.current);\n    }\n\n    saveTimeoutRef.current = setTimeout(() => {\n      const physicalRows = Array.from(dirtyRowsRef.current);\n\n      if (physicalRows.length === 0) {\n        return;\n      }\n\n      const requestId = ++saveRequestCounterRef.current;\n      const visualRows = physicalRows\n        .map((physicalRow) => hot.toVisualRow(physicalRow))\n        .filter((row): row is number => row !== null);\n\n      hot.validateRows(visualRows, (valid) => {\n        if (!valid) {\n          if (requestId === saveRequestCounterRef.current) {\n            setSaveStatus('error');\n          }\n\n          return;\n        }\n\n        const rowsToSave = physicalRows\n          .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n          .filter((row) => row !== undefined && row !== null);\n\n        dirtyRowsRef.current.clear();\n        setSaveStatus('saving');\n\n        void saveRowsToBackend(rowsToSave)\n          .then(() => {\n            if (requestId === saveRequestCounterRef.current) {\n              setSaveStatus('saved');\n            }\n          })\n          .catch(() => {\n            physicalRows.forEach((physicalRow) => dirtyRowsRef.current.add(physicalRow));\n\n            if (requestId === saveRequestCounterRef.current) {\n              setSaveStatus('error');\n            }\n          });\n      });\n    }, 800);\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <span className=\"auto-save-backend-status\" data-state={saveStatus}>\n            {statusLabels[saveStatus]}\n          </span>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Product', 'Stock', 'Price', 'Status']}\n        columns={[\n          { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n          { data: 'product', type: 'text', width: 180 },\n          { data: 'stock', type: 'numeric', width: 90 },\n          { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n          { data: 'status', type: 'text', width: 120 },\n        ]}\n        stretchH=\"all\"\n        height=\"auto\"\n        afterChange={handleAfterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/react/example1.tsx","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Auto-save changes to a backend · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n  { id: 1, product: 'Keyboard', stock: 14, price: 89, status: 'active' },\n  { id: 2, product: 'Monitor', stock: 5, price: 249, status: 'active' },\n  { id: 3, product: 'Dock', stock: 22, price: 139, status: 'draft' },\n  { id: 4, product: 'Webcam', stock: 9, price: 119, status: 'active' },\n  { id: 5, product: 'Headset', stock: 16, price: 99, status: 'paused' },\n];\n\ntype SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\nconst statusLabels: Record<SaveStatus, string> = {\n  idle: 'No pending changes',\n  saving: 'Saving...',\n  saved: 'Saved ✓',\n  error: 'Error',\n};\n\nconst saveRowsToBackend = (rows: unknown[]): Promise<void> => {\n  return new Promise<void>((resolve) => setTimeout(resolve, 450)).then(() => {\n    // Replace this with fetch('/api/products', { method: 'PATCH', body: ... }) in production.\n    // eslint-disable-next-line no-console\n    console.log('PATCH /api/products', rows);\n  });\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');\n  const dirtyRowsRef = useRef(new Set<number>());\n  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const saveRequestCounterRef = useRef(0);\n\n  const handleAfterChange = (\n    changes: [number, string | number, unknown, unknown][] | null,\n    source: string\n  ): void => {\n    if (!changes || source === 'loadData') {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    changes.forEach(([visualRow, _prop, oldValue, newValue]) => {\n      if (oldValue !== newValue) {\n        const physicalRow = hot.toPhysicalRow(visualRow);\n\n        if (physicalRow !== null && physicalRow >= 0) {\n          dirtyRowsRef.current.add(physicalRow);\n        }\n      }\n    });\n\n    if (saveTimeoutRef.current) {\n      clearTimeout(saveTimeoutRef.current);\n    }\n\n    saveTimeoutRef.current = setTimeout(() => {\n      const physicalRows = Array.from(dirtyRowsRef.current);\n\n      if (physicalRows.length === 0) {\n        return;\n      }\n\n      const requestId = ++saveRequestCounterRef.current;\n      const visualRows = physicalRows\n        .map((physicalRow) => hot.toVisualRow(physicalRow))\n        .filter((row): row is number => row !== null);\n\n      hot.validateRows(visualRows, (valid) => {\n        if (!valid) {\n          if (requestId === saveRequestCounterRef.current) {\n            setSaveStatus('error');\n          }\n\n          return;\n        }\n\n        const rowsToSave = physicalRows\n          .map((physicalRow) => hot.getSourceDataAtRow(physicalRow))\n          .filter((row) => row !== undefined && row !== null);\n\n        dirtyRowsRef.current.clear();\n        setSaveStatus('saving');\n\n        void saveRowsToBackend(rowsToSave)\n          .then(() => {\n            if (requestId === saveRequestCounterRef.current) {\n              setSaveStatus('saved');\n            }\n          })\n          .catch(() => {\n            physicalRows.forEach((physicalRow) => dirtyRowsRef.current.add(physicalRow));\n\n            if (requestId === saveRequestCounterRef.current) {\n              setSaveStatus('error');\n            }\n          });\n      });\n    }, 800);\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <span className=\"auto-save-backend-status\" data-state={saveStatus}>\n            {statusLabels[saveStatus]}\n          </span>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Product', 'Stock', 'Price', 'Status']}\n        columns={[\n          { data: 'id', type: 'numeric', readOnly: true, width: 70 },\n          { data: 'product', type: 'text', width: 180 },\n          { data: 'stock', type: 'numeric', width: 90 },\n          { data: 'price', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n          { data: 'status', type: 'text', width: 120 },\n        ]}\n        stretchH=\"all\"\n        height=\"auto\"\n        afterChange={handleAfterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":".auto-save-backend-status {\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 600;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.auto-save-backend-status[data-state=\"saving\"] {\n  color: var(--sl-color-blue, #2856ea);\n}\n\n.auto-save-backend-status[data-state=\"saved\"] {\n  color: var(--sl-color-green, #16a34a);\n}\n\n.auto-save-backend-status[data-state=\"error\"] {\n  color: var(--sl-color-red, #ef4444);\n}"},"docsPath":"recipes/data-management/auto-save-backend/react/example1.tsx","breadcrumb":["Recipes","Data Management","Auto-save changes to a backend"],"guide":"recipes/data-management/auto-save-backend/auto-save-backend.md","guideTitle":"Auto-save changes to a backend","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/auto-save-backend","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example1.ts.json
index 581bb553d..48a4b4136 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-load-data-graphql></example1-load-data-graphql></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-load-data-graphql',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasError) {\n          <button type=\"button\" (click)=\"loadUsers()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ status }}</output>\n    </div>\n    <hot-table [data]=\"rows\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n  status = 'Loading users...';\n  hasError = false;\n  rows: UserRow[] = [];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70 },\n      { data: 'name', type: 'text', width: 190 },\n      { data: 'username', type: 'text', width: 150 },\n      { data: 'email', type: 'text', width: 220 },\n      { data: 'city', type: 'text', width: 140 },\n      { data: 'company', type: 'text', width: 180 },\n    ],\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  ngOnInit(): void {\n    this.loadUsers();\n  }\n\n  async loadUsers(): Promise<void> {\n    this.status = 'Loading users...';\n    this.hasError = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.rows = this.mapUsersToGridRows(users);\n      this.status = 'Loaded users from GraphQL API.';\n    } catch (_error) {\n      this.rows = [];\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://graphqlzero.almansi.me/api', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ query: USERS_QUERY }),\n    });\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const payload = (await response.json()) as {\n      data?: { users?: { data?: ApiUser[] } };\n      errors?: Array<{ message?: string }>;\n    };\n\n    // GraphQL APIs can return HTTP 200 and still include execution errors.\n    if (payload.errors?.length) {\n      throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n    }\n\n    return payload.data?.users?.data ?? [];\n  }\n\n  private mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n    return users.map((user) => ({\n      id: user.id,\n      name: user.name,\n      username: user.username,\n      email: user.email,\n      city: user.address?.city ?? '',\n      company: user.company?.name ?? '',\n    }));\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-graphql/angular/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-load-data-graphql></example1-load-data-graphql></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-load-data-graphql',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasError) {\n          <button type=\"button\" (click)=\"loadUsers()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ status }}</output>\n    </div>\n    <hot-table [data]=\"rows\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements OnInit {\n  status = 'Loading users...';\n  hasError = false;\n  rows: UserRow[] = [];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70 },\n      { data: 'name', type: 'text', width: 190 },\n      { data: 'username', type: 'text', width: 150 },\n      { data: 'email', type: 'text', width: 220 },\n      { data: 'city', type: 'text', width: 140 },\n      { data: 'company', type: 'text', width: 180 },\n    ],\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  ngOnInit(): void {\n    this.loadUsers();\n  }\n\n  async loadUsers(): Promise<void> {\n    this.status = 'Loading users...';\n    this.hasError = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.rows = this.mapUsersToGridRows(users);\n      this.status = 'Loaded users from GraphQL API.';\n    } catch (_error) {\n      this.rows = [];\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://graphqlzero.almansi.me/api', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ query: USERS_QUERY }),\n    });\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const payload = (await response.json()) as {\n      data?: { users?: { data?: ApiUser[] } };\n      errors?: Array<{ message?: string }>;\n    };\n\n    // GraphQL APIs can return HTTP 200 and still include execution errors.\n    if (payload.errors?.length) {\n      throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n    }\n\n    return payload.data?.users?.data ?? [];\n  }\n\n  private mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n    return users.map((user) => ({\n      id: user.id,\n      name: user.name,\n      username: user.username,\n      email: user.email,\n      city: user.address?.city ?? '',\n      company: user.company?.name ?? '',\n    }));\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-graphql/angular/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example2.ts.json
index 3f41dad0e..22f104330 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example2-load-data-graphql></example2-load-data-graphql></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example2-load-data-graphql',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (showRefresh && !hasError) {\n          <button type=\"button\" (click)=\"refreshUsers()\">Refresh</button>\n        }\n        @if (hasError) {\n          <button type=\"button\" (click)=\"initialLoad()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ status }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  status = 'Loading users...';\n  hasError = false;\n  showRefresh = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70 },\n      { data: 'name', type: 'text', width: 190 },\n      { data: 'username', type: 'text', width: 150 },\n      { data: 'email', type: 'text', width: 220 },\n      { data: 'city', type: 'text', width: 140 },\n      { data: 'company', type: 'text', width: 180 },\n    ],\n    // Enables clickable sort indicators on column headers.\n    columnSorting: true,\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  ngAfterViewInit(): void {\n    this.initialLoad();\n  }\n\n  // Step 5: Initial load uses loadData() directly on the hot instance, which resets all grid states.\n  // This is correct for a first load -- there is no existing state to preserve.\n  async initialLoad(): Promise<void> {\n    this.status = 'Loading users...';\n    this.hasError = false;\n    this.showRefresh = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.loadData(this.mapUsersToGridRows(users));\n      this.status =\n        'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\n      this.showRefresh = true;\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  // Step 6: Subsequent refreshes use updateData(), which replaces the data\n  // without resetting column sort order, selection, or column order.\n  async refreshUsers(): Promise<void> {\n    this.status = 'Refreshing...';\n    this.hasError = false;\n    this.showRefresh = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.updateData(this.mapUsersToGridRows(users));\n      this.status = 'Data refreshed -- column sort order was preserved.';\n      this.showRefresh = true;\n    } catch (_error) {\n      // On error, do not clear the grid -- the existing data is still valid.\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://graphqlzero.almansi.me/api', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ query: USERS_QUERY }),\n    });\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const payload = (await response.json()) as {\n      data?: { users?: { data?: ApiUser[] } };\n      errors?: Array<{ message?: string }>;\n    };\n\n    // GraphQL APIs can return HTTP 200 and still include execution errors.\n    if (payload.errors?.length) {\n      throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n    }\n\n    return payload.data?.users?.data ?? [];\n  }\n\n  private mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n    return users.map((user) => ({\n      id: user.id,\n      name: user.name,\n      username: user.username,\n      email: user.email,\n      city: user.address?.city ?? '',\n      company: user.company?.name ?? '',\n    }));\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-graphql/angular/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example2-load-data-graphql></example2-load-data-graphql></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example2-load-data-graphql',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (showRefresh && !hasError) {\n          <button type=\"button\" (click)=\"refreshUsers()\">Refresh</button>\n        }\n        @if (hasError) {\n          <button type=\"button\" (click)=\"initialLoad()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ status }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  status = 'Loading users...';\n  hasError = false;\n  showRefresh = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70 },\n      { data: 'name', type: 'text', width: 190 },\n      { data: 'username', type: 'text', width: 150 },\n      { data: 'email', type: 'text', width: 220 },\n      { data: 'city', type: 'text', width: 140 },\n      { data: 'company', type: 'text', width: 180 },\n    ],\n    // Enables clickable sort indicators on column headers.\n    columnSorting: true,\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  ngAfterViewInit(): void {\n    this.initialLoad();\n  }\n\n  // Step 5: Initial load uses loadData() directly on the hot instance, which resets all grid states.\n  // This is correct for a first load -- there is no existing state to preserve.\n  async initialLoad(): Promise<void> {\n    this.status = 'Loading users...';\n    this.hasError = false;\n    this.showRefresh = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.loadData(this.mapUsersToGridRows(users));\n      this.status =\n        'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\n      this.showRefresh = true;\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  // Step 6: Subsequent refreshes use updateData(), which replaces the data\n  // without resetting column sort order, selection, or column order.\n  async refreshUsers(): Promise<void> {\n    this.status = 'Refreshing...';\n    this.hasError = false;\n    this.showRefresh = false;\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.updateData(this.mapUsersToGridRows(users));\n      this.status = 'Data refreshed -- column sort order was preserved.';\n      this.showRefresh = true;\n    } catch (_error) {\n      // On error, do not clear the grid -- the existing data is still valid.\n      this.hasError = true;\n      this.status = 'Failed to load users. Try again.';\n    }\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://graphqlzero.almansi.me/api', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ query: USERS_QUERY }),\n    });\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const payload = (await response.json()) as {\n      data?: { users?: { data?: ApiUser[] } };\n      errors?: Array<{ message?: string }>;\n    };\n\n    // GraphQL APIs can return HTTP 200 and still include execution errors.\n    if (payload.errors?.length) {\n      throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n    }\n\n    return payload.data?.users?.data ?? [];\n  }\n\n  private mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n    return users.map((user) => ({\n      id: user.id,\n      name: user.name,\n      username: user.username,\n      email: user.email,\n      city: user.address?.city ?? '',\n      company: user.company?.name ?? '',\n    }));\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-graphql/angular/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.js.json
index 12954e6ff..9ede7b302 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function fetchUsers() {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = await response.json();\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example1.js","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function fetchUsers() {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = await response.json();\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example1.js","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.ts.json
index 25b126cd4..d5595d41d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.js.json
index c99f37a68..a66a4142a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers() {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = await response.json();\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example2.js","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers() {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = await response.json();\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example2.js","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.ts.json
index 8adce4522..891d898f6 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n    // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared GraphQL helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: {\n      users?: {\n        data?: ApiUser[];\n      };\n    };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n    // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared GraphQL helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: {\n      users?: {\n        data?: ApiUser[];\n      };\n    };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-graphql/javascript/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example1.tsx.json
index fdbf031f4..63f42dc6d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const [rows, setRows] = useState<UserRow[]>([]);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n\n  const loadUsers = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n\n    try {\n      const users = await fetchUsers();\n\n      setRows(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n    } catch (_error) {\n      setRows([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { loadUsers(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {hasError && (\n            <button type=\"button\" onClick={loadUsers} disabled={status === STATUS_LOADING}>\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        data={rows}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70 },\n          { data: 'name', type: 'text', width: 190 },\n          { data: 'username', type: 'text', width: 150 },\n          { data: 'email', type: 'text', width: 220 },\n          { data: 'city', type: 'text', width: 140 },\n          { data: 'company', type: 'text', width: 180 },\n        ]}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-graphql/react/example1.tsx","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from GraphQL API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const [rows, setRows] = useState<UserRow[]>([]);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n\n  const loadUsers = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n\n    try {\n      const users = await fetchUsers();\n\n      setRows(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n    } catch (_error) {\n      setRows([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { loadUsers(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {hasError && (\n            <button type=\"button\" onClick={loadUsers} disabled={status === STATUS_LOADING}>\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        data={rows}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70 },\n          { data: 'name', type: 'text', width: 190 },\n          { data: 'username', type: 'text', width: 150 },\n          { data: 'email', type: 'text', width: 220 },\n          { data: 'city', type: 'text', width: 140 },\n          { data: 'company', type: 'text', width: 180 },\n        ]}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-graphql/react/example1.tsx","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-graphql","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example2.tsx.json
index 402face15..a969e403e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-graphql__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<InstanceType<typeof HotTable>>(null);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n  const [showRefresh, setShowRefresh] = useState(false);\n\n  // Step 5: Initial load uses loadData() via the hot instance, which resets all grid states.\n  const initialLoad = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.loadData(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n      setShowRefresh(true);\n    } catch (_error) {\n      hotRef.current?.hotInstance?.loadData([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // Step 6: Subsequent refreshes use updateData(), which replaces the data\n  // without resetting column sort order, selection, or column order.\n  const refreshUsers = async () => {\n    setStatus(STATUS_REFRESHING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.updateData(mapUsersToGridRows(users));\n      setStatus(STATUS_REFRESHED);\n      setShowRefresh(true);\n    } catch (_error) {\n      // On error, do not clear the grid -- the existing data is still valid.\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { initialLoad(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {showRefresh && !hasError && (\n            <button\n              type=\"button\"\n              onClick={refreshUsers}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Refresh\n            </button>\n          )}\n          {hasError && (\n            <button\n              type=\"button\"\n              onClick={initialLoad}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70 },\n          { data: 'name', type: 'text', width: 190 },\n          { data: 'username', type: 'text', width: 150 },\n          { data: 'email', type: 'text', width: 220 },\n          { data: 'city', type: 'text', width: 140 },\n          { data: 'company', type: 'text', width: 180 },\n        ]}\n        columnSorting={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-graphql/react/example2.tsx","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a GraphQL API · Using updateData() to preserve sorting and other states · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst USERS_QUERY = `\n  query {\n    users {\n      data {\n        id\n        name\n        username\n        email\n        address {\n          city\n        }\n        company {\n          name\n        }\n      }\n    }\n  }\n`;\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://graphqlzero.almansi.me/api', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: USERS_QUERY }),\n  });\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  const payload = (await response.json()) as {\n    data?: { users?: { data?: ApiUser[] } };\n    errors?: Array<{ message?: string }>;\n  };\n\n  // GraphQL APIs can return HTTP 200 and still include execution errors.\n  if (payload.errors?.length) {\n    throw new Error(payload.errors[0]?.message ?? 'GraphQL request failed.');\n  }\n\n  return payload.data?.users?.data ?? [];\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<InstanceType<typeof HotTable>>(null);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n  const [showRefresh, setShowRefresh] = useState(false);\n\n  // Step 5: Initial load uses loadData() via the hot instance, which resets all grid states.\n  const initialLoad = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.loadData(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n      setShowRefresh(true);\n    } catch (_error) {\n      hotRef.current?.hotInstance?.loadData([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // Step 6: Subsequent refreshes use updateData(), which replaces the data\n  // without resetting column sort order, selection, or column order.\n  const refreshUsers = async () => {\n    setStatus(STATUS_REFRESHING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.updateData(mapUsersToGridRows(users));\n      setStatus(STATUS_REFRESHED);\n      setShowRefresh(true);\n    } catch (_error) {\n      // On error, do not clear the grid -- the existing data is still valid.\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { initialLoad(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {showRefresh && !hasError && (\n            <button\n              type=\"button\"\n              onClick={refreshUsers}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Refresh\n            </button>\n          )}\n          {hasError && (\n            <button\n              type=\"button\"\n              onClick={initialLoad}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70 },\n          { data: 'name', type: 'text', width: 190 },\n          { data: 'username', type: 'text', width: 150 },\n          { data: 'email', type: 'text', width: 220 },\n          { data: 'city', type: 'text', width: 140 },\n          { data: 'company', type: 'text', width: 180 },\n        ]}\n        columnSorting={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-graphql/react/example2.tsx","breadcrumb":["Recipes","Data Management","Load data from a GraphQL API"],"guide":"recipes/data-management/load-data-graphql/load-data-graphql.md","guideTitle":"Load data from a GraphQL API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-graphql","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example1.ts.json
index 27b61fe1c..0b8ffe588 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-load-data-rest-api></example1-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, AfterViewInit, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nfunction mapUsersToGridRows(users: Array<{\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n}>): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n@Component({\n  selector: 'example1-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"loadUsers()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  statusMessage = STATUS_LOADING;\n  hasError = false;\n  loading = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'name', type: 'text', width: 190, readOnly: true },\n      { data: 'username', type: 'text', width: 150, readOnly: true },\n      { data: 'email', type: 'text', width: 220, readOnly: true },\n      { data: 'city', type: 'text', width: 140, readOnly: true },\n      { data: 'company', type: 'text', width: 180, readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  private setStatus(message: string, hasError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.hasError = hasError;\n      });\n    }, 0);\n  }\n\n  async loadUsers(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_LOADING);\n\n    try {\n      const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n      if (!response.ok) {\n        throw new Error(`Request failed with status: ${response.status}`);\n      }\n\n      const users = (await response.json()) as Array<{\n        id: number;\n        name: string;\n        username: string;\n        email: string;\n        address?: { city?: string };\n        company?: { name?: string };\n      }>;\n\n      this.hotTable.hotInstance?.loadData(mapUsersToGridRows(users));\n      this.setStatus(STATUS_READY);\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    void this.loadUsers();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-load-data-rest-api></example1-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, AfterViewInit, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nfunction mapUsersToGridRows(users: Array<{\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n}>): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n@Component({\n  selector: 'example1-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"loadUsers()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  statusMessage = STATUS_LOADING;\n  hasError = false;\n  loading = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'name', type: 'text', width: 190, readOnly: true },\n      { data: 'username', type: 'text', width: 150, readOnly: true },\n      { data: 'email', type: 'text', width: 220, readOnly: true },\n      { data: 'city', type: 'text', width: 140, readOnly: true },\n      { data: 'company', type: 'text', width: 180, readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  private setStatus(message: string, hasError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.hasError = hasError;\n      });\n    }, 0);\n  }\n\n  async loadUsers(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_LOADING);\n\n    try {\n      const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n      if (!response.ok) {\n        throw new Error(`Request failed with status: ${response.status}`);\n      }\n\n      const users = (await response.json()) as Array<{\n        id: number;\n        name: string;\n        username: string;\n        email: string;\n        address?: { city?: string };\n        company?: { name?: string };\n      }>;\n\n      this.hotTable.hotInstance?.loadData(mapUsersToGridRows(users));\n      this.setStatus(STATUS_READY);\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    void this.loadUsers();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example2.ts.json
index 0ac085def..5a5ebdf27 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example2-load-data-rest-api></example2-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, AfterViewInit, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n@Component({\n  selector: 'example2-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasData && !hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"refreshUsers()\">Refresh</button>\n        } @else if (hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"initialLoad()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  statusMessage = STATUS_LOADING;\n  hasError = false;\n  hasData = false;\n  loading = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'name', type: 'text', width: 190, readOnly: true },\n      { data: 'username', type: 'text', width: 150, readOnly: true },\n      { data: 'email', type: 'text', width: 220, readOnly: true },\n      { data: 'city', type: 'text', width: 140, readOnly: true },\n      { data: 'company', type: 'text', width: 180, readOnly: true },\n    ],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  private setStatus(message: string, hasError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.hasError = hasError;\n      });\n    }, 0);\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    return response.json() as Promise<ApiUser[]>;\n  }\n\n  async initialLoad(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_LOADING);\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.loadData(mapUsersToGridRows(users));\n      this.hasData = true;\n      this.setStatus(STATUS_READY);\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  async refreshUsers(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_REFRESHING);\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.updateData(mapUsersToGridRows(users));\n      this.setStatus(STATUS_REFRESHED);\n    } catch (_error) {\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    void this.initialLoad();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example2-load-data-rest-api></example2-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, AfterViewInit, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n@Component({\n  selector: 'example2-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        @if (hasData && !hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"refreshUsers()\">Refresh</button>\n        } @else if (hasError) {\n          <button type=\"button\" [disabled]=\"loading\" (click)=\"initialLoad()\">Retry</button>\n        }\n      </div>\n      <output [class.is-error]=\"hasError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly ngZone = inject(NgZone);\n\n  statusMessage = STATUS_LOADING;\n  hasError = false;\n  hasData = false;\n  loading = false;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'name', type: 'text', width: 190, readOnly: true },\n      { data: 'username', type: 'text', width: 150, readOnly: true },\n      { data: 'email', type: 'text', width: 220, readOnly: true },\n      { data: 'city', type: 'text', width: 140, readOnly: true },\n      { data: 'company', type: 'text', width: 180, readOnly: true },\n    ],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 360,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n  };\n\n  private setStatus(message: string, hasError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.hasError = hasError;\n      });\n    }, 0);\n  }\n\n  private async fetchUsers(): Promise<ApiUser[]> {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    return response.json() as Promise<ApiUser[]>;\n  }\n\n  async initialLoad(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_LOADING);\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.loadData(mapUsersToGridRows(users));\n      this.hasData = true;\n      this.setStatus(STATUS_READY);\n    } catch (_error) {\n      this.hotTable.hotInstance?.loadData([]);\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  async refreshUsers(): Promise<void> {\n    this.loading = true;\n    this.setStatus(STATUS_REFRESHING);\n\n    try {\n      const users = await this.fetchUsers();\n\n      this.hotTable.hotInstance?.updateData(mapUsersToGridRows(users));\n      this.setStatus(STATUS_REFRESHED);\n    } catch (_error) {\n      this.setStatus(STATUS_ERROR, true);\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    void this.initialLoad();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example3.ts.json
index 0b2460a93..502cd1420 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example3-load-data-rest-api></example3-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, inject } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\n@Component({\n  selector: 'example3-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <output [class.is-error]=\"statusIsError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  private readonly ngZone = inject(NgZone);\n\n  statusIsError = false;\n  statusMessage = 'Loading...';\n\n  private cachedRows: UserRow[] | null = null;\n\n  readonly hotSettings: GridSettings;\n\n  /** Defers binding updates so sync data-provider hooks do not trigger NG0100 in dev mode. */\n  private setFetchStatus(message: string, isError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.statusIsError = isError;\n      });\n    }, 0);\n  }\n\n  constructor() {\n    this.hotSettings = {\n      dataProvider: {\n        rowId: 'id',\n        fetchRows: async (\n          { page, pageSize, sort }: DataProviderQueryParameters,\n          { signal }: DataProviderFetchOptions\n        ) => {\n          let rows = await this.loadAllRows(signal);\n\n          if (sort) {\n            rows = [...rows].sort((a, b) => {\n              const av = a[sort.prop as keyof UserRow];\n              const bv = b[sort.prop as keyof UserRow];\n              const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n              return sort.order === 'asc' ? cmp : -cmp;\n            });\n          }\n\n          const start = (page - 1) * pageSize;\n\n          return {\n            rows: rows.slice(start, start + pageSize),\n            totalRows: rows.length,\n          };\n        },\n        onRowsCreate: async () => {},\n        onRowsUpdate: async () => {},\n        onRowsRemove: async () => {},\n      },\n      colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n      columns: [\n        { data: 'id', type: 'numeric', width: 70, readOnly: true },\n        { data: 'name', type: 'text', width: 190, readOnly: true },\n        { data: 'username', type: 'text', width: 150, readOnly: true },\n        { data: 'email', type: 'text', width: 220, readOnly: true },\n        { data: 'city', type: 'text', width: 140, readOnly: true },\n        { data: 'company', type: 'text', width: 180, readOnly: true },\n      ],\n      pagination: { pageSize: 5 },\n      columnSorting: true,\n      emptyDataState: true,\n      rowHeaders: true,\n      height: 360,\n      width: '100%',\n      stretchH: 'all',\n      autoWrapRow: true,\n      beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n        if (!params.skipLoading) {\n          this.setFetchStatus('Loading...', false);\n        }\n      },\n      afterDataProviderFetch: () => {\n        this.setFetchStatus('Loaded from REST API via dataProvider.', false);\n      },\n      afterDataProviderFetchError: (error: Error) => {\n        this.setFetchStatus(`Error: ${error.message}`, true);\n      },\n    };\n  }\n\n  private async loadAllRows(signal: AbortSignal): Promise<UserRow[]> {\n    if (this.cachedRows !== null) {\n      return this.cachedRows;\n    }\n\n    const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}`);\n    }\n\n    const users = (await response.json()) as Array<{\n      id: number;\n      name: string;\n      username: string;\n      email: string;\n      address?: { city?: string };\n      company?: { name?: string };\n    }>;\n\n    this.cachedRows = users.map((u) => ({\n      id: u.id,\n      name: u.name,\n      username: u.username,\n      email: u.email,\n      city: u.address?.city ?? '',\n      company: u.company?.name ?? '',\n    }));\n\n    return this.cachedRows;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example3.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example3-load-data-rest-api></example3-load-data-rest-api></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, inject } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\n@Component({\n  selector: 'example3-load-data-rest-api',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `\n    <div class=\"example-controls-container\">\n      <output [class.is-error]=\"statusIsError\">{{ statusMessage }}</output>\n    </div>\n    <hot-table [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  private readonly ngZone = inject(NgZone);\n\n  statusIsError = false;\n  statusMessage = 'Loading...';\n\n  private cachedRows: UserRow[] | null = null;\n\n  readonly hotSettings: GridSettings;\n\n  /** Defers binding updates so sync data-provider hooks do not trigger NG0100 in dev mode. */\n  private setFetchStatus(message: string, isError = false): void {\n    setTimeout(() => {\n      this.ngZone.run(() => {\n        this.statusMessage = message;\n        this.statusIsError = isError;\n      });\n    }, 0);\n  }\n\n  constructor() {\n    this.hotSettings = {\n      dataProvider: {\n        rowId: 'id',\n        fetchRows: async (\n          { page, pageSize, sort }: DataProviderQueryParameters,\n          { signal }: DataProviderFetchOptions\n        ) => {\n          let rows = await this.loadAllRows(signal);\n\n          if (sort) {\n            rows = [...rows].sort((a, b) => {\n              const av = a[sort.prop as keyof UserRow];\n              const bv = b[sort.prop as keyof UserRow];\n              const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n              return sort.order === 'asc' ? cmp : -cmp;\n            });\n          }\n\n          const start = (page - 1) * pageSize;\n\n          return {\n            rows: rows.slice(start, start + pageSize),\n            totalRows: rows.length,\n          };\n        },\n        onRowsCreate: async () => {},\n        onRowsUpdate: async () => {},\n        onRowsRemove: async () => {},\n      },\n      colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n      columns: [\n        { data: 'id', type: 'numeric', width: 70, readOnly: true },\n        { data: 'name', type: 'text', width: 190, readOnly: true },\n        { data: 'username', type: 'text', width: 150, readOnly: true },\n        { data: 'email', type: 'text', width: 220, readOnly: true },\n        { data: 'city', type: 'text', width: 140, readOnly: true },\n        { data: 'company', type: 'text', width: 180, readOnly: true },\n      ],\n      pagination: { pageSize: 5 },\n      columnSorting: true,\n      emptyDataState: true,\n      rowHeaders: true,\n      height: 360,\n      width: '100%',\n      stretchH: 'all',\n      autoWrapRow: true,\n      beforeDataProviderFetch: (params: DataProviderBeforeFetchParameters) => {\n        if (!params.skipLoading) {\n          this.setFetchStatus('Loading...', false);\n        }\n      },\n      afterDataProviderFetch: () => {\n        this.setFetchStatus('Loaded from REST API via dataProvider.', false);\n      },\n      afterDataProviderFetchError: (error: Error) => {\n        this.setFetchStatus(`Error: ${error.message}`, true);\n      },\n    };\n  }\n\n  private async loadAllRows(signal: AbortSignal): Promise<UserRow[]> {\n    if (this.cachedRows !== null) {\n      return this.cachedRows;\n    }\n\n    const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}`);\n    }\n\n    const users = (await response.json()) as Array<{\n      id: number;\n      name: string;\n      username: string;\n      email: string;\n      address?: { city?: string };\n      company?: { name?: string };\n    }>;\n\n    this.cachedRows = users.map((u) => ({\n      id: u.id,\n      name: u.name,\n      username: u.username,\n      email: u.email,\n      city: u.address?.city ?? '',\n      company: u.company?.name ?? '',\n    }));\n\n    return this.cachedRows;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/load-data-rest-api/angular/example3.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.js.json
index 2a48b45d7..cffebd6fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const users = await response.json();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example1.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example1');\n\nif (!container) {\n  throw new Error('Missing #example1 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const users = await response.json();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example1.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.ts.json
index 4a52d6349..201640375 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst rootContainer = document.querySelector('#example1') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(controlsContainer);\nrootContainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const users = (await response.json()) as ApiUser[];\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst rootContainer = document.querySelector('#example1') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example1-status';\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(controlsContainer);\nrootContainer.appendChild(gridContainer);\n\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  retryButton.hidden = !hasError;\n  retryButton.disabled = loading;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nasync function loadUsers() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n    if (!response.ok) {\n      throw new Error(`Request failed with status: ${response.status}`);\n    }\n\n    const users = (await response.json()) as ApiUser[];\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nretryButton.addEventListener('click', () => {\n  loadUsers();\n});\n\nloadUsers();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.js.json
index 11ce96ca8..47ca9afc6 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers() {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json();\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example2.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst container = document.querySelector('#example2');\n\nif (!container) {\n  throw new Error('Missing #example2 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(controlsContainer);\ncontainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({ loading = false, hasError = false, message = '' } = {}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers() {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json();\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example2.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.ts.json
index 6f2e0202c..556f2c402 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst rootContainer = document.querySelector('#example2') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(controlsContainer);\nrootContainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nconst rootContainer = document.querySelector('#example2') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst controls = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst refreshButton = document.createElement('button');\nconst retryButton = document.createElement('button');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\ncontrols.className = 'controls';\nstatusOutput.id = 'example2-status';\n\nrefreshButton.type = 'button';\nrefreshButton.textContent = 'Refresh';\nrefreshButton.hidden = true;\n\nretryButton.type = 'button';\nretryButton.textContent = 'Retry';\nretryButton.hidden = true;\n\ncontrols.appendChild(refreshButton);\ncontrols.appendChild(retryButton);\ncontrolsContainer.appendChild(controls);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(controlsContainer);\nrootContainer.appendChild(gridContainer);\n\n// Step 1: Initialize the grid with columnSorting enabled and an empty dataset.\nconst hot = new Handsontable(gridContainer, {\n  data: [],\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70 },\n    { data: 'name', type: 'text', width: 190 },\n    { data: 'username', type: 'text', width: 150 },\n    { data: 'email', type: 'text', width: 220 },\n    { data: 'city', type: 'text', width: 140 },\n    { data: 'company', type: 'text', width: 180 },\n  ],\n  // Enables clickable sort indicators on column headers.\n  columnSorting: true,\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Step 2: A helper that keeps the toolbar consistent with the current request state.\nfunction setUiState({\n  loading = false,\n  hasError = false,\n  message = '',\n}: {\n  loading?: boolean;\n  hasError?: boolean;\n  message?: string;\n}) {\n  statusOutput.textContent = message;\n  statusOutput.classList.toggle('is-error', hasError);\n  // Show \"Retry\" only when there is an error.\n  retryButton.hidden = !hasError;\n  // Show \"Refresh\" only when the grid has data and no error is active.\n  refreshButton.hidden = hasError || loading;\n  refreshButton.disabled = loading;\n  retryButton.disabled = loading;\n}\n\n// Step 3: Map the API response to flat row objects that match the column definitions.\nfunction mapUsersToGridRows(users: ApiUser[]) {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\n// Step 4: Shared fetch helper used by both initialLoad() and refreshUsers().\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\n// Step 5: Initial load uses loadData(), which resets all grid states.\n// This is correct for a first load -- there is no existing state to preserve.\nasync function initialLoad() {\n  setUiState({ loading: true, message: STATUS_LOADING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.loadData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_READY });\n  } catch (_error) {\n    hot.loadData([]);\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\n// Step 6: Subsequent refreshes use updateData(), which replaces the data\n// without resetting column sort order, selection, or column order.\nasync function refreshUsers() {\n  setUiState({ loading: true, message: STATUS_REFRESHING });\n\n  try {\n    const users = await fetchUsers();\n\n    hot.updateData(mapUsersToGridRows(users));\n    setUiState({ message: STATUS_REFRESHED });\n  } catch (_error) {\n    // On error, do not clear the grid -- the existing data is still valid.\n    setUiState({ hasError: true, message: STATUS_ERROR });\n  }\n}\n\nrefreshButton.addEventListener('click', () => {\n  refreshUsers();\n});\n\nretryButton.addEventListener('click', () => {\n  initialLoad();\n});\n\ninitialLoad();","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example2.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.js.json
index c0dac679d..a67a1fa1a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Step 1: Cache the full response after the first request.\n// Every subsequent fetchRows call (page change, column sort) reuses this\n// without hitting the network again.\nlet cachedRows = null;\n\nasync function loadAllRows(signal) {\n  if (cachedRows !== null) {\n    return cachedRows;\n  }\n\n  const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status}`);\n  }\n\n  const users = await response.json();\n\n  cachedRows = users.map((u) => ({\n    id: u.id,\n    name: u.name,\n    username: u.username,\n    email: u.email,\n    city: u.address?.city ?? '',\n    company: u.company?.name ?? '',\n  }));\n\n  return cachedRows;\n}\n\nconst container = document.querySelector('#example3');\n\nif (!container) {\n  throw new Error('Missing #example3 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\nstatusOutput.id = 'example3-status';\nstatusOutput.textContent = 'Loading...';\n\ncontainer.appendChild(controlsContainer);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(gridContainer);\n\nnew Handsontable(gridContainer, {\n  // Step 2: Use dataProvider instead of a static data array.\n  // Handsontable calls fetchRows automatically on init, page change, and sort change.\n  dataProvider: {\n    // rowId tells the plugin which field holds the stable row identity.\n    // It is required for CRUD callbacks and internal refetch tracking.\n    rowId: 'id',\n\n    // Step 3: fetchRows receives current query parameters and an AbortSignal.\n    // Return { rows, totalRows } so the Pagination plugin knows the total row count.\n    async fetchRows({ page, pageSize, sort }, { signal }) {\n      let rows = await loadAllRows(signal);\n\n      // Step 4: Apply server-side sort from query parameters.\n      // In production, pass sort.prop and sort.order to your API instead.\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      // Step 5: Apply server-side pagination from query parameters.\n      // In production, pass page and pageSize to your API instead.\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n\n    // Step 6: CRUD callbacks. jsonplaceholder is read-only, so these are no-ops.\n    // Replace with POST / PATCH / DELETE calls to a real API.\n    onRowsCreate: async () => {},\n    onRowsUpdate: async () => {},\n    onRowsRemove: async () => {},\n  },\n\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'name', type: 'text', width: 190, readOnly: true },\n    { data: 'username', type: 'text', width: 150, readOnly: true },\n    { data: 'email', type: 'text', width: 220, readOnly: true },\n    { data: 'city', type: 'text', width: 140, readOnly: true },\n    { data: 'company', type: 'text', width: 180, readOnly: true },\n  ],\n\n  // Step 7: Enable the Pagination plugin and pass pageSize so the plugin knows\n  // how many rows to request. columnSorting enables server-driven sort.\n  // emptyDataState shows a loading overlay while fetchRows is in flight.\n  pagination: { pageSize: 5 },\n  columnSorting: true,\n  emptyDataState: true,\n\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Step 8: Use fetch hooks to update the status label.\n  // skipLoading is true for internal refetches (after sort) -- skip the \"Loading...\" message\n  // in those cases so the grid does not flash a spinner on every column header click.\n  beforeDataProviderFetch: ({ skipLoading }) => {\n    if (!skipLoading) {\n      statusOutput.textContent = 'Loading...';\n      statusOutput.classList.remove('is-error');\n    }\n  },\n  afterDataProviderFetch: () => {\n    statusOutput.textContent = 'Loaded from REST API via dataProvider.';\n    statusOutput.classList.remove('is-error');\n  },\n  afterDataProviderFetchError: (error) => {\n    statusOutput.textContent = `Error: ${error.message}`;\n    statusOutput.classList.add('is-error');\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example3.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Step 1: Cache the full response after the first request.\n// Every subsequent fetchRows call (page change, column sort) reuses this\n// without hitting the network again.\nlet cachedRows = null;\n\nasync function loadAllRows(signal) {\n  if (cachedRows !== null) {\n    return cachedRows;\n  }\n\n  const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status}`);\n  }\n\n  const users = await response.json();\n\n  cachedRows = users.map((u) => ({\n    id: u.id,\n    name: u.name,\n    username: u.username,\n    email: u.email,\n    city: u.address?.city ?? '',\n    company: u.company?.name ?? '',\n  }));\n\n  return cachedRows;\n}\n\nconst container = document.querySelector('#example3');\n\nif (!container) {\n  throw new Error('Missing #example3 element.');\n}\n\nconst controlsContainer = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\nstatusOutput.id = 'example3-status';\nstatusOutput.textContent = 'Loading...';\n\ncontainer.appendChild(controlsContainer);\ncontrolsContainer.appendChild(statusOutput);\ncontainer.appendChild(gridContainer);\n\nnew Handsontable(gridContainer, {\n  // Step 2: Use dataProvider instead of a static data array.\n  // Handsontable calls fetchRows automatically on init, page change, and sort change.\n  dataProvider: {\n    // rowId tells the plugin which field holds the stable row identity.\n    // It is required for CRUD callbacks and internal refetch tracking.\n    rowId: 'id',\n\n    // Step 3: fetchRows receives current query parameters and an AbortSignal.\n    // Return { rows, totalRows } so the Pagination plugin knows the total row count.\n    async fetchRows({ page, pageSize, sort }, { signal }) {\n      let rows = await loadAllRows(signal);\n\n      // Step 4: Apply server-side sort from query parameters.\n      // In production, pass sort.prop and sort.order to your API instead.\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop];\n          const bv = b[sort.prop];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      // Step 5: Apply server-side pagination from query parameters.\n      // In production, pass page and pageSize to your API instead.\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n\n    // Step 6: CRUD callbacks. jsonplaceholder is read-only, so these are no-ops.\n    // Replace with POST / PATCH / DELETE calls to a real API.\n    onRowsCreate: async () => {},\n    onRowsUpdate: async () => {},\n    onRowsRemove: async () => {},\n  },\n\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'name', type: 'text', width: 190, readOnly: true },\n    { data: 'username', type: 'text', width: 150, readOnly: true },\n    { data: 'email', type: 'text', width: 220, readOnly: true },\n    { data: 'city', type: 'text', width: 140, readOnly: true },\n    { data: 'company', type: 'text', width: 180, readOnly: true },\n  ],\n\n  // Step 7: Enable the Pagination plugin and pass pageSize so the plugin knows\n  // how many rows to request. columnSorting enables server-driven sort.\n  // emptyDataState shows a loading overlay while fetchRows is in flight.\n  pagination: { pageSize: 5 },\n  columnSorting: true,\n  emptyDataState: true,\n\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Step 8: Use fetch hooks to update the status label.\n  // skipLoading is true for internal refetches (after sort) -- skip the \"Loading...\" message\n  // in those cases so the grid does not flash a spinner on every column header click.\n  beforeDataProviderFetch: ({ skipLoading }) => {\n    if (!skipLoading) {\n      statusOutput.textContent = 'Loading...';\n      statusOutput.classList.remove('is-error');\n    }\n  },\n  afterDataProviderFetch: () => {\n    statusOutput.textContent = 'Loaded from REST API via dataProvider.';\n    statusOutput.classList.remove('is-error');\n  },\n  afterDataProviderFetchError: (error) => {\n    statusOutput.textContent = `Error: ${error.message}`;\n    statusOutput.classList.add('is-error');\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example3.js","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.ts.json
index e0001d22a..27c289d92 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\n// Step 1: Cache the full response after the first request.\n// Every subsequent fetchRows call (page change, column sort) reuses this\n// without hitting the network again.\nlet cachedRows: UserRow[] | null = null;\n\nasync function loadAllRows(signal: AbortSignal): Promise<UserRow[]> {\n  if (cachedRows !== null) {\n    return cachedRows;\n  }\n\n  const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status}`);\n  }\n\n  const users = (await response.json()) as Array<{\n    id: number;\n    name: string;\n    username: string;\n    email: string;\n    address?: { city?: string };\n    company?: { name?: string };\n  }>;\n\n  cachedRows = users.map((u) => ({\n    id: u.id,\n    name: u.name,\n    username: u.username,\n    email: u.email,\n    city: u.address?.city ?? '',\n    company: u.company?.name ?? '',\n  }));\n\n  return cachedRows;\n}\n\nconst rootContainer = document.querySelector('#example3') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\nstatusOutput.id = 'example3-status';\nstatusOutput.textContent = 'Loading...';\n\nrootContainer.appendChild(controlsContainer);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(gridContainer);\n\nnew Handsontable(gridContainer, {\n  // Step 2: Use dataProvider instead of a static data array.\n  // Handsontable calls fetchRows automatically on init, page change, and sort change.\n  dataProvider: {\n    // rowId tells the plugin which field holds the stable row identity.\n    // It is required for CRUD callbacks and internal refetch tracking.\n    rowId: 'id',\n\n    // Step 3: fetchRows receives current query parameters and an AbortSignal.\n    // Return { rows, totalRows } so the Pagination plugin knows the total row count.\n    async fetchRows(\n      { page, pageSize, sort }: DataProviderQueryParameters,\n      { signal }: DataProviderFetchOptions\n    ) {\n      let rows = await loadAllRows(signal);\n\n      // Step 4: Apply server-side sort from query parameters.\n      // In production, pass sort.prop and sort.order to your API instead.\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop as keyof UserRow];\n          const bv = b[sort.prop as keyof UserRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      // Step 5: Apply server-side pagination from query parameters.\n      // In production, pass page and pageSize to your API instead.\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n\n    // Step 6: CRUD callbacks. jsonplaceholder is read-only, so these are no-ops.\n    // Replace with POST / PATCH / DELETE calls to a real API.\n    onRowsCreate: async () => {},\n    onRowsUpdate: async () => {},\n    onRowsRemove: async () => {},\n  },\n\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'name', type: 'text', width: 190, readOnly: true },\n    { data: 'username', type: 'text', width: 150, readOnly: true },\n    { data: 'email', type: 'text', width: 220, readOnly: true },\n    { data: 'city', type: 'text', width: 140, readOnly: true },\n    { data: 'company', type: 'text', width: 180, readOnly: true },\n  ],\n\n  // Step 7: Enable the Pagination plugin and pass pageSize so the plugin knows\n  // how many rows to request. columnSorting enables server-driven sort.\n  // emptyDataState shows a loading overlay while fetchRows is in flight.\n  pagination: { pageSize: 5 },\n  columnSorting: true,\n  emptyDataState: true,\n\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Step 8: Use fetch hooks to update the status label.\n  // skipLoading is true for internal refetches (after sort) -- skip the \"Loading...\" message\n  // in those cases so the grid does not flash a spinner on every column header click.\n  beforeDataProviderFetch: ({ skipLoading }: DataProviderBeforeFetchParameters) => {\n    if (!skipLoading) {\n      statusOutput.textContent = 'Loading...';\n      statusOutput.classList.remove('is-error');\n    }\n  },\n  afterDataProviderFetch: () => {\n    statusOutput.textContent = 'Loaded from REST API via dataProvider.';\n    statusOutput.classList.remove('is-error');\n  },\n  afterDataProviderFetchError: (error: Error) => {\n    statusOutput.textContent = `Error: ${error.message}`;\n    statusOutput.classList.add('is-error');\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example3.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type {\n  DataProviderQueryParameters,\n  DataProviderFetchOptions,\n  DataProviderBeforeFetchParameters,\n} from 'handsontable/plugins/dataProvider';\n\nregisterAllModules();\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\n// Step 1: Cache the full response after the first request.\n// Every subsequent fetchRows call (page change, column sort) reuses this\n// without hitting the network again.\nlet cachedRows: UserRow[] | null = null;\n\nasync function loadAllRows(signal: AbortSignal): Promise<UserRow[]> {\n  if (cachedRows !== null) {\n    return cachedRows;\n  }\n\n  const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status}`);\n  }\n\n  const users = (await response.json()) as Array<{\n    id: number;\n    name: string;\n    username: string;\n    email: string;\n    address?: { city?: string };\n    company?: { name?: string };\n  }>;\n\n  cachedRows = users.map((u) => ({\n    id: u.id,\n    name: u.name,\n    username: u.username,\n    email: u.email,\n    city: u.address?.city ?? '',\n    company: u.company?.name ?? '',\n  }));\n\n  return cachedRows;\n}\n\nconst rootContainer = document.querySelector('#example3') as HTMLDivElement;\n\nconst controlsContainer = document.createElement('div');\nconst statusOutput = document.createElement('output');\nconst gridContainer = document.createElement('div');\n\ncontrolsContainer.className = 'example-controls-container';\nstatusOutput.id = 'example3-status';\nstatusOutput.textContent = 'Loading...';\n\nrootContainer.appendChild(controlsContainer);\ncontrolsContainer.appendChild(statusOutput);\nrootContainer.appendChild(gridContainer);\n\nnew Handsontable(gridContainer, {\n  // Step 2: Use dataProvider instead of a static data array.\n  // Handsontable calls fetchRows automatically on init, page change, and sort change.\n  dataProvider: {\n    // rowId tells the plugin which field holds the stable row identity.\n    // It is required for CRUD callbacks and internal refetch tracking.\n    rowId: 'id',\n\n    // Step 3: fetchRows receives current query parameters and an AbortSignal.\n    // Return { rows, totalRows } so the Pagination plugin knows the total row count.\n    async fetchRows(\n      { page, pageSize, sort }: DataProviderQueryParameters,\n      { signal }: DataProviderFetchOptions\n    ) {\n      let rows = await loadAllRows(signal);\n\n      // Step 4: Apply server-side sort from query parameters.\n      // In production, pass sort.prop and sort.order to your API instead.\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop as keyof UserRow];\n          const bv = b[sort.prop as keyof UserRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      // Step 5: Apply server-side pagination from query parameters.\n      // In production, pass page and pageSize to your API instead.\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n\n    // Step 6: CRUD callbacks. jsonplaceholder is read-only, so these are no-ops.\n    // Replace with POST / PATCH / DELETE calls to a real API.\n    onRowsCreate: async () => {},\n    onRowsUpdate: async () => {},\n    onRowsRemove: async () => {},\n  },\n\n  colHeaders: ['ID', 'Name', 'Username', 'Email', 'City', 'Company'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'name', type: 'text', width: 190, readOnly: true },\n    { data: 'username', type: 'text', width: 150, readOnly: true },\n    { data: 'email', type: 'text', width: 220, readOnly: true },\n    { data: 'city', type: 'text', width: 140, readOnly: true },\n    { data: 'company', type: 'text', width: 180, readOnly: true },\n  ],\n\n  // Step 7: Enable the Pagination plugin and pass pageSize so the plugin knows\n  // how many rows to request. columnSorting enables server-driven sort.\n  // emptyDataState shows a loading overlay while fetchRows is in flight.\n  pagination: { pageSize: 5 },\n  columnSorting: true,\n  emptyDataState: true,\n\n  rowHeaders: true,\n  height: 360,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Step 8: Use fetch hooks to update the status label.\n  // skipLoading is true for internal refetches (after sort) -- skip the \"Loading...\" message\n  // in those cases so the grid does not flash a spinner on every column header click.\n  beforeDataProviderFetch: ({ skipLoading }: DataProviderBeforeFetchParameters) => {\n    if (!skipLoading) {\n      statusOutput.textContent = 'Loading...';\n      statusOutput.classList.remove('is-error');\n    }\n  },\n  afterDataProviderFetch: () => {\n    statusOutput.textContent = 'Loaded from REST API via dataProvider.';\n    statusOutput.classList.remove('is-error');\n  },\n  afterDataProviderFetchError: (error: Error) => {\n    statusOutput.textContent = `Error: ${error.message}`;\n    statusOutput.classList.add('is-error');\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/load-data-rest-api/javascript/example3.ts","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example1.tsx.json
index 953e4d76b..8c3d6422e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const [rows, setRows] = useState<UserRow[]>([]);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n\n  const loadUsers = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n\n    try {\n      const users = await fetchUsers();\n\n      setRows(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n    } catch (_error) {\n      setRows([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { loadUsers(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {hasError && (\n            <button type=\"button\" onClick={loadUsers} disabled={status === STATUS_LOADING}>\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        data={rows}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example1.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY = 'Loaded users from REST API.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const [rows, setRows] = useState<UserRow[]>([]);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n\n  const loadUsers = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n\n    try {\n      const users = await fetchUsers();\n\n      setRows(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n    } catch (_error) {\n      setRows([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { loadUsers(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {hasError && (\n            <button type=\"button\" onClick={loadUsers} disabled={status === STATUS_LOADING}>\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        data={rows}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example1.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example2.tsx.json
index c4cfb0578..89ca8d14e 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<InstanceType<typeof HotTable>>(null);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n  const [showRefresh, setShowRefresh] = useState(false);\n\n  const initialLoad = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.loadData(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n      setShowRefresh(true);\n    } catch (_error) {\n      hotRef.current?.hotInstance?.loadData([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  const refreshUsers = async () => {\n    setStatus(STATUS_REFRESHING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.updateData(mapUsersToGridRows(users));\n      setStatus(STATUS_REFRESHED);\n      setShowRefresh(true);\n    } catch (_error) {\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { initialLoad(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {showRefresh && !hasError && (\n            <button\n              type=\"button\"\n              onClick={refreshUsers}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Refresh\n            </button>\n          )}\n          {hasError && (\n            <button\n              type=\"button\"\n              onClick={initialLoad}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        columnSorting={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example2.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using updateData() to preserve sorting and other states · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useEffect, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\nconst STATUS_LOADING = 'Loading users...';\nconst STATUS_READY =\n  'Users loaded. Sort a column, then click \"Refresh\" to see that the column sort order is preserved.';\nconst STATUS_REFRESHING = 'Refreshing...';\nconst STATUS_REFRESHED = 'Data refreshed -- column sort order was preserved.';\nconst STATUS_ERROR = 'Failed to load users. Try again.';\n\nasync function fetchUsers(): Promise<ApiUser[]> {\n  const response = await fetch('https://jsonplaceholder.typicode.com/users');\n\n  if (!response.ok) {\n    throw new Error(`Request failed with status: ${response.status}`);\n  }\n\n  return response.json() as Promise<ApiUser[]>;\n}\n\nfunction mapUsersToGridRows(users: ApiUser[]): UserRow[] {\n  return users.map((user) => ({\n    id: user.id,\n    name: user.name,\n    username: user.username,\n    email: user.email,\n    city: user.address?.city ?? '',\n    company: user.company?.name ?? '',\n  }));\n}\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<InstanceType<typeof HotTable>>(null);\n  const [status, setStatus] = useState(STATUS_LOADING);\n  const [hasError, setHasError] = useState(false);\n  const [showRefresh, setShowRefresh] = useState(false);\n\n  const initialLoad = async () => {\n    setStatus(STATUS_LOADING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.loadData(mapUsersToGridRows(users));\n      setStatus(STATUS_READY);\n      setShowRefresh(true);\n    } catch (_error) {\n      hotRef.current?.hotInstance?.loadData([]);\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  const refreshUsers = async () => {\n    setStatus(STATUS_REFRESHING);\n    setHasError(false);\n    setShowRefresh(false);\n\n    try {\n      const users = await fetchUsers();\n\n      hotRef.current?.hotInstance?.updateData(mapUsersToGridRows(users));\n      setStatus(STATUS_REFRESHED);\n      setShowRefresh(true);\n    } catch (_error) {\n      setHasError(true);\n      setStatus(STATUS_ERROR);\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => { initialLoad(); }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          {showRefresh && !hasError && (\n            <button\n              type=\"button\"\n              onClick={refreshUsers}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Refresh\n            </button>\n          )}\n          {hasError && (\n            <button\n              type=\"button\"\n              onClick={initialLoad}\n              disabled={status === STATUS_LOADING || status === STATUS_REFRESHING}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n        <output className={hasError ? 'is-error' : undefined}>{status}</output>\n      </div>\n      <HotTable\n        ref={hotRef}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        columnSorting={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example2.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example2","exampleTitle":"Using updateData() to preserve sorting and other states","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example3.tsx.json
index d9915d524..e2e8ce426 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example3.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__load-data-rest-api__react__example3.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useMemo, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst pagination = { pageSize: 5 };\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\ntype SortDescriptor = { prop: string; order: 'asc' | 'desc' } | null;\n\nconst ExampleComponent = () => {\n  const cachedRowsRef = useRef<UserRow[] | null>(null);\n  const statusRef = useRef<HTMLParagraphElement | null>(null);\n\n  const loadAllRows = useCallback(async (signal: AbortSignal): Promise<UserRow[]> => {\n    if (cachedRowsRef.current !== null) {\n      return cachedRowsRef.current;\n    }\n\n    const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}`);\n    }\n\n    const users = (await response.json()) as ApiUser[];\n\n    cachedRowsRef.current = users.map((u) => ({\n      id: u.id,\n      name: u.name,\n      username: u.username,\n      email: u.email,\n      city: u.address?.city ?? '',\n      company: u.company?.name ?? '',\n    }));\n\n    return cachedRowsRef.current;\n  }, []);\n\n  const fetchRows = useCallback(\n    async (\n      { page, pageSize, sort }: { page: number; pageSize: number; sort: SortDescriptor },\n      { signal }: { signal: AbortSignal }\n    ) => {\n      let rows = await loadAllRows(signal);\n\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop as keyof UserRow];\n          const bv = b[sort.prop as keyof UserRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n    [loadAllRows]\n  );\n\n  const dataProvider = useMemo(\n    () => ({\n      rowId: 'id',\n      fetchRows,\n      onRowsCreate: async () => {},\n      onRowsUpdate: async () => {},\n      onRowsRemove: async () => {},\n    }),\n    [fetchRows]\n  );\n\n  const beforeDataProviderFetch = useCallback((params: { skipLoading?: boolean }) => {\n    if (params.skipLoading || !statusRef.current) return;\n    statusRef.current.textContent = 'Loading...';\n    statusRef.current.classList.remove('is-error');\n  }, []);\n\n  const afterDataProviderFetch = useCallback(() => {\n    if (!statusRef.current) return;\n    statusRef.current.textContent = 'Loaded from REST API via dataProvider.';\n    statusRef.current.classList.remove('is-error');\n  }, []);\n\n  const afterDataProviderFetchError = useCallback((error: Error) => {\n    if (!statusRef.current) return;\n    statusRef.current.textContent = `Error: ${error.message}`;\n    statusRef.current.classList.add('is-error');\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <output ref={statusRef} className=\"console\">\n          Loading...\n        </output>\n      </div>\n      <HotTable\n        dataProvider={dataProvider}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        pagination={pagination}\n        columnSorting={true}\n        emptyDataState={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        beforeDataProviderFetch={beforeDataProviderFetch}\n        afterDataProviderFetch={afterDataProviderFetch}\n        afterDataProviderFetchError={afterDataProviderFetchError}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example3.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Load data from a REST API · Using dataProvider for automatic pagination and sorting · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example3\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useMemo, useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst pagination = { pageSize: 5 };\n\ntype ApiUser = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  address?: { city?: string };\n  company?: { name?: string };\n};\n\ntype UserRow = {\n  id: number;\n  name: string;\n  username: string;\n  email: string;\n  city: string;\n  company: string;\n};\n\ntype SortDescriptor = { prop: string; order: 'asc' | 'desc' } | null;\n\nconst ExampleComponent = () => {\n  const cachedRowsRef = useRef<UserRow[] | null>(null);\n  const statusRef = useRef<HTMLParagraphElement | null>(null);\n\n  const loadAllRows = useCallback(async (signal: AbortSignal): Promise<UserRow[]> => {\n    if (cachedRowsRef.current !== null) {\n      return cachedRowsRef.current;\n    }\n\n    const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal });\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}`);\n    }\n\n    const users = (await response.json()) as ApiUser[];\n\n    cachedRowsRef.current = users.map((u) => ({\n      id: u.id,\n      name: u.name,\n      username: u.username,\n      email: u.email,\n      city: u.address?.city ?? '',\n      company: u.company?.name ?? '',\n    }));\n\n    return cachedRowsRef.current;\n  }, []);\n\n  const fetchRows = useCallback(\n    async (\n      { page, pageSize, sort }: { page: number; pageSize: number; sort: SortDescriptor },\n      { signal }: { signal: AbortSignal }\n    ) => {\n      let rows = await loadAllRows(signal);\n\n      if (sort) {\n        rows = [...rows].sort((a, b) => {\n          const av = a[sort.prop as keyof UserRow];\n          const bv = b[sort.prop as keyof UserRow];\n          const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n\n          return sort.order === 'asc' ? cmp : -cmp;\n        });\n      }\n\n      const start = (page - 1) * pageSize;\n\n      return {\n        rows: rows.slice(start, start + pageSize),\n        totalRows: rows.length,\n      };\n    },\n    [loadAllRows]\n  );\n\n  const dataProvider = useMemo(\n    () => ({\n      rowId: 'id',\n      fetchRows,\n      onRowsCreate: async () => {},\n      onRowsUpdate: async () => {},\n      onRowsRemove: async () => {},\n    }),\n    [fetchRows]\n  );\n\n  const beforeDataProviderFetch = useCallback((params: { skipLoading?: boolean }) => {\n    if (params.skipLoading || !statusRef.current) return;\n    statusRef.current.textContent = 'Loading...';\n    statusRef.current.classList.remove('is-error');\n  }, []);\n\n  const afterDataProviderFetch = useCallback(() => {\n    if (!statusRef.current) return;\n    statusRef.current.textContent = 'Loaded from REST API via dataProvider.';\n    statusRef.current.classList.remove('is-error');\n  }, []);\n\n  const afterDataProviderFetchError = useCallback((error: Error) => {\n    if (!statusRef.current) return;\n    statusRef.current.textContent = `Error: ${error.message}`;\n    statusRef.current.classList.add('is-error');\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <output ref={statusRef} className=\"console\">\n          Loading...\n        </output>\n      </div>\n      <HotTable\n        dataProvider={dataProvider}\n        colHeaders={['ID', 'Name', 'Username', 'Email', 'City', 'Company']}\n        columns={[\n          { data: 'id', type: 'numeric', width: 70, readOnly: true },\n          { data: 'name', type: 'text', width: 190, readOnly: true },\n          { data: 'username', type: 'text', width: 150, readOnly: true },\n          { data: 'email', type: 'text', width: 220, readOnly: true },\n          { data: 'city', type: 'text', width: 140, readOnly: true },\n          { data: 'company', type: 'text', width: 180, readOnly: true },\n        ]}\n        pagination={pagination}\n        columnSorting={true}\n        emptyDataState={true}\n        rowHeaders={true}\n        height={360}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        beforeDataProviderFetch={beforeDataProviderFetch}\n        afterDataProviderFetch={afterDataProviderFetch}\n        afterDataProviderFetchError={afterDataProviderFetchError}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/load-data-rest-api/react/example3.tsx","breadcrumb":["Recipes","Data Management","Load data from a REST API"],"guide":"recipes/data-management/load-data-rest-api/load-data-rest-api.md","guideTitle":"Load data from a REST API","exampleId":"example3","exampleTitle":"Using dataProvider for automatic pagination and sorting","docPermalink":"/recipes/data-management/load-data-rest-api","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__angular__example1.ts.json
index 1613f8d26..c69734223 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-sync-two-grids></example1-sync-two-grids>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface MasterRow {\n  firstName: string;\n  lastName: string;\n  plan: string | null;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n}\n\ninterface DetailRow {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n}\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\nconst MASTER_DATA: MasterRow[] = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string => {\n  return typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n};\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst DETAIL_COLUMN_MAP: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-sync-two-grids',\n  template: `\n    <div class=\"sync-grids-layout\">\n      <section class=\"sync-grids-card\">\n        <h4>Master grid (editable)</h4>\n        <hot-table #masterGrid [data]=\"masterData\" [settings]=\"masterSettings\"></hot-table>\n      </section>\n      <section class=\"sync-grids-card\">\n        <h4>Detail grid (synced)</h4>\n        <hot-table #detailGrid [data]=\"detailData\" [settings]=\"detailSettings\"></hot-table>\n      </section>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('masterGrid', { static: false }) masterHotTable!: HotTableComponent;\n  @ViewChild('detailGrid', { static: false }) detailHotTable!: HotTableComponent;\n\n  readonly masterData: MasterRow[] = MASTER_DATA;\n  readonly detailData: DetailRow[] = MASTER_DATA.map(toDetailRow);\n\n  readonly masterSettings: GridSettings = {\n    colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n    columns: [\n      { data: 'firstName', type: 'text', width: 120 },\n      { data: 'lastName', type: 'text', width: 120 },\n      { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n      { data: 'seats', type: 'numeric', width: 70 },\n      { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n      { data: 'lastActive', type: 'date', width: 130 },\n    ],\n    rowHeaders: true,\n    height: 260,\n    width: '100%',\n    autoWrapRow: true,\n    stretchH: 'all',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (!changes || (source as string) === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n        return;\n      }\n\n      const masterHot = this.masterHotTable?.hotInstance;\n      const detailHot = this.detailHotTable?.hotInstance;\n\n      if (!masterHot || !detailHot) {\n        return;\n      }\n\n      const changedRows = new Set<number>();\n\n      changes.forEach(([row]) => {\n        if (typeof row === 'number') {\n          changedRows.add(row);\n        }\n      });\n\n      changedRows.forEach((rowIndex) => {\n        const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n        const detailRow = toDetailRow(rowData);\n        const updates = (Object.entries(DETAIL_COLUMN_MAP) as [keyof DetailRow, number][])\n          .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, DetailRow[keyof DetailRow]]);\n\n        detailHot.setDataAtCell(updates, SOURCE_SYNC_FROM_MASTER);\n      });\n    },\n  };\n\n  readonly detailSettings: GridSettings = {\n    colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n    columns: [\n      { data: 'customer', readOnly: true, width: 170 },\n      { data: 'plan', readOnly: true, width: 130 },\n      { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n      { data: 'monthlyRevenue', readOnly: true, width: 130 },\n      { data: 'lastActive', readOnly: true, width: 110 },\n    ],\n    rowHeaders: true,\n    height: 260,\n    width: '100%',\n    autoWrapRow: true,\n    stretchH: 'all',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/angular/example1.ts","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-sync-two-grids></example1-sync-two-grids>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface MasterRow {\n  firstName: string;\n  lastName: string;\n  plan: string | null;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n}\n\ninterface DetailRow {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n}\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\nconst MASTER_DATA: MasterRow[] = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string => {\n  return typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n};\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst DETAIL_COLUMN_MAP: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-sync-two-grids',\n  template: `\n    <div class=\"sync-grids-layout\">\n      <section class=\"sync-grids-card\">\n        <h4>Master grid (editable)</h4>\n        <hot-table #masterGrid [data]=\"masterData\" [settings]=\"masterSettings\"></hot-table>\n      </section>\n      <section class=\"sync-grids-card\">\n        <h4>Detail grid (synced)</h4>\n        <hot-table #detailGrid [data]=\"detailData\" [settings]=\"detailSettings\"></hot-table>\n      </section>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild('masterGrid', { static: false }) masterHotTable!: HotTableComponent;\n  @ViewChild('detailGrid', { static: false }) detailHotTable!: HotTableComponent;\n\n  readonly masterData: MasterRow[] = MASTER_DATA;\n  readonly detailData: DetailRow[] = MASTER_DATA.map(toDetailRow);\n\n  readonly masterSettings: GridSettings = {\n    colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n    columns: [\n      { data: 'firstName', type: 'text', width: 120 },\n      { data: 'lastName', type: 'text', width: 120 },\n      { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n      { data: 'seats', type: 'numeric', width: 70 },\n      { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n      { data: 'lastActive', type: 'date', width: 130 },\n    ],\n    rowHeaders: true,\n    height: 260,\n    width: '100%',\n    autoWrapRow: true,\n    stretchH: 'all',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (!changes || (source as string) === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n        return;\n      }\n\n      const masterHot = this.masterHotTable?.hotInstance;\n      const detailHot = this.detailHotTable?.hotInstance;\n\n      if (!masterHot || !detailHot) {\n        return;\n      }\n\n      const changedRows = new Set<number>();\n\n      changes.forEach(([row]) => {\n        if (typeof row === 'number') {\n          changedRows.add(row);\n        }\n      });\n\n      changedRows.forEach((rowIndex) => {\n        const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n        const detailRow = toDetailRow(rowData);\n        const updates = (Object.entries(DETAIL_COLUMN_MAP) as [keyof DetailRow, number][])\n          .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, DetailRow[keyof DetailRow]]);\n\n        detailHot.setDataAtCell(updates, SOURCE_SYNC_FROM_MASTER);\n      });\n    },\n  };\n\n  readonly detailSettings: GridSettings = {\n    colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n    columns: [\n      { data: 'customer', readOnly: true, width: 170 },\n      { data: 'plan', readOnly: true, width: 130 },\n      { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n      { data: 'monthlyRevenue', readOnly: true, width: 130 },\n      { data: 'lastActive', readOnly: true, width: 110 },\n    ],\n    rowHeaders: true,\n    height: 260,\n    width: '100%',\n    autoWrapRow: true,\n    stretchH: 'all',\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/angular/example1.ts","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.js.json
index c64b5464e..fe88a3d45 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\nconst normalizePlanLabel = (plan) => typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName, lastName) => [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats, pricePerSeat) =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row) => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst appContainer = document.querySelector('#example1');\n\nif (!appContainer) {\n  throw new Error('Missing #example1 container.');\n}\n\nappContainer.innerHTML = `\n  <div class=\"sync-grids-layout\">\n    <section class=\"sync-grids-card\">\n      <h4>Master grid (editable)</h4>\n      <div id=\"master-grid\"></div>\n    </section>\n    <section class=\"sync-grids-card\">\n      <h4>Detail grid (synced)</h4>\n      <div id=\"detail-grid\"></div>\n    </section>\n  </div>\n`;\n\nconst masterContainer = appContainer.querySelector('#master-grid');\nconst detailContainer = appContainer.querySelector('#detail-grid');\n\nconst detailHot = new Handsontable(detailContainer, {\n  data: masterData.map(toDetailRow),\n  colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n  columns: [\n    { data: 'customer', readOnly: true, width: 170 },\n    { data: 'plan', readOnly: true, width: 130 },\n    { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n    { data: 'monthlyRevenue', readOnly: true, width: 130 },\n    { data: 'lastActive', readOnly: true, width: 110 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst detailColumnMap = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst syncDetailRow = (rowIndex, rowData) => {\n  const detailRow = toDetailRow(rowData);\n\n  // Batch updates to avoid multiple render cycles for one row sync.\n  const detailChanges = Object.entries(detailColumnMap)\n    .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]]);\n\n  detailHot.setDataAtCell(detailChanges, SOURCE_SYNC_FROM_MASTER);\n};\n\nconst masterHot = new Handsontable(masterContainer, {\n  data: masterData,\n  colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n  columns: [\n    { data: 'firstName', type: 'text', width: 120 },\n    { data: 'lastName', type: 'text', width: 120 },\n    { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n    { data: 'seats', type: 'numeric', width: 70 },\n    { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n    { data: 'lastActive', type: 'date', width: 130 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  afterChange: (changes, source) => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const changedRows = new Set();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex);\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst hotInstances = { masterHot, detailHot };","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/javascript/example1.js","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\nconst normalizePlanLabel = (plan) => typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName, lastName) => [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats, pricePerSeat) =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row) => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst appContainer = document.querySelector('#example1');\n\nif (!appContainer) {\n  throw new Error('Missing #example1 container.');\n}\n\nappContainer.innerHTML = `\n  <div class=\"sync-grids-layout\">\n    <section class=\"sync-grids-card\">\n      <h4>Master grid (editable)</h4>\n      <div id=\"master-grid\"></div>\n    </section>\n    <section class=\"sync-grids-card\">\n      <h4>Detail grid (synced)</h4>\n      <div id=\"detail-grid\"></div>\n    </section>\n  </div>\n`;\n\nconst masterContainer = appContainer.querySelector('#master-grid');\nconst detailContainer = appContainer.querySelector('#detail-grid');\n\nconst detailHot = new Handsontable(detailContainer, {\n  data: masterData.map(toDetailRow),\n  colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n  columns: [\n    { data: 'customer', readOnly: true, width: 170 },\n    { data: 'plan', readOnly: true, width: 130 },\n    { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n    { data: 'monthlyRevenue', readOnly: true, width: 130 },\n    { data: 'lastActive', readOnly: true, width: 110 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst detailColumnMap = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst syncDetailRow = (rowIndex, rowData) => {\n  const detailRow = toDetailRow(rowData);\n\n  // Batch updates to avoid multiple render cycles for one row sync.\n  const detailChanges = Object.entries(detailColumnMap)\n    .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]]);\n\n  detailHot.setDataAtCell(detailChanges, SOURCE_SYNC_FROM_MASTER);\n};\n\nconst masterHot = new Handsontable(masterContainer, {\n  data: masterData,\n  colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n  columns: [\n    { data: 'firstName', type: 'text', width: 120 },\n    { data: 'lastName', type: 'text', width: 120 },\n    { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n    { data: 'seats', type: 'numeric', width: 70 },\n    { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n    { data: 'lastActive', type: 'date', width: 130 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  afterChange: (changes, source) => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const changedRows = new Set();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex);\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst hotInstances = { masterHot, detailHot };","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/javascript/example1.js","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.ts.json
index 33c3a5a10..295f63621 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface MasterRow {\n  firstName: string;\n  lastName: string;\n  plan: string | null;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n}\n\ninterface DetailRow {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n}\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData: MasterRow[] = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string =>\n  typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst appContainer = document.querySelector('#example1') as HTMLDivElement;\n\nif (!appContainer) {\n  throw new Error('Missing #example1 container.');\n}\n\nappContainer.innerHTML = `\n  <div class=\"sync-grids-layout\">\n    <section class=\"sync-grids-card\">\n      <h4>Master grid (editable)</h4>\n      <div id=\"master-grid\"></div>\n    </section>\n    <section class=\"sync-grids-card\">\n      <h4>Detail grid (synced)</h4>\n      <div id=\"detail-grid\"></div>\n    </section>\n  </div>\n`;\n\nconst masterContainer = appContainer.querySelector('#master-grid') as HTMLDivElement;\nconst detailContainer = appContainer.querySelector('#detail-grid') as HTMLDivElement;\n\nconst detailHot = new Handsontable(detailContainer, {\n  data: masterData.map(toDetailRow),\n  colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n  columns: [\n    { data: 'customer', readOnly: true, width: 170 },\n    { data: 'plan', readOnly: true, width: 130 },\n    { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n    { data: 'monthlyRevenue', readOnly: true, width: 130 },\n    { data: 'lastActive', readOnly: true, width: 110 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst detailColumnMap: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst syncDetailRow = (rowIndex: number, rowData: MasterRow) => {\n  const detailRow = toDetailRow(rowData);\n\n  // Batch updates into one call to avoid multiple render passes.\n  const updates = (Object.entries(detailColumnMap) as [keyof DetailRow, number][])\n    .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, DetailRow[keyof DetailRow]]);\n\n  detailHot.setDataAtCell(updates, SOURCE_SYNC_FROM_MASTER);\n};\n\nconst masterHot = new Handsontable(masterContainer, {\n  data: masterData,\n  colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n  columns: [\n    { data: 'firstName', type: 'text', width: 120 },\n    { data: 'lastName', type: 'text', width: 120 },\n    { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n    { data: 'seats', type: 'numeric', width: 70 },\n    { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n    { data: 'lastActive', type: 'date', width: 130 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  afterChange: (changes, source) => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const changedRows = new Set<number>();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst hotInstances = { masterHot, detailHot };","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface MasterRow {\n  firstName: string;\n  lastName: string;\n  plan: string | null;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n}\n\ninterface DetailRow {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n}\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData: MasterRow[] = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string =>\n  typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst appContainer = document.querySelector('#example1') as HTMLDivElement;\n\nif (!appContainer) {\n  throw new Error('Missing #example1 container.');\n}\n\nappContainer.innerHTML = `\n  <div class=\"sync-grids-layout\">\n    <section class=\"sync-grids-card\">\n      <h4>Master grid (editable)</h4>\n      <div id=\"master-grid\"></div>\n    </section>\n    <section class=\"sync-grids-card\">\n      <h4>Detail grid (synced)</h4>\n      <div id=\"detail-grid\"></div>\n    </section>\n  </div>\n`;\n\nconst masterContainer = appContainer.querySelector('#master-grid') as HTMLDivElement;\nconst detailContainer = appContainer.querySelector('#detail-grid') as HTMLDivElement;\n\nconst detailHot = new Handsontable(detailContainer, {\n  data: masterData.map(toDetailRow),\n  colHeaders: ['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active'],\n  columns: [\n    { data: 'customer', readOnly: true, width: 170 },\n    { data: 'plan', readOnly: true, width: 130 },\n    { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n    { data: 'monthlyRevenue', readOnly: true, width: 130 },\n    { data: 'lastActive', readOnly: true, width: 110 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst detailColumnMap: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst syncDetailRow = (rowIndex: number, rowData: MasterRow) => {\n  const detailRow = toDetailRow(rowData);\n\n  // Batch updates into one call to avoid multiple render passes.\n  const updates = (Object.entries(detailColumnMap) as [keyof DetailRow, number][])\n    .map(([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, DetailRow[keyof DetailRow]]);\n\n  detailHot.setDataAtCell(updates, SOURCE_SYNC_FROM_MASTER);\n};\n\nconst masterHot = new Handsontable(masterContainer, {\n  data: masterData,\n  colHeaders: ['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active'],\n  columns: [\n    { data: 'firstName', type: 'text', width: 120 },\n    { data: 'lastName', type: 'text', width: 120 },\n    { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n    { data: 'seats', type: 'numeric', width: 70 },\n    { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n    { data: 'lastActive', type: 'date', width: 130 },\n  ],\n  rowHeaders: true,\n  height: 260,\n  width: '100%',\n  autoWrapRow: true,\n  stretchH: 'all',\n  afterChange: (changes, source) => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const changedRows = new Set<number>();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst hotInstances = { masterHot, detailHot };","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__react__example1.tsx.json
index 2b0b1df94..c50a935b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__sync-two-grids__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\ntype MasterRow = {\n  firstName: string;\n  lastName: string;\n  plan: string;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n};\n\ntype DetailRow = {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n};\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string =>\n  typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst detailColumnMap: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst ExampleComponent = () => {\n  const masterHotRef = useRef<HotTableRef>(null);\n  const detailHotRef = useRef<HotTableRef>(null);\n\n  const syncDetailRow = (rowIndex: number, rowData: MasterRow): void => {\n    const detailHot = detailHotRef.current?.hotInstance;\n\n    if (!detailHot) {\n      return;\n    }\n\n    const detailRow = toDetailRow(rowData);\n    const detailChanges = (Object.entries(detailColumnMap) as [keyof DetailRow, number][]).map(\n      ([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, unknown]\n    );\n\n    detailHot.setDataAtCell(detailChanges, SOURCE_SYNC_FROM_MASTER);\n  };\n\n  const handleMasterAfterChange = (changes: [number, string | number, unknown, unknown][] | null, source: string): void => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const masterHot = masterHotRef.current?.hotInstance;\n\n    if (!masterHot) {\n      return;\n    }\n\n    const changedRows = new Set<number>();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  };\n\n  return (\n    <div className=\"sync-grids-layout\">\n      <section className=\"sync-grids-card\">\n        <h4>Master grid (editable)</h4>\n        <HotTable\n          ref={masterHotRef}\n          data={masterData}\n          colHeaders={['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active']}\n          columns={[\n            { data: 'firstName', type: 'text', width: 120 },\n            { data: 'lastName', type: 'text', width: 120 },\n            { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n            { data: 'seats', type: 'numeric', width: 70 },\n            { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n            { data: 'lastActive', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }, correctFormat: true, width: 130 },\n          ]}\n          rowHeaders={true}\n          height={260}\n          width=\"100%\"\n          autoWrapRow={true}\n          stretchH=\"all\"\n          afterChange={handleMasterAfterChange}\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </section>\n      <section className=\"sync-grids-card\">\n        <h4>Detail grid (synced)</h4>\n        <HotTable\n          ref={detailHotRef}\n          data={masterData.map(toDetailRow)}\n          colHeaders={['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active']}\n          columns={[\n            { data: 'customer', readOnly: true, width: 170 },\n            { data: 'plan', readOnly: true, width: 130 },\n            { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n            { data: 'monthlyRevenue', readOnly: true, width: 130 },\n            { data: 'lastActive', readOnly: true, width: 110 },\n          ]}\n          rowHeaders={true}\n          height={260}\n          width=\"100%\"\n          autoWrapRow={true}\n          stretchH=\"all\"\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </section>\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/react/example1.tsx","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Sync two grids · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\nconst SOURCE_SYNC_FROM_MASTER = 'sync-from-master';\n\n/* start:skip-in-preview */\nconst masterData = [\n  { firstName: 'Mia', lastName: 'Johnson', plan: 'Starter', seats: 5, pricePerSeat: 29, lastActive: '2026-03-09' },\n  { firstName: 'Noah', lastName: 'Chen', plan: 'Team', seats: 12, pricePerSeat: 24, lastActive: '2026-03-10' },\n  { firstName: 'Ava', lastName: 'Miller', plan: 'Business', seats: 18, pricePerSeat: 21, lastActive: '2026-03-08' },\n  { firstName: 'Liam', lastName: 'Davis', plan: 'Enterprise', seats: 35, pricePerSeat: 19, lastActive: '2026-03-11' },\n  { firstName: 'Emma', lastName: 'Wilson', plan: 'Team', seats: 9, pricePerSeat: 24, lastActive: '2026-03-06' },\n  { firstName: 'Oliver', lastName: 'Khan', plan: 'Starter', seats: 4, pricePerSeat: 29, lastActive: '2026-03-07' },\n  { firstName: 'Sophia', lastName: 'Lee', plan: 'Business', seats: 22, pricePerSeat: 21, lastActive: '2026-03-05' },\n  { firstName: 'James', lastName: 'Patel', plan: 'Team', seats: 14, pricePerSeat: 24, lastActive: '2026-03-12' },\n  { firstName: 'Isabella', lastName: 'Rossi', plan: 'Starter', seats: 6, pricePerSeat: 29, lastActive: '2026-03-04' },\n  { firstName: 'Benjamin', lastName: 'Garcia', plan: 'Enterprise', seats: 41, pricePerSeat: 19, lastActive: '2026-03-03' },\n  { firstName: 'Charlotte', lastName: 'Nguyen', plan: 'Business', seats: 19, pricePerSeat: 21, lastActive: '2026-03-02' },\n  { firstName: 'Elijah', lastName: 'Brown', plan: 'Team', seats: 11, pricePerSeat: 24, lastActive: '2026-03-01' },\n];\n/* end:skip-in-preview */\n\ntype MasterRow = {\n  firstName: string;\n  lastName: string;\n  plan: string;\n  seats: number;\n  pricePerSeat: number;\n  lastActive: string;\n};\n\ntype DetailRow = {\n  customer: string;\n  plan: string;\n  seats: number;\n  monthlyRevenue: string;\n  lastActive: string;\n};\n\nconst normalizePlanLabel = (plan: MasterRow['plan']): string =>\n  typeof plan === 'string' ? plan.toUpperCase() : 'N/A';\n\nconst normalizeCustomer = (firstName: string | null, lastName: string | null): string =>\n  [firstName, lastName].filter(Boolean).join(' ');\n\nconst normalizeMonthlyRevenue = (seats: number | null, pricePerSeat: number | null): string =>\n  `$${((seats ?? 0) * (pricePerSeat ?? 0)).toFixed(2)}`;\n\nconst toDetailRow = (row: MasterRow): DetailRow => ({\n  customer: normalizeCustomer(row.firstName, row.lastName),\n  plan: normalizePlanLabel(row.plan),\n  seats: row.seats,\n  monthlyRevenue: normalizeMonthlyRevenue(row.seats, row.pricePerSeat),\n  lastActive: row.lastActive ?? '',\n});\n\nconst detailColumnMap: Record<keyof DetailRow, number> = {\n  customer: 0,\n  plan: 1,\n  seats: 2,\n  monthlyRevenue: 3,\n  lastActive: 4,\n};\n\nconst ExampleComponent = () => {\n  const masterHotRef = useRef<HotTableRef>(null);\n  const detailHotRef = useRef<HotTableRef>(null);\n\n  const syncDetailRow = (rowIndex: number, rowData: MasterRow): void => {\n    const detailHot = detailHotRef.current?.hotInstance;\n\n    if (!detailHot) {\n      return;\n    }\n\n    const detailRow = toDetailRow(rowData);\n    const detailChanges = (Object.entries(detailColumnMap) as [keyof DetailRow, number][]).map(\n      ([prop, columnIndex]) => [rowIndex, columnIndex, detailRow[prop]] as [number, number, unknown]\n    );\n\n    detailHot.setDataAtCell(detailChanges, SOURCE_SYNC_FROM_MASTER);\n  };\n\n  const handleMasterAfterChange = (changes: [number, string | number, unknown, unknown][] | null, source: string): void => {\n    // Ignore init/sync writes to prevent re-entrant updates.\n    if (!changes || source === SOURCE_SYNC_FROM_MASTER || source === 'loadData') {\n      return;\n    }\n\n    const masterHot = masterHotRef.current?.hotInstance;\n\n    if (!masterHot) {\n      return;\n    }\n\n    const changedRows = new Set<number>();\n\n    changes.forEach(([row]) => {\n      if (typeof row === 'number') {\n        changedRows.add(row);\n      }\n    });\n\n    changedRows.forEach((rowIndex) => {\n      const rowData = masterHot.getSourceDataAtRow(rowIndex) as MasterRow;\n\n      syncDetailRow(rowIndex, rowData);\n    });\n  };\n\n  return (\n    <div className=\"sync-grids-layout\">\n      <section className=\"sync-grids-card\">\n        <h4>Master grid (editable)</h4>\n        <HotTable\n          ref={masterHotRef}\n          data={masterData}\n          colHeaders={['First name', 'Last name', 'Plan', 'Seats', 'Price / seat', 'Last active']}\n          columns={[\n            { data: 'firstName', type: 'text', width: 120 },\n            { data: 'lastName', type: 'text', width: 120 },\n            { data: 'plan', type: 'dropdown', source: ['Starter', 'Team', 'Business', 'Enterprise'], width: 130 },\n            { data: 'seats', type: 'numeric', width: 70 },\n            { data: 'pricePerSeat', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 105 },\n            { data: 'lastActive', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }, correctFormat: true, width: 130 },\n          ]}\n          rowHeaders={true}\n          height={260}\n          width=\"100%\"\n          autoWrapRow={true}\n          stretchH=\"all\"\n          afterChange={handleMasterAfterChange}\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </section>\n      <section className=\"sync-grids-card\">\n        <h4>Detail grid (synced)</h4>\n        <HotTable\n          ref={detailHotRef}\n          data={masterData.map(toDetailRow)}\n          colHeaders={['Customer', 'Plan', 'Seats', 'Monthly revenue', 'Last active']}\n          columns={[\n            { data: 'customer', readOnly: true, width: 170 },\n            { data: 'plan', readOnly: true, width: 130 },\n            { data: 'seats', readOnly: true, type: 'numeric', width: 70 },\n            { data: 'monthlyRevenue', readOnly: true, width: 130 },\n            { data: 'lastActive', readOnly: true, width: 110 },\n          ]}\n          rowHeaders={true}\n          height={260}\n          width=\"100%\"\n          autoWrapRow={true}\n          stretchH=\"all\"\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      </section>\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".sync-grids-layout {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.sync-grids-card {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--sl-color-gray-7, #f5f5f5);\n}\n\n.sync-grids-card h4 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n@media (max-width: 960px) {\n  .sync-grids-layout {\n    grid-template-columns: 1fr;\n  }\n}"},"docsPath":"recipes/data-management/sync-two-grids/react/example1.tsx","breadcrumb":["Recipes","Data Management","Sync two grids"],"guide":"recipes/data-management/sync-two-grids/sync-two-grids.md","guideTitle":"Sync two grids","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/sync-two-grids","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json
index 9f3bda18c..51546bb8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-undo-redo-custom-ui></example1-undo-redo-custom-ui>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-undo-redo-custom-ui',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" [disabled]=\"!isUndoAvailable\" (click)=\"undo()\">Undo</button>\n        <button type=\"button\" [disabled]=\"!isRedoAvailable\" (click)=\"redo()\">Redo</button>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isUndoAvailable = false;\n  isRedoAvailable = false;\n\n  readonly hotData = [\n    { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n    { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n    { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n    { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id', type: 'numeric', width: 60, readOnly: true },\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'status', type: 'text', width: 130 },\n      { data: 'owner', type: 'text', width: 120 },\n    ],\n    afterChange: (_changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (source !== 'loadData') {\n        this.updateButtonsState();\n      }\n    },\n    afterUndo: () => {\n      this.updateButtonsState();\n    },\n    afterRedo: () => {\n      this.updateButtonsState();\n    },\n  };\n\n  updateButtonsState(): void {\n    const undoRedoPlugin = this.hotTable?.hotInstance?.getPlugin('undoRedo');\n\n    if (undoRedoPlugin) {\n      this.isUndoAvailable = undoRedoPlugin.isUndoAvailable();\n      this.isRedoAvailable = undoRedoPlugin.isRedoAvailable();\n    }\n  }\n\n  undo(): void {\n    this.hotTable?.hotInstance?.getPlugin('undoRedo').undo();\n    this.updateButtonsState();\n  }\n\n  redo(): void {\n    this.hotTable?.hotInstance?.getPlugin('undoRedo').redo();\n    this.updateButtonsState();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/undo-redo-custom-ui/angular/example1.ts","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-undo-redo-custom-ui></example1-undo-redo-custom-ui>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-undo-redo-custom-ui',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" [disabled]=\"!isUndoAvailable\" (click)=\"undo()\">Undo</button>\n        <button type=\"button\" [disabled]=\"!isRedoAvailable\" (click)=\"redo()\">Redo</button>\n      </div>\n    </div>\n    <hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  isUndoAvailable = false;\n  isRedoAvailable = false;\n\n  readonly hotData = [\n    { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n    { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n    { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n    { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n  ];\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    columns: [\n      { data: 'id', type: 'numeric', width: 60, readOnly: true },\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'status', type: 'text', width: 130 },\n      { data: 'owner', type: 'text', width: 120 },\n    ],\n    afterChange: (_changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if (source !== 'loadData') {\n        this.updateButtonsState();\n      }\n    },\n    afterUndo: () => {\n      this.updateButtonsState();\n    },\n    afterRedo: () => {\n      this.updateButtonsState();\n    },\n  };\n\n  updateButtonsState(): void {\n    const undoRedoPlugin = this.hotTable?.hotInstance?.getPlugin('undoRedo');\n\n    if (undoRedoPlugin) {\n      this.isUndoAvailable = undoRedoPlugin.isUndoAvailable();\n      this.isRedoAvailable = undoRedoPlugin.isRedoAvailable();\n    }\n  }\n\n  undo(): void {\n    this.hotTable?.hotInstance?.getPlugin('undoRedo').undo();\n    this.updateButtonsState();\n  }\n\n  redo(): void {\n    this.hotTable?.hotInstance?.getPlugin('undoRedo').redo();\n    this.updateButtonsState();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/data-management/undo-redo-custom-ui/angular/example1.ts","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json
index a14650ee1..4ae335615 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n    { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n    { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n    { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\nconst rootContainer = document.querySelector('#example1');\nif (rootContainer instanceof HTMLElement) {\n    const toolbar = document.createElement('div');\n    const controls = document.createElement('div');\n    const gridContainer = document.createElement('div');\n    toolbar.className = 'example-controls-container';\n    controls.className = 'controls';\n    const undoButton = document.createElement('button');\n    const redoButton = document.createElement('button');\n    undoButton.type = 'button';\n    undoButton.textContent = 'Undo';\n    redoButton.type = 'button';\n    redoButton.textContent = 'Redo';\n    controls.appendChild(undoButton);\n    controls.appendChild(redoButton);\n    toolbar.appendChild(controls);\n    rootContainer.appendChild(toolbar);\n    rootContainer.appendChild(gridContainer);\n    const hot = new Handsontable(gridContainer, {\n        data,\n        colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n        rowHeaders: true,\n        width: '100%',\n        height: 'auto',\n        autoWrapRow: true,\n        autoWrapCol: true,\n        undoRedo: true,\n        columns: [\n            { data: 'id', type: 'numeric', width: 60, readOnly: true },\n            { data: 'task', type: 'text', width: 220 },\n            { data: 'status', type: 'text', width: 130 },\n            { data: 'owner', type: 'text', width: 120 },\n        ],\n        afterChange: (_changes, source) => {\n            if (source !== 'loadData') {\n                updateButtonsState();\n            }\n        },\n        afterUndo: () => {\n            updateButtonsState();\n        },\n        afterRedo: () => {\n            updateButtonsState();\n        },\n        licenseKey: 'non-commercial-and-evaluation',\n    });\n    const undoRedoPlugin = hot.getPlugin('undoRedo');\n    function updateButtonsState() {\n        undoButton.disabled = !undoRedoPlugin.isUndoAvailable();\n        redoButton.disabled = !undoRedoPlugin.isRedoAvailable();\n    }\n    undoButton.addEventListener('click', () => {\n        undoRedoPlugin.undo();\n        updateButtonsState();\n    });\n    redoButton.addEventListener('click', () => {\n        undoRedoPlugin.redo();\n        updateButtonsState();\n    });\n    updateButtonsState();\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/undo-redo-custom-ui/javascript/example1.js","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n/* start:skip-in-preview */\nconst data = [\n    { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n    { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n    { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n    { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\nconst rootContainer = document.querySelector('#example1');\nif (rootContainer instanceof HTMLElement) {\n    const toolbar = document.createElement('div');\n    const controls = document.createElement('div');\n    const gridContainer = document.createElement('div');\n    toolbar.className = 'example-controls-container';\n    controls.className = 'controls';\n    const undoButton = document.createElement('button');\n    const redoButton = document.createElement('button');\n    undoButton.type = 'button';\n    undoButton.textContent = 'Undo';\n    redoButton.type = 'button';\n    redoButton.textContent = 'Redo';\n    controls.appendChild(undoButton);\n    controls.appendChild(redoButton);\n    toolbar.appendChild(controls);\n    rootContainer.appendChild(toolbar);\n    rootContainer.appendChild(gridContainer);\n    const hot = new Handsontable(gridContainer, {\n        data,\n        colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n        rowHeaders: true,\n        width: '100%',\n        height: 'auto',\n        autoWrapRow: true,\n        autoWrapCol: true,\n        undoRedo: true,\n        columns: [\n            { data: 'id', type: 'numeric', width: 60, readOnly: true },\n            { data: 'task', type: 'text', width: 220 },\n            { data: 'status', type: 'text', width: 130 },\n            { data: 'owner', type: 'text', width: 120 },\n        ],\n        afterChange: (_changes, source) => {\n            if (source !== 'loadData') {\n                updateButtonsState();\n            }\n        },\n        afterUndo: () => {\n            updateButtonsState();\n        },\n        afterRedo: () => {\n            updateButtonsState();\n        },\n        licenseKey: 'non-commercial-and-evaluation',\n    });\n    const undoRedoPlugin = hot.getPlugin('undoRedo');\n    function updateButtonsState() {\n        undoButton.disabled = !undoRedoPlugin.isUndoAvailable();\n        redoButton.disabled = !undoRedoPlugin.isRedoAvailable();\n    }\n    undoButton.addEventListener('click', () => {\n        undoRedoPlugin.undo();\n        updateButtonsState();\n    });\n    redoButton.addEventListener('click', () => {\n        undoRedoPlugin.redo();\n        updateButtonsState();\n    });\n    updateButtonsState();\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/data-management/undo-redo-custom-ui/javascript/example1.js","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json
index e44ecba9f..339bd5f77 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n  { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n  { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n  { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1');\n\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const gridContainer = document.createElement('div');\n\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n\n  const undoButton = document.createElement('button');\n  const redoButton = document.createElement('button');\n\n  undoButton.type = 'button';\n  undoButton.textContent = 'Undo';\n  redoButton.type = 'button';\n  redoButton.textContent = 'Redo';\n\n  controls.appendChild(undoButton);\n  controls.appendChild(redoButton);\n  toolbar.appendChild(controls);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    undoRedo: true,\n    columns: [\n      { data: 'id', type: 'numeric', width: 60, readOnly: true },\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'status', type: 'text', width: 130 },\n      { data: 'owner', type: 'text', width: 120 },\n    ],\n    afterChange: (_changes, source) => {\n      if (source !== 'loadData') {\n        updateButtonsState();\n      }\n    },\n    afterUndo: () => {\n      updateButtonsState();\n    },\n    afterRedo: () => {\n      updateButtonsState();\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n  });\n  const undoRedoPlugin = hot.getPlugin('undoRedo');\n\n  function updateButtonsState() {\n    undoButton.disabled = !undoRedoPlugin.isUndoAvailable();\n    redoButton.disabled = !undoRedoPlugin.isRedoAvailable();\n  }\n\n  undoButton.addEventListener('click', () => {\n    undoRedoPlugin.undo();\n    updateButtonsState();\n  });\n\n  redoButton.addEventListener('click', () => {\n    undoRedoPlugin.redo();\n    updateButtonsState();\n  });\n\n  updateButtonsState();\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/undo-redo-custom-ui/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n  { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n  { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n  { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1');\n\nif (rootContainer instanceof HTMLElement) {\n  const toolbar = document.createElement('div');\n  const controls = document.createElement('div');\n  const gridContainer = document.createElement('div');\n\n  toolbar.className = 'example-controls-container';\n  controls.className = 'controls';\n\n  const undoButton = document.createElement('button');\n  const redoButton = document.createElement('button');\n\n  undoButton.type = 'button';\n  undoButton.textContent = 'Undo';\n  redoButton.type = 'button';\n  redoButton.textContent = 'Redo';\n\n  controls.appendChild(undoButton);\n  controls.appendChild(redoButton);\n  toolbar.appendChild(controls);\n  rootContainer.appendChild(toolbar);\n  rootContainer.appendChild(gridContainer);\n\n  const hot = new Handsontable(gridContainer, {\n    data,\n    colHeaders: ['ID', 'Task', 'Status', 'Owner'],\n    rowHeaders: true,\n    width: '100%',\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    undoRedo: true,\n    columns: [\n      { data: 'id', type: 'numeric', width: 60, readOnly: true },\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'status', type: 'text', width: 130 },\n      { data: 'owner', type: 'text', width: 120 },\n    ],\n    afterChange: (_changes, source) => {\n      if (source !== 'loadData') {\n        updateButtonsState();\n      }\n    },\n    afterUndo: () => {\n      updateButtonsState();\n    },\n    afterRedo: () => {\n      updateButtonsState();\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n  });\n  const undoRedoPlugin = hot.getPlugin('undoRedo');\n\n  function updateButtonsState() {\n    undoButton.disabled = !undoRedoPlugin.isUndoAvailable();\n    redoButton.disabled = !undoRedoPlugin.isRedoAvailable();\n  }\n\n  undoButton.addEventListener('click', () => {\n    undoRedoPlugin.undo();\n    updateButtonsState();\n  });\n\n  redoButton.addEventListener('click', () => {\n    undoRedoPlugin.redo();\n    updateButtonsState();\n  });\n\n  updateButtonsState();\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/data-management/undo-redo-custom-ui/javascript/example1.ts","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json
index 803e6562b..1619d84f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n  { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n  { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n  { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [undoDisabled, setUndoDisabled] = useState(true);\n  const [redoDisabled, setRedoDisabled] = useState(true);\n\n  const updateButtonsState = (): void => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const undoRedoPlugin = hot.getPlugin('undoRedo');\n\n    setUndoDisabled(!undoRedoPlugin.isUndoAvailable());\n    setRedoDisabled(!undoRedoPlugin.isRedoAvailable());\n  };\n\n  const handleUndo = (): void => {\n    hotRef.current?.hotInstance?.getPlugin('undoRedo').undo();\n    updateButtonsState();\n  };\n\n  const handleRedo = (): void => {\n    hotRef.current?.hotInstance?.getPlugin('undoRedo').redo();\n    updateButtonsState();\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleUndo} disabled={undoDisabled}>\n            Undo\n          </button>\n          <button type=\"button\" onClick={handleRedo} disabled={redoDisabled}>\n            Redo\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Task', 'Status', 'Owner']}\n        rowHeaders={true}\n        width=\"100%\"\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        undoRedo={true}\n        columns={[\n          { data: 'id', type: 'numeric', width: 60, readOnly: true },\n          { data: 'task', type: 'text', width: 220 },\n          { data: 'status', type: 'text', width: 130 },\n          { data: 'owner', type: 'text', width: 120 },\n        ]}\n        afterChange={(_changes, source) => {\n          if (source !== 'loadData') {\n            updateButtonsState();\n          }\n        }}\n        afterUndo={updateButtonsState}\n        afterRedo={updateButtonsState}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/undo-redo-custom-ui/react/example1.tsx","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Data Management ▸ Undo / redo with a custom UI · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  { id: 1, task: 'Write release notes', status: 'Done', owner: 'Mia' },\n  { id: 2, task: 'Update API docs', status: 'In progress', owner: 'Owen' },\n  { id: 3, task: 'Review recipes', status: 'Blocked', owner: 'Lena' },\n  { id: 4, task: 'Ship hotfix', status: 'Done', owner: 'Kai' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const [undoDisabled, setUndoDisabled] = useState(true);\n  const [redoDisabled, setRedoDisabled] = useState(true);\n\n  const updateButtonsState = (): void => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const undoRedoPlugin = hot.getPlugin('undoRedo');\n\n    setUndoDisabled(!undoRedoPlugin.isUndoAvailable());\n    setRedoDisabled(!undoRedoPlugin.isRedoAvailable());\n  };\n\n  const handleUndo = (): void => {\n    hotRef.current?.hotInstance?.getPlugin('undoRedo').undo();\n    updateButtonsState();\n  };\n\n  const handleRedo = (): void => {\n    hotRef.current?.hotInstance?.getPlugin('undoRedo').redo();\n    updateButtonsState();\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleUndo} disabled={undoDisabled}>\n            Undo\n          </button>\n          <button type=\"button\" onClick={handleRedo} disabled={redoDisabled}>\n            Redo\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Task', 'Status', 'Owner']}\n        rowHeaders={true}\n        width=\"100%\"\n        height=\"auto\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        undoRedo={true}\n        columns={[\n          { data: 'id', type: 'numeric', width: 60, readOnly: true },\n          { data: 'task', type: 'text', width: 220 },\n          { data: 'status', type: 'text', width: 130 },\n          { data: 'owner', type: 'text', width: 120 },\n        ]}\n        afterChange={(_changes, source) => {\n          if (source !== 'loadData') {\n            updateButtonsState();\n          }\n        }}\n        afterUndo={updateButtonsState}\n        afterRedo={updateButtonsState}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/data-management/undo-redo-custom-ui/react/example1.tsx","breadcrumb":["Recipes","Data Management","Undo / redo with a custom UI"],"guide":"recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md","guideTitle":"Undo / redo with a custom UI","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/data-management/undo-redo-custom-ui","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json
index f23921391..1deec7543 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-dependent-dropdowns></example1-dependent-dropdowns></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: ['Apple', 'Banana', 'Orange'],\n  Vegetable: ['Carrot', 'Pea', 'Broccoli'],\n  Grain: ['Rice', 'Wheat', 'Oats'],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-dependent-dropdowns',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: string[][] = [\n    ['Fruit', 'Apple'],\n    ['Vegetable', 'Carrot'],\n    ['Grain', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Category', 'Subcategory'],\n    columns: [\n      { type: 'dropdown', source: Object.keys(dependencyMap) },\n      { type: 'dropdown', source: optionsForCategory(String(this.data[0][CATEGORY_COL])) },\n    ],\n    rowHeaders: true,\n    height: 200,\n    width: '100%',\n    afterInit(this: Handsontable) {\n      for (let row = 0; row < this.countRows(); row++) {\n        const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? '');\n        this.setCellMeta(row, SUBCATEGORY_COL, 'source', optionsForCategory(category));\n      }\n      this.render();\n    },\n    afterChange(this: Handsontable, changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n      if (source === 'loadData' || !changes) {\n        return;\n      }\n      for (const change of changes) {\n        const [row, prop, oldVal, newVal] = change;\n        if (prop !== CATEGORY_COL || oldVal === newVal) {\n          continue;\n        }\n        const next = optionsForCategory(String(newVal));\n        this.setCellMeta(row, SUBCATEGORY_COL, 'source', next);\n        this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? '');\n      }\n      this.render();\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/editing-validation/dependent-dropdowns/angular/example1.ts","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-dependent-dropdowns></example1-dependent-dropdowns></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: ['Apple', 'Banana', 'Orange'],\n  Vegetable: ['Carrot', 'Pea', 'Broccoli'],\n  Grain: ['Rice', 'Wheat', 'Oats'],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-dependent-dropdowns',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: string[][] = [\n    ['Fruit', 'Apple'],\n    ['Vegetable', 'Carrot'],\n    ['Grain', ''],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Category', 'Subcategory'],\n    columns: [\n      { type: 'dropdown', source: Object.keys(dependencyMap) },\n      { type: 'dropdown', source: optionsForCategory(String(this.data[0][CATEGORY_COL])) },\n    ],\n    rowHeaders: true,\n    height: 200,\n    width: '100%',\n    afterInit(this: Handsontable) {\n      for (let row = 0; row < this.countRows(); row++) {\n        const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? '');\n        this.setCellMeta(row, SUBCATEGORY_COL, 'source', optionsForCategory(category));\n      }\n      this.render();\n    },\n    afterChange(this: Handsontable, changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n      if (source === 'loadData' || !changes) {\n        return;\n      }\n      for (const change of changes) {\n        const [row, prop, oldVal, newVal] = change;\n        if (prop !== CATEGORY_COL || oldVal === newVal) {\n          continue;\n        }\n        const next = optionsForCategory(String(newVal));\n        this.setCellMeta(row, SUBCATEGORY_COL, 'source', next);\n        this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? '');\n      }\n      this.render();\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/editing-validation/dependent-dropdowns/angular/example1.ts","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json
index 4a806bb61..8b5aec370 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap = {\n    Fruit: [\"Apple\", \"Banana\", \"Orange\"],\n    Vegetable: [\"Carrot\", \"Pea\", \"Broccoli\"],\n    Grain: [\"Rice\", \"Wheat\", \"Oats\"],\n};\nfunction optionsForCategory(category) {\n    return dependencyMap[category] ?? [];\n}\n/* start:skip-in-preview */\nconst data = [\n    [\"Fruit\", \"Apple\"],\n    [\"Vegetable\", \"Carrot\"],\n    [\"Grain\", \"\"],\n];\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\n// eslint-disable-next-line no-unused-vars -- instance kept for recipe preview\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: [\"Category\", \"Subcategory\"],\n    columns: [\n        { type: \"dropdown\", source: Object.keys(dependencyMap) },\n        { type: \"dropdown\", source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n    ],\n    rowHeaders: true,\n    height: 200,\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n    afterInit() {\n        for (let row = 0; row < this.countRows(); row++) {\n            const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? \"\");\n            this.setCellMeta(row, SUBCATEGORY_COL, \"source\", optionsForCategory(category));\n        }\n        this.render();\n    },\n    afterChange(changes, source) {\n        if (source === \"loadData\" || !changes) {\n            return;\n        }\n        for (const change of changes) {\n            const [row, prop, oldVal, newVal] = change;\n            if (prop !== CATEGORY_COL || oldVal === newVal) {\n                continue;\n            }\n            const next = optionsForCategory(String(newVal));\n            this.setCellMeta(row, SUBCATEGORY_COL, \"source\", next);\n            this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? \"\");\n        }\n        this.render();\n    },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/editing-validation/dependent-dropdowns/javascript/example1.js","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap = {\n    Fruit: [\"Apple\", \"Banana\", \"Orange\"],\n    Vegetable: [\"Carrot\", \"Pea\", \"Broccoli\"],\n    Grain: [\"Rice\", \"Wheat\", \"Oats\"],\n};\nfunction optionsForCategory(category) {\n    return dependencyMap[category] ?? [];\n}\n/* start:skip-in-preview */\nconst data = [\n    [\"Fruit\", \"Apple\"],\n    [\"Vegetable\", \"Carrot\"],\n    [\"Grain\", \"\"],\n];\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\n// eslint-disable-next-line no-unused-vars -- instance kept for recipe preview\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: [\"Category\", \"Subcategory\"],\n    columns: [\n        { type: \"dropdown\", source: Object.keys(dependencyMap) },\n        { type: \"dropdown\", source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n    ],\n    rowHeaders: true,\n    height: 200,\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n    afterInit() {\n        for (let row = 0; row < this.countRows(); row++) {\n            const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? \"\");\n            this.setCellMeta(row, SUBCATEGORY_COL, \"source\", optionsForCategory(category));\n        }\n        this.render();\n    },\n    afterChange(changes, source) {\n        if (source === \"loadData\" || !changes) {\n            return;\n        }\n        for (const change of changes) {\n            const [row, prop, oldVal, newVal] = change;\n            if (prop !== CATEGORY_COL || oldVal === newVal) {\n                continue;\n            }\n            const next = optionsForCategory(String(newVal));\n            this.setCellMeta(row, SUBCATEGORY_COL, \"source\", next);\n            this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? \"\");\n        }\n        this.render();\n    },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/editing-validation/dependent-dropdowns/javascript/example1.js","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json
index 60625251b..255a92320 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\n\nregisterAllModules();\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: [\"Apple\", \"Banana\", \"Orange\"],\n  Vegetable: [\"Carrot\", \"Pea\", \"Broccoli\"],\n  Grain: [\"Rice\", \"Wheat\", \"Oats\"],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  [\"Fruit\", \"Apple\"],\n  [\"Vegetable\", \"Carrot\"],\n  [\"Grain\", \"\"],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\n// eslint-disable-next-line no-unused-vars -- instance kept for recipe preview\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: [\"Category\", \"Subcategory\"],\n  columns: [\n    { type: \"dropdown\", source: Object.keys(dependencyMap) },\n    { type: \"dropdown\", source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n  ],\n  rowHeaders: true,\n  height: 200,\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n  afterInit() {\n    for (let row = 0; row < this.countRows(); row++) {\n      const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? \"\");\n      this.setCellMeta(row, SUBCATEGORY_COL, \"source\", optionsForCategory(category));\n    }\n    this.render();\n  },\n  afterChange(changes, source) {\n    if (source === \"loadData\" || !changes) {\n      return;\n    }\n    for (const change of changes) {\n      const [row, prop, oldVal, newVal] = change;\n      if (prop !== CATEGORY_COL || oldVal === newVal) {\n        continue;\n      }\n      const next = optionsForCategory(String(newVal));\n      this.setCellMeta(row, SUBCATEGORY_COL, \"source\", next);\n      this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? \"\");\n    }\n    this.render();\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/editing-validation/dependent-dropdowns/javascript/example1.ts","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\n\nregisterAllModules();\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: [\"Apple\", \"Banana\", \"Orange\"],\n  Vegetable: [\"Carrot\", \"Pea\", \"Broccoli\"],\n  Grain: [\"Rice\", \"Wheat\", \"Oats\"],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  [\"Fruit\", \"Apple\"],\n  [\"Vegetable\", \"Carrot\"],\n  [\"Grain\", \"\"],\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\n// eslint-disable-next-line no-unused-vars -- instance kept for recipe preview\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: [\"Category\", \"Subcategory\"],\n  columns: [\n    { type: \"dropdown\", source: Object.keys(dependencyMap) },\n    { type: \"dropdown\", source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n  ],\n  rowHeaders: true,\n  height: 200,\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n  afterInit() {\n    for (let row = 0; row < this.countRows(); row++) {\n      const category = String(this.getDataAtCell(row, CATEGORY_COL) ?? \"\");\n      this.setCellMeta(row, SUBCATEGORY_COL, \"source\", optionsForCategory(category));\n    }\n    this.render();\n  },\n  afterChange(changes, source) {\n    if (source === \"loadData\" || !changes) {\n      return;\n    }\n    for (const change of changes) {\n      const [row, prop, oldVal, newVal] = change;\n      if (prop !== CATEGORY_COL || oldVal === newVal) {\n        continue;\n      }\n      const next = optionsForCategory(String(newVal));\n      this.setCellMeta(row, SUBCATEGORY_COL, \"source\", next);\n      this.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? \"\");\n    }\n    this.render();\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/editing-validation/dependent-dropdowns/javascript/example1.ts","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json
index 431cb312a..12dd79698 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: ['Apple', 'Banana', 'Orange'],\n  Vegetable: ['Carrot', 'Pea', 'Broccoli'],\n  Grain: ['Rice', 'Wheat', 'Oats'],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n/* start:skip-in-preview */\nconst data: string[][] = [\n  ['Fruit', 'Apple'],\n  ['Vegetable', 'Carrot'],\n  ['Grain', ''],\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  function afterInit(this: Handsontable): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    for (let row = 0; row < hot.countRows(); row++) {\n      const category = String(hot.getDataAtCell(row, CATEGORY_COL) ?? '');\n\n      hot.setCellMeta(row, SUBCATEGORY_COL, 'source', optionsForCategory(category));\n    }\n\n    hot.render();\n  }\n\n  function afterChange(\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot || source === 'loadData' || !changes) {\n      return;\n    }\n\n    for (const change of changes) {\n      const [row, prop, oldVal, newVal] = change;\n\n      if (prop !== CATEGORY_COL || oldVal === newVal) {\n        continue;\n      }\n\n      const next = optionsForCategory(String(newVal));\n\n      hot.setCellMeta(row, SUBCATEGORY_COL, 'source', next);\n      hot.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? '');\n    }\n\n    hot.render();\n  }\n\n  return (\n    <div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Category', 'Subcategory']}\n        columns={[\n          { type: 'dropdown', source: Object.keys(dependencyMap) },\n          { type: 'dropdown', source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n        ]}\n        rowHeaders={true}\n        height={200}\n        width=\"100%\"\n        afterInit={afterInit}\n        afterChange={afterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/editing-validation/dependent-dropdowns/react/example1.tsx","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Editing Validation ▸ Dependent dropdowns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\nregisterAllModules();\n\nconst CATEGORY_COL = 0;\nconst SUBCATEGORY_COL = 1;\n\n/** Parent value -> allowed child dropdown labels */\nconst dependencyMap: Record<string, string[]> = {\n  Fruit: ['Apple', 'Banana', 'Orange'],\n  Vegetable: ['Carrot', 'Pea', 'Broccoli'],\n  Grain: ['Rice', 'Wheat', 'Oats'],\n};\n\nfunction optionsForCategory(category: string): string[] {\n  return dependencyMap[category] ?? [];\n}\n\n/* start:skip-in-preview */\nconst data: string[][] = [\n  ['Fruit', 'Apple'],\n  ['Vegetable', 'Carrot'],\n  ['Grain', ''],\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  function afterInit(this: Handsontable): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    for (let row = 0; row < hot.countRows(); row++) {\n      const category = String(hot.getDataAtCell(row, CATEGORY_COL) ?? '');\n\n      hot.setCellMeta(row, SUBCATEGORY_COL, 'source', optionsForCategory(category));\n    }\n\n    hot.render();\n  }\n\n  function afterChange(\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot || source === 'loadData' || !changes) {\n      return;\n    }\n\n    for (const change of changes) {\n      const [row, prop, oldVal, newVal] = change;\n\n      if (prop !== CATEGORY_COL || oldVal === newVal) {\n        continue;\n      }\n\n      const next = optionsForCategory(String(newVal));\n\n      hot.setCellMeta(row, SUBCATEGORY_COL, 'source', next);\n      hot.setDataAtCell(row, SUBCATEGORY_COL, next[0] ?? '');\n    }\n\n    hot.render();\n  }\n\n  return (\n    <div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['Category', 'Subcategory']}\n        columns={[\n          { type: 'dropdown', source: Object.keys(dependencyMap) },\n          { type: 'dropdown', source: optionsForCategory(String(data[0][CATEGORY_COL])) },\n        ]}\n        rowHeaders={true}\n        height={200}\n        width=\"100%\"\n        afterInit={afterInit}\n        afterChange={afterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/editing-validation/dependent-dropdowns/react/example1.tsx","breadcrumb":["Recipes","Editing Validation","Dependent dropdowns"],"guide":"recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md","guideTitle":"Dependent dropdowns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/dependent-dropdowns","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json
index cda82e955..85b8d922c 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-row-validation-error-summary></example1-row-validation-error-summary></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst COLUMN_LABELS = ['Item', 'Quantity', 'Unit price'];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, (value: unknown) => string | null> = {\n  0: (value) => {\n    const text = String(value ?? '').trim();\n    return text.length > 0 ? null : 'Item name is required';\n  },\n  1: (value) => {\n    if (value === null || value === '') {\n      return 'Quantity is required';\n    }\n    const n = Number(value);\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : 'Quantity must be a positive whole number';\n  },\n  2: (value) => {\n    if (value === null || value === '') {\n      return 'Unit price is required';\n    }\n    const n = Number(value);\n    return !Number.isNaN(n) && n > 0 ? null : 'Unit price must be greater than 0';\n  },\n};\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-row-validation-error-summary',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"onSubmit()\">Submit orders</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <div class=\"example-controls-container validation-summary\" aria-live=\"polite\">\n      <p class=\"validation-summary__title\">Validation issues</p>\n      <ul class=\"validation-summary__list\">\n        @for (issue of issues; track $index) {\n          <li>Row {{ issue.row + 1 }}, {{ columnLabels[issue.col] }}: {{ issue.message }}</li>\n        }\n      </ul>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly columnLabels = COLUMN_LABELS;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  invalidCells = new Set<string>();\n  issues: { row: number; col: number; message: string }[] = [];\n\n  readonly data = [\n    { item: 'Widget A', qty: 2, price: 19.99 },\n    { item: '', qty: 1, price: 5 },\n    { item: 'Gadget', qty: -1, price: 12 },\n    { item: 'Cable', qty: 3, price: 0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: COLUMN_LABELS,\n    columns: [\n      { data: 'item', type: 'text', width: 180 },\n      { data: 'qty', type: 'numeric', width: 100 },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    afterRenderer: (TD: HTMLTableCellElement, row: number, col: number) => {\n      TD.style.backgroundColor = this.invalidCells.has(cellKey(row, col))\n        ? 'var(--ht-cell-error-background-color, #ffe4e4)'\n        : '';\n    },\n    afterChange: (changes: Handsontable.CellChange[] | null, source: string) => {\n      if (source === 'loadData' || !changes) {\n        return;\n      }\n      let touched = false;\n      const hot = this.hotTable?.hotInstance;\n      if (!hot) {\n        return;\n      }\n      for (const change of changes) {\n        const [row, prop] = change;\n        const col = typeof prop === 'string' ? hot.propToCol(prop) : (prop as number);\n        // Skip a property that names no column.\n        if (col === null) {\n          continue;\n        }\n        const key = cellKey(row, col);\n        if (!this.invalidCells.has(key)) {\n          continue;\n        }\n        hot.removeCellMeta(row, col, 'className');\n        hot.removeCellMeta(row, col, 'title');\n        this.invalidCells.delete(key);\n        this.issues = this.issues.filter((i) => !(i.row === row && i.col === col));\n        touched = true;\n      }\n      if (touched) {\n        this.cdr.detectChanges();\n        hot.render();\n      }\n    },\n  };\n\n  onSubmit(): void {\n    const hot = this.hotTable?.hotInstance;\n    if (!hot) {\n      return;\n    }\n\n    this.invalidCells.forEach((key) => {\n      const [r, c] = key.split(':').map(Number);\n      hot.removeCellMeta(r, c, 'className');\n      hot.removeCellMeta(r, c, 'title');\n    });\n    this.invalidCells.clear();\n\n    const newIssues: { row: number; col: number; message: string }[] = [];\n    for (let row = 0; row < hot.countRows(); row++) {\n      for (let col = 0; col < hot.countCols(); col++) {\n        const rule = validationRules[col];\n        if (!rule) {\n          continue;\n        }\n        const value = hot.getDataAtCell(row, col);\n        const message = rule(value);\n        if (message !== null) {\n          newIssues.push({ row, col, message });\n        }\n      }\n    }\n\n    this.issues = newIssues;\n\n    newIssues.forEach((issue) => {\n      hot.setCellMeta(issue.row, issue.col, 'className', 'htInvalid');\n      hot.setCellMeta(issue.row, issue.col, 'title', issue.message);\n      this.invalidCells.add(cellKey(issue.row, issue.col));\n    });\n\n    this.cdr.detectChanges();\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/angular/example1.ts","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-row-validation-error-summary></example1-row-validation-error-summary></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ChangeDetectorRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst COLUMN_LABELS = ['Item', 'Quantity', 'Unit price'];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, (value: unknown) => string | null> = {\n  0: (value) => {\n    const text = String(value ?? '').trim();\n    return text.length > 0 ? null : 'Item name is required';\n  },\n  1: (value) => {\n    if (value === null || value === '') {\n      return 'Quantity is required';\n    }\n    const n = Number(value);\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : 'Quantity must be a positive whole number';\n  },\n  2: (value) => {\n    if (value === null || value === '') {\n      return 'Unit price is required';\n    }\n    const n = Number(value);\n    return !Number.isNaN(n) && n > 0 ? null : 'Unit price must be greater than 0';\n  },\n};\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-row-validation-error-summary',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"onSubmit()\">Submit orders</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <div class=\"example-controls-container validation-summary\" aria-live=\"polite\">\n      <p class=\"validation-summary__title\">Validation issues</p>\n      <ul class=\"validation-summary__list\">\n        @for (issue of issues; track $index) {\n          <li>Row {{ issue.row + 1 }}, {{ columnLabels[issue.col] }}: {{ issue.message }}</li>\n        }\n      </ul>\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly columnLabels = COLUMN_LABELS;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  invalidCells = new Set<string>();\n  issues: { row: number; col: number; message: string }[] = [];\n\n  readonly data = [\n    { item: 'Widget A', qty: 2, price: 19.99 },\n    { item: '', qty: 1, price: 5 },\n    { item: 'Gadget', qty: -1, price: 12 },\n    { item: 'Cable', qty: 3, price: 0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: COLUMN_LABELS,\n    columns: [\n      { data: 'item', type: 'text', width: 180 },\n      { data: 'qty', type: 'numeric', width: 100 },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    afterRenderer: (TD: HTMLTableCellElement, row: number, col: number) => {\n      TD.style.backgroundColor = this.invalidCells.has(cellKey(row, col))\n        ? 'var(--ht-cell-error-background-color, #ffe4e4)'\n        : '';\n    },\n    afterChange: (changes: Handsontable.CellChange[] | null, source: string) => {\n      if (source === 'loadData' || !changes) {\n        return;\n      }\n      let touched = false;\n      const hot = this.hotTable?.hotInstance;\n      if (!hot) {\n        return;\n      }\n      for (const change of changes) {\n        const [row, prop] = change;\n        const col = typeof prop === 'string' ? hot.propToCol(prop) : (prop as number);\n        // Skip a property that names no column.\n        if (col === null) {\n          continue;\n        }\n        const key = cellKey(row, col);\n        if (!this.invalidCells.has(key)) {\n          continue;\n        }\n        hot.removeCellMeta(row, col, 'className');\n        hot.removeCellMeta(row, col, 'title');\n        this.invalidCells.delete(key);\n        this.issues = this.issues.filter((i) => !(i.row === row && i.col === col));\n        touched = true;\n      }\n      if (touched) {\n        this.cdr.detectChanges();\n        hot.render();\n      }\n    },\n  };\n\n  onSubmit(): void {\n    const hot = this.hotTable?.hotInstance;\n    if (!hot) {\n      return;\n    }\n\n    this.invalidCells.forEach((key) => {\n      const [r, c] = key.split(':').map(Number);\n      hot.removeCellMeta(r, c, 'className');\n      hot.removeCellMeta(r, c, 'title');\n    });\n    this.invalidCells.clear();\n\n    const newIssues: { row: number; col: number; message: string }[] = [];\n    for (let row = 0; row < hot.countRows(); row++) {\n      for (let col = 0; col < hot.countCols(); col++) {\n        const rule = validationRules[col];\n        if (!rule) {\n          continue;\n        }\n        const value = hot.getDataAtCell(row, col);\n        const message = rule(value);\n        if (message !== null) {\n          newIssues.push({ row, col, message });\n        }\n      }\n    }\n\n    this.issues = newIssues;\n\n    newIssues.forEach((issue) => {\n      hot.setCellMeta(issue.row, issue.col, 'className', 'htInvalid');\n      hot.setCellMeta(issue.row, issue.col, 'title', issue.message);\n      this.invalidCells.add(cellKey(issue.row, issue.col));\n    });\n\n    this.cdr.detectChanges();\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/angular/example1.ts","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json
index 6eaf2742c..a0fc38082 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst COLUMN_LABELS = [\"Item\", \"Quantity\", \"Unit price\"];\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules = {\n    0: (value) => {\n        const text = String(value ?? \"\").trim();\n        return text.length > 0 ? null : \"Item name is required\";\n    },\n    1: (value) => {\n        if (value === null || value === \"\") {\n            return \"Quantity is required\";\n        }\n        const n = Number(value);\n        return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n            ? null\n            : \"Quantity must be a positive whole number\";\n    },\n    2: (value) => {\n        if (value === null || value === \"\") {\n            return \"Unit price is required\";\n        }\n        const n = Number(value);\n        return !Number.isNaN(n) && n > 0 ? null : \"Unit price must be greater than 0\";\n    },\n};\nconst invalidCells = new Set();\nlet lastIssues = [];\nfunction cellKey(row, col) {\n    return `${row}:${col}`;\n}\nconst container = document.querySelector(\"#example1\");\nconst toolbar = document.createElement(\"div\");\ntoolbar.className = \"example-controls-container\";\nconst controlsRow = document.createElement(\"div\");\ncontrolsRow.className = \"controls\";\nconst submitBtn = document.createElement(\"button\");\nsubmitBtn.type = \"button\";\nsubmitBtn.textContent = \"Submit orders\";\ncontrolsRow.appendChild(submitBtn);\ntoolbar.appendChild(controlsRow);\ncontainer.before(toolbar);\nconst summaryEl = document.createElement(\"div\");\nsummaryEl.className = \"example-controls-container validation-summary\";\nsummaryEl.setAttribute(\"aria-live\", \"polite\");\nconst summaryTitle = document.createElement(\"p\");\nsummaryTitle.className = \"validation-summary__title\";\nsummaryTitle.textContent = \"Validation issues\";\nconst summaryList = document.createElement(\"ul\");\nsummaryList.className = \"validation-summary__list\";\nsummaryEl.appendChild(summaryTitle);\nsummaryEl.appendChild(summaryList);\ncontainer.after(summaryEl);\nfunction renderSummary(issues) {\n    summaryList.innerHTML = issues\n        .map((issue) => `<li>Row ${issue.row + 1}, ${COLUMN_LABELS[issue.col]}: ${issue.message}</li>`)\n        .join(\"\");\n}\nfunction clearHighlights(instance) {\n    invalidCells.forEach((key) => {\n        const [r, c] = key.split(\":\").map(Number);\n        instance.removeCellMeta(r, c, \"className\");\n        instance.removeCellMeta(r, c, \"title\");\n    });\n    invalidCells.clear();\n}\nfunction applyHighlights(instance, issues) {\n    issues.forEach((issue) => {\n        instance.setCellMeta(issue.row, issue.col, \"className\", \"htInvalid\");\n        instance.setCellMeta(issue.row, issue.col, \"title\", issue.message);\n        invalidCells.add(cellKey(issue.row, issue.col));\n    });\n    instance.render();\n}\nconst hot = new Handsontable(container, {\n    data: [\n        { item: \"Widget A\", qty: 2, price: 19.99 },\n        { item: \"\", qty: 1, price: 5 },\n        { item: \"Gadget\", qty: -1, price: 12 },\n        { item: \"Cable\", qty: 3, price: 0 },\n    ],\n    colHeaders: COLUMN_LABELS,\n    columns: [\n        { data: \"item\", type: \"text\", width: 180 },\n        { data: \"qty\", type: \"numeric\", width: 100 },\n        { data: \"price\", type: \"numeric\", numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n    ],\n    rowHeaders: true,\n    height: \"auto\",\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n    afterRenderer(TD, row, col) {\n        TD.style.backgroundColor = invalidCells.has(cellKey(row, col))\n            ? \"var(--ht-cell-error-background-color, #ffe4e4)\"\n            : \"\";\n    },\n    afterChange(changes, source) {\n        if (source === \"loadData\" || !changes) {\n            return;\n        }\n        let touched = false;\n        for (const change of changes) {\n            const [row, prop] = change;\n            const col = typeof prop === \"string\" ? this.propToCol(prop) : prop;\n            // Skip a property that names no column.\n            if (col === null) {\n                continue;\n            }\n            const key = cellKey(row, col);\n            if (!invalidCells.has(key)) {\n                continue;\n            }\n            this.removeCellMeta(row, col, \"className\");\n            this.removeCellMeta(row, col, \"title\");\n            invalidCells.delete(key);\n            lastIssues = lastIssues.filter((i) => !(i.row === row && i.col === col));\n            touched = true;\n        }\n        if (touched) {\n            renderSummary(lastIssues);\n            this.render();\n        }\n    },\n});\nsubmitBtn.addEventListener(\"click\", () => {\n    clearHighlights(hot);\n    const issues = [];\n    for (let row = 0; row < hot.countRows(); row++) {\n        for (let col = 0; col < hot.countCols(); col++) {\n            const rule = validationRules[col];\n            if (!rule) {\n                continue;\n            }\n            const value = hot.getDataAtCell(row, col);\n            const message = rule(value);\n            if (message !== null) {\n                issues.push({ row, col, message });\n            }\n        }\n    }\n    lastIssues = issues;\n    renderSummary(issues);\n    applyHighlights(hot, issues);\n});\nrenderSummary([]);\n// eslint-disable-next-line no-unused-vars -- instance wired by event handlers and closures\nvoid hot;","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#example1 .handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/javascript/example1.js","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst COLUMN_LABELS = [\"Item\", \"Quantity\", \"Unit price\"];\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules = {\n    0: (value) => {\n        const text = String(value ?? \"\").trim();\n        return text.length > 0 ? null : \"Item name is required\";\n    },\n    1: (value) => {\n        if (value === null || value === \"\") {\n            return \"Quantity is required\";\n        }\n        const n = Number(value);\n        return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n            ? null\n            : \"Quantity must be a positive whole number\";\n    },\n    2: (value) => {\n        if (value === null || value === \"\") {\n            return \"Unit price is required\";\n        }\n        const n = Number(value);\n        return !Number.isNaN(n) && n > 0 ? null : \"Unit price must be greater than 0\";\n    },\n};\nconst invalidCells = new Set();\nlet lastIssues = [];\nfunction cellKey(row, col) {\n    return `${row}:${col}`;\n}\nconst container = document.querySelector(\"#example1\");\nconst toolbar = document.createElement(\"div\");\ntoolbar.className = \"example-controls-container\";\nconst controlsRow = document.createElement(\"div\");\ncontrolsRow.className = \"controls\";\nconst submitBtn = document.createElement(\"button\");\nsubmitBtn.type = \"button\";\nsubmitBtn.textContent = \"Submit orders\";\ncontrolsRow.appendChild(submitBtn);\ntoolbar.appendChild(controlsRow);\ncontainer.before(toolbar);\nconst summaryEl = document.createElement(\"div\");\nsummaryEl.className = \"example-controls-container validation-summary\";\nsummaryEl.setAttribute(\"aria-live\", \"polite\");\nconst summaryTitle = document.createElement(\"p\");\nsummaryTitle.className = \"validation-summary__title\";\nsummaryTitle.textContent = \"Validation issues\";\nconst summaryList = document.createElement(\"ul\");\nsummaryList.className = \"validation-summary__list\";\nsummaryEl.appendChild(summaryTitle);\nsummaryEl.appendChild(summaryList);\ncontainer.after(summaryEl);\nfunction renderSummary(issues) {\n    summaryList.innerHTML = issues\n        .map((issue) => `<li>Row ${issue.row + 1}, ${COLUMN_LABELS[issue.col]}: ${issue.message}</li>`)\n        .join(\"\");\n}\nfunction clearHighlights(instance) {\n    invalidCells.forEach((key) => {\n        const [r, c] = key.split(\":\").map(Number);\n        instance.removeCellMeta(r, c, \"className\");\n        instance.removeCellMeta(r, c, \"title\");\n    });\n    invalidCells.clear();\n}\nfunction applyHighlights(instance, issues) {\n    issues.forEach((issue) => {\n        instance.setCellMeta(issue.row, issue.col, \"className\", \"htInvalid\");\n        instance.setCellMeta(issue.row, issue.col, \"title\", issue.message);\n        invalidCells.add(cellKey(issue.row, issue.col));\n    });\n    instance.render();\n}\nconst hot = new Handsontable(container, {\n    data: [\n        { item: \"Widget A\", qty: 2, price: 19.99 },\n        { item: \"\", qty: 1, price: 5 },\n        { item: \"Gadget\", qty: -1, price: 12 },\n        { item: \"Cable\", qty: 3, price: 0 },\n    ],\n    colHeaders: COLUMN_LABELS,\n    columns: [\n        { data: \"item\", type: \"text\", width: 180 },\n        { data: \"qty\", type: \"numeric\", width: 100 },\n        { data: \"price\", type: \"numeric\", numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n    ],\n    rowHeaders: true,\n    height: \"auto\",\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n    afterRenderer(TD, row, col) {\n        TD.style.backgroundColor = invalidCells.has(cellKey(row, col))\n            ? \"var(--ht-cell-error-background-color, #ffe4e4)\"\n            : \"\";\n    },\n    afterChange(changes, source) {\n        if (source === \"loadData\" || !changes) {\n            return;\n        }\n        let touched = false;\n        for (const change of changes) {\n            const [row, prop] = change;\n            const col = typeof prop === \"string\" ? this.propToCol(prop) : prop;\n            // Skip a property that names no column.\n            if (col === null) {\n                continue;\n            }\n            const key = cellKey(row, col);\n            if (!invalidCells.has(key)) {\n                continue;\n            }\n            this.removeCellMeta(row, col, \"className\");\n            this.removeCellMeta(row, col, \"title\");\n            invalidCells.delete(key);\n            lastIssues = lastIssues.filter((i) => !(i.row === row && i.col === col));\n            touched = true;\n        }\n        if (touched) {\n            renderSummary(lastIssues);\n            this.render();\n        }\n    },\n});\nsubmitBtn.addEventListener(\"click\", () => {\n    clearHighlights(hot);\n    const issues = [];\n    for (let row = 0; row < hot.countRows(); row++) {\n        for (let col = 0; col < hot.countCols(); col++) {\n            const rule = validationRules[col];\n            if (!rule) {\n                continue;\n            }\n            const value = hot.getDataAtCell(row, col);\n            const message = rule(value);\n            if (message !== null) {\n                issues.push({ row, col, message });\n            }\n        }\n    }\n    lastIssues = issues;\n    renderSummary(issues);\n    applyHighlights(hot, issues);\n});\nrenderSummary([]);\n// eslint-disable-next-line no-unused-vars -- instance wired by event handlers and closures\nvoid hot;","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#example1 .handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/javascript/example1.js","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json
index de398d52f..2e7dfb00f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\n\nregisterAllModules();\n\ntype ValidationRule = (value: unknown) => string | null;\n\nconst COLUMN_LABELS = [\"Item\", \"Quantity\", \"Unit price\"];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, ValidationRule> = {\n  0: (value) => {\n    const text = String(value ?? \"\").trim();\n\n    return text.length > 0 ? null : \"Item name is required\";\n  },\n  1: (value) => {\n    if (value === null || value === \"\") {\n      return \"Quantity is required\";\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : \"Quantity must be a positive whole number\";\n  },\n  2: (value) => {\n    if (value === null || value === \"\") {\n      return \"Unit price is required\";\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 ? null : \"Unit price must be greater than 0\";\n  },\n};\n\ninterface ValidationIssue {\n  row: number;\n  col: number;\n  message: string;\n}\n\nconst invalidCells = new Set<string>();\nlet lastIssues: ValidationIssue[] = [];\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst toolbar = document.createElement(\"div\");\n\ntoolbar.className = \"example-controls-container\";\n\nconst controlsRow = document.createElement(\"div\");\n\ncontrolsRow.className = \"controls\";\n\nconst submitBtn = document.createElement(\"button\");\n\nsubmitBtn.type = \"button\";\nsubmitBtn.textContent = \"Submit orders\";\n\ncontrolsRow.appendChild(submitBtn);\ntoolbar.appendChild(controlsRow);\ncontainer.before(toolbar);\n\nconst summaryEl = document.createElement(\"div\");\n\nsummaryEl.className = \"example-controls-container validation-summary\";\nsummaryEl.setAttribute(\"aria-live\", \"polite\");\n\nconst summaryTitle = document.createElement(\"p\");\n\nsummaryTitle.className = \"validation-summary__title\";\nsummaryTitle.textContent = \"Validation issues\";\n\nconst summaryList = document.createElement(\"ul\");\n\nsummaryList.className = \"validation-summary__list\";\n\nsummaryEl.appendChild(summaryTitle);\nsummaryEl.appendChild(summaryList);\ncontainer.after(summaryEl);\n\nfunction renderSummary(issues: ValidationIssue[]): void {\n  summaryList.innerHTML = issues\n    .map(\n      (issue) =>\n        `<li>Row ${issue.row + 1}, ${COLUMN_LABELS[issue.col]}: ${issue.message}</li>`,\n    )\n    .join(\"\");\n}\n\nfunction clearHighlights(instance: Handsontable): void {\n  invalidCells.forEach((key) => {\n    const [r, c] = key.split(\":\").map(Number);\n\n    instance.removeCellMeta(r, c, \"className\");\n    instance.removeCellMeta(r, c, \"title\");\n  });\n  invalidCells.clear();\n}\n\nfunction applyHighlights(instance: Handsontable, issues: ValidationIssue[]): void {\n  issues.forEach((issue) => {\n    instance.setCellMeta(issue.row, issue.col, \"className\", \"htInvalid\");\n    instance.setCellMeta(issue.row, issue.col, \"title\", issue.message);\n    invalidCells.add(cellKey(issue.row, issue.col));\n  });\n  instance.render();\n}\n\nconst hot = new Handsontable(container, {\n  data: [\n    { item: \"Widget A\", qty: 2, price: 19.99 },\n    { item: \"\", qty: 1, price: 5 },\n    { item: \"Gadget\", qty: -1, price: 12 },\n    { item: \"Cable\", qty: 3, price: 0 },\n  ],\n  colHeaders: COLUMN_LABELS,\n  columns: [\n    { data: \"item\", type: \"text\", width: 180 },\n    { data: \"qty\", type: \"numeric\", width: 100 },\n    { data: \"price\", type: \"numeric\", numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n  ],\n  rowHeaders: true,\n  height: \"auto\",\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n  afterRenderer(TD, row, col) {\n    TD.style.backgroundColor = invalidCells.has(cellKey(row, col))\n      ? \"var(--ht-cell-error-background-color, #ffe4e4)\"\n      : \"\";\n  },\n  afterChange(changes, source) {\n    if (source === \"loadData\" || !changes) {\n      return;\n    }\n\n    let touched = false;\n\n    for (const change of changes) {\n      const [row, prop] = change;\n      const col =\n        typeof prop === \"string\" ? this.propToCol(prop) : (prop as number);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        continue;\n      }\n\n      const key = cellKey(row, col);\n\n      if (!invalidCells.has(key)) {\n        continue;\n      }\n\n      this.removeCellMeta(row, col, \"className\");\n      this.removeCellMeta(row, col, \"title\");\n      invalidCells.delete(key);\n      lastIssues = lastIssues.filter((i) => !(i.row === row && i.col === col));\n      touched = true;\n    }\n\n    if (touched) {\n      renderSummary(lastIssues);\n      this.render();\n    }\n  },\n});\n\nsubmitBtn.addEventListener(\"click\", () => {\n  clearHighlights(hot);\n\n  const issues: ValidationIssue[] = [];\n\n  for (let row = 0; row < hot.countRows(); row++) {\n    for (let col = 0; col < hot.countCols(); col++) {\n      const rule = validationRules[col];\n\n      if (!rule) {\n        continue;\n      }\n\n      const value = hot.getDataAtCell(row, col);\n      const message = rule(value);\n\n      if (message !== null) {\n        issues.push({ row, col, message });\n      }\n    }\n  }\n\n  lastIssues = issues;\n  renderSummary(issues);\n  applyHighlights(hot, issues);\n});\n\nrenderSummary([]);\n\n// eslint-disable-next-line no-unused-vars -- instance wired by event handlers and closures\nvoid hot;","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#example1 .handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/javascript/example1.ts","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\n\nregisterAllModules();\n\ntype ValidationRule = (value: unknown) => string | null;\n\nconst COLUMN_LABELS = [\"Item\", \"Quantity\", \"Unit price\"];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, ValidationRule> = {\n  0: (value) => {\n    const text = String(value ?? \"\").trim();\n\n    return text.length > 0 ? null : \"Item name is required\";\n  },\n  1: (value) => {\n    if (value === null || value === \"\") {\n      return \"Quantity is required\";\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : \"Quantity must be a positive whole number\";\n  },\n  2: (value) => {\n    if (value === null || value === \"\") {\n      return \"Unit price is required\";\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 ? null : \"Unit price must be greater than 0\";\n  },\n};\n\ninterface ValidationIssue {\n  row: number;\n  col: number;\n  message: string;\n}\n\nconst invalidCells = new Set<string>();\nlet lastIssues: ValidationIssue[] = [];\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst toolbar = document.createElement(\"div\");\n\ntoolbar.className = \"example-controls-container\";\n\nconst controlsRow = document.createElement(\"div\");\n\ncontrolsRow.className = \"controls\";\n\nconst submitBtn = document.createElement(\"button\");\n\nsubmitBtn.type = \"button\";\nsubmitBtn.textContent = \"Submit orders\";\n\ncontrolsRow.appendChild(submitBtn);\ntoolbar.appendChild(controlsRow);\ncontainer.before(toolbar);\n\nconst summaryEl = document.createElement(\"div\");\n\nsummaryEl.className = \"example-controls-container validation-summary\";\nsummaryEl.setAttribute(\"aria-live\", \"polite\");\n\nconst summaryTitle = document.createElement(\"p\");\n\nsummaryTitle.className = \"validation-summary__title\";\nsummaryTitle.textContent = \"Validation issues\";\n\nconst summaryList = document.createElement(\"ul\");\n\nsummaryList.className = \"validation-summary__list\";\n\nsummaryEl.appendChild(summaryTitle);\nsummaryEl.appendChild(summaryList);\ncontainer.after(summaryEl);\n\nfunction renderSummary(issues: ValidationIssue[]): void {\n  summaryList.innerHTML = issues\n    .map(\n      (issue) =>\n        `<li>Row ${issue.row + 1}, ${COLUMN_LABELS[issue.col]}: ${issue.message}</li>`,\n    )\n    .join(\"\");\n}\n\nfunction clearHighlights(instance: Handsontable): void {\n  invalidCells.forEach((key) => {\n    const [r, c] = key.split(\":\").map(Number);\n\n    instance.removeCellMeta(r, c, \"className\");\n    instance.removeCellMeta(r, c, \"title\");\n  });\n  invalidCells.clear();\n}\n\nfunction applyHighlights(instance: Handsontable, issues: ValidationIssue[]): void {\n  issues.forEach((issue) => {\n    instance.setCellMeta(issue.row, issue.col, \"className\", \"htInvalid\");\n    instance.setCellMeta(issue.row, issue.col, \"title\", issue.message);\n    invalidCells.add(cellKey(issue.row, issue.col));\n  });\n  instance.render();\n}\n\nconst hot = new Handsontable(container, {\n  data: [\n    { item: \"Widget A\", qty: 2, price: 19.99 },\n    { item: \"\", qty: 1, price: 5 },\n    { item: \"Gadget\", qty: -1, price: 12 },\n    { item: \"Cable\", qty: 3, price: 0 },\n  ],\n  colHeaders: COLUMN_LABELS,\n  columns: [\n    { data: \"item\", type: \"text\", width: 180 },\n    { data: \"qty\", type: \"numeric\", width: 100 },\n    { data: \"price\", type: \"numeric\", numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n  ],\n  rowHeaders: true,\n  height: \"auto\",\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n  afterRenderer(TD, row, col) {\n    TD.style.backgroundColor = invalidCells.has(cellKey(row, col))\n      ? \"var(--ht-cell-error-background-color, #ffe4e4)\"\n      : \"\";\n  },\n  afterChange(changes, source) {\n    if (source === \"loadData\" || !changes) {\n      return;\n    }\n\n    let touched = false;\n\n    for (const change of changes) {\n      const [row, prop] = change;\n      const col =\n        typeof prop === \"string\" ? this.propToCol(prop) : (prop as number);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        continue;\n      }\n\n      const key = cellKey(row, col);\n\n      if (!invalidCells.has(key)) {\n        continue;\n      }\n\n      this.removeCellMeta(row, col, \"className\");\n      this.removeCellMeta(row, col, \"title\");\n      invalidCells.delete(key);\n      lastIssues = lastIssues.filter((i) => !(i.row === row && i.col === col));\n      touched = true;\n    }\n\n    if (touched) {\n      renderSummary(lastIssues);\n      this.render();\n    }\n  },\n});\n\nsubmitBtn.addEventListener(\"click\", () => {\n  clearHighlights(hot);\n\n  const issues: ValidationIssue[] = [];\n\n  for (let row = 0; row < hot.countRows(); row++) {\n    for (let col = 0; col < hot.countCols(); col++) {\n      const rule = validationRules[col];\n\n      if (!rule) {\n        continue;\n      }\n\n      const value = hot.getDataAtCell(row, col);\n      const message = rule(value);\n\n      if (message !== null) {\n        issues.push({ row, col, message });\n      }\n    }\n  }\n\n  lastIssues = issues;\n  renderSummary(issues);\n  applyHighlights(hot, issues);\n});\n\nrenderSummary([]);\n\n// eslint-disable-next-line no-unused-vars -- instance wired by event handlers and closures\nvoid hot;","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n#example1 .handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/javascript/example1.ts","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json
index 9c4b4a24b..279d53563 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\nconst COLUMN_LABELS = ['Item', 'Quantity', 'Unit price'];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, (value: unknown) => string | null> = {\n  0: (value) => {\n    const text = String(value ?? '').trim();\n\n    return text.length > 0 ? null : 'Item name is required';\n  },\n  1: (value) => {\n    if (value === null || value === '') {\n      return 'Quantity is required';\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : 'Quantity must be a positive whole number';\n  },\n  2: (value) => {\n    if (value === null || value === '') {\n      return 'Unit price is required';\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 ? null : 'Unit price must be greater than 0';\n  },\n};\n\ninterface Issue {\n  row: number;\n  col: number;\n  message: string;\n}\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\nconst initialData = [\n  { item: 'Widget A', qty: 2, price: 19.99 },\n  { item: '', qty: 1, price: 5 },\n  { item: 'Gadget', qty: -1, price: 12 },\n  { item: 'Cable', qty: 3, price: 0 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const invalidCellsRef = useRef<Set<string>>(new Set());\n  const [issues, setIssues] = useState<Issue[]>([]);\n\n  function afterRenderer(TD: HTMLTableCellElement, row: number, col: number): void {\n    TD.style.backgroundColor = invalidCellsRef.current.has(cellKey(row, col))\n      ? 'var(--ht-cell-error-background-color, #ffe4e4)'\n      : '';\n  }\n\n  function afterChange(\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot || source === 'loadData' || !changes) {\n      return;\n    }\n\n    let touched = false;\n\n    for (const change of changes) {\n      const [row, prop] = change;\n      const col = typeof prop === 'string' ? hot.propToCol(prop) : (prop as number);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        continue;\n      }\n\n      const key = cellKey(row, col);\n\n      if (!invalidCellsRef.current.has(key)) {\n        continue;\n      }\n\n      hot.removeCellMeta(row, col, 'className');\n      hot.removeCellMeta(row, col, 'title');\n      invalidCellsRef.current.delete(key);\n      touched = true;\n    }\n\n    if (touched) {\n      setIssues((prev) =>\n        prev.filter((i) => invalidCellsRef.current.has(cellKey(i.row, i.col)))\n      );\n      hot.render();\n    }\n  }\n\n  function handleSubmit(): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    invalidCellsRef.current.forEach((key) => {\n      const [r, c] = key.split(':').map(Number);\n\n      hot.removeCellMeta(r, c, 'className');\n      hot.removeCellMeta(r, c, 'title');\n    });\n    invalidCellsRef.current.clear();\n\n    const newIssues: Issue[] = [];\n\n    for (let row = 0; row < hot.countRows(); row++) {\n      for (let col = 0; col < hot.countCols(); col++) {\n        const rule = validationRules[col];\n\n        if (!rule) {\n          continue;\n        }\n\n        const value = hot.getDataAtCell(row, col);\n        const message = rule(value);\n\n        if (message !== null) {\n          newIssues.push({ row, col, message });\n        }\n      }\n    }\n\n    newIssues.forEach((issue) => {\n      hot.setCellMeta(issue.row, issue.col, 'className', 'htInvalid');\n      hot.setCellMeta(issue.row, issue.col, 'title', issue.message);\n      invalidCellsRef.current.add(cellKey(issue.row, issue.col));\n    });\n\n    hot.render();\n    setIssues(newIssues);\n  }\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleSubmit}>\n            Submit orders\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={initialData}\n        colHeaders={COLUMN_LABELS}\n        columns={[\n          { data: 'item', type: 'text', width: 180 },\n          { data: 'qty', type: 'numeric', width: 100 },\n          { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        afterRenderer={afterRenderer}\n        afterChange={afterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div className=\"example-controls-container validation-summary\" aria-live=\"polite\">\n        <p className=\"validation-summary__title\">Validation issues</p>\n        <ul className=\"validation-summary__list\">\n          {issues.map((issue) => (\n            <li key={cellKey(issue.row, issue.col)}>\n              Row {issue.row + 1}, {COLUMN_LABELS[issue.col]}: {issue.message}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/react/example1.tsx","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Editing Validation ▸ Row validation with error summary · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\nconst COLUMN_LABELS = ['Item', 'Quantity', 'Unit price'];\n\n/** Column index -> returns `null` when valid, otherwise an error message. */\nconst validationRules: Record<number, (value: unknown) => string | null> = {\n  0: (value) => {\n    const text = String(value ?? '').trim();\n\n    return text.length > 0 ? null : 'Item name is required';\n  },\n  1: (value) => {\n    if (value === null || value === '') {\n      return 'Quantity is required';\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 && Number.isInteger(n)\n      ? null\n      : 'Quantity must be a positive whole number';\n  },\n  2: (value) => {\n    if (value === null || value === '') {\n      return 'Unit price is required';\n    }\n\n    const n = Number(value);\n\n    return !Number.isNaN(n) && n > 0 ? null : 'Unit price must be greater than 0';\n  },\n};\n\ninterface Issue {\n  row: number;\n  col: number;\n  message: string;\n}\n\nfunction cellKey(row: number, col: number): string {\n  return `${row}:${col}`;\n}\n\nconst initialData = [\n  { item: 'Widget A', qty: 2, price: 19.99 },\n  { item: '', qty: 1, price: 5 },\n  { item: 'Gadget', qty: -1, price: 12 },\n  { item: 'Cable', qty: 3, price: 0 },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const invalidCellsRef = useRef<Set<string>>(new Set());\n  const [issues, setIssues] = useState<Issue[]>([]);\n\n  function afterRenderer(TD: HTMLTableCellElement, row: number, col: number): void {\n    TD.style.backgroundColor = invalidCellsRef.current.has(cellKey(row, col))\n      ? 'var(--ht-cell-error-background-color, #ffe4e4)'\n      : '';\n  }\n\n  function afterChange(\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot || source === 'loadData' || !changes) {\n      return;\n    }\n\n    let touched = false;\n\n    for (const change of changes) {\n      const [row, prop] = change;\n      const col = typeof prop === 'string' ? hot.propToCol(prop) : (prop as number);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        continue;\n      }\n\n      const key = cellKey(row, col);\n\n      if (!invalidCellsRef.current.has(key)) {\n        continue;\n      }\n\n      hot.removeCellMeta(row, col, 'className');\n      hot.removeCellMeta(row, col, 'title');\n      invalidCellsRef.current.delete(key);\n      touched = true;\n    }\n\n    if (touched) {\n      setIssues((prev) =>\n        prev.filter((i) => invalidCellsRef.current.has(cellKey(i.row, i.col)))\n      );\n      hot.render();\n    }\n  }\n\n  function handleSubmit(): void {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    invalidCellsRef.current.forEach((key) => {\n      const [r, c] = key.split(':').map(Number);\n\n      hot.removeCellMeta(r, c, 'className');\n      hot.removeCellMeta(r, c, 'title');\n    });\n    invalidCellsRef.current.clear();\n\n    const newIssues: Issue[] = [];\n\n    for (let row = 0; row < hot.countRows(); row++) {\n      for (let col = 0; col < hot.countCols(); col++) {\n        const rule = validationRules[col];\n\n        if (!rule) {\n          continue;\n        }\n\n        const value = hot.getDataAtCell(row, col);\n        const message = rule(value);\n\n        if (message !== null) {\n          newIssues.push({ row, col, message });\n        }\n      }\n    }\n\n    newIssues.forEach((issue) => {\n      hot.setCellMeta(issue.row, issue.col, 'className', 'htInvalid');\n      hot.setCellMeta(issue.row, issue.col, 'title', issue.message);\n      invalidCellsRef.current.add(cellKey(issue.row, issue.col));\n    });\n\n    hot.render();\n    setIssues(newIssues);\n  }\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleSubmit}>\n            Submit orders\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={initialData}\n        colHeaders={COLUMN_LABELS}\n        columns={[\n          { data: 'item', type: 'text', width: 180 },\n          { data: 'qty', type: 'numeric', width: 100 },\n          { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 }, width: 110 },\n        ]}\n        rowHeaders={true}\n        height=\"auto\"\n        width=\"100%\"\n        afterRenderer={afterRenderer}\n        afterChange={afterChange}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div className=\"example-controls-container validation-summary\" aria-live=\"polite\">\n        <p className=\"validation-summary__title\">Validation issues</p>\n        <ul className=\"validation-summary__list\">\n          {issues.map((issue) => (\n            <li key={cellKey(issue.row, issue.col)}>\n              Row {issue.row + 1}, {COLUMN_LABELS[issue.col]}: {issue.message}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".row-validation-demo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ht-gap, 12px);\n  width: 100%;\n}\n\n.row-validation-demo__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ht-gap, 8px);\n  align-items: center;\n  margin-bottom: 0.75rem;\n}\n\n.row-validation-demo__toolbar button {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-bg-nav, #ffffff);\n  color: var(--sl-color-text, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  line-height: 1.2;\n  padding: 0.4rem 0.75rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s, background-color 0.15s, border-color 0.15s;\n}\n\n.row-validation-demo__toolbar button:not(:disabled):hover {\n  color: var(--sl-color-white, #333333);\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.row-validation-demo__toolbar button:focus-visible {\n  outline: 1px solid var(--sl-color-accent, #1A42E8);\n  outline-offset: 1px;\n}\n\n.row-validation-demo__toolbar button:disabled {\n  color: var(--sl-color-gray-3, #777777);\n  border-color: var(--sl-color-gray-5, #e0e0e0);\n  background: var(--sl-color-gray-7, #f5f5f5);\n  opacity: 0.8;\n  cursor: not-allowed;\n}\n\n.row-validation-demo__summary {\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  padding: 0.75rem 1rem;\n  background: var(--sl-color-bg-nav, #ffffff);\n}\n\n.row-validation-demo__summary-title {\n  margin: 0 0 0.5rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list {\n  list-style: none;\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: var(--sl-text-sm, 0.875rem);\n  color: var(--sl-color-text, #333333);\n}\n\n.validation-summary__list:empty::before {\n  content: 'No issues. Click Submit orders to validate.';\n  display: block;\n  margin-left: -1.25rem;\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.handsontable td.htInvalid {\n  background-color: var(--ht-cell-error-background-color, #ffe4e4) !important;\n}"},"docsPath":"recipes/editing-validation/row-validation-error-summary/react/example1.tsx","breadcrumb":["Recipes","Editing Validation","Row validation with error summary"],"guide":"recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md","guideTitle":"Row validation with error summary","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/editing-validation/row-validation-error-summary","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__angular__example1.ts.json
index a66d6460d..ca4100d72 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-external-search-box></example1-external-search-box></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-external-search-box',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"external-search-input\">Search rows</label>\n        <input\n          id=\"external-search-input\"\n          type=\"search\"\n          placeholder=\"Type to highlight matching cells...\"\n          style=\"min-width: 20rem\"\n          (input)=\"onSearch($event)\"\n        />\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Team', 'Location', 'Email'],\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    search: true,\n  };\n\n  private debounceTimer: ReturnType<typeof setTimeout> | undefined;\n\n  onSearch(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    clearTimeout(this.debounceTimer);\n    this.debounceTimer = setTimeout(() => {\n      const hot = this.hotTable.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      hot.getPlugin('search').query(value);\n      hot.render();\n    }, 120);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-and-search/external-search-box/angular/example1.ts","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-external-search-box></example1-external-search-box></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-external-search-box',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <label for=\"external-search-input\">Search rows</label>\n        <input\n          id=\"external-search-input\"\n          type=\"search\"\n          placeholder=\"Type to highlight matching cells...\"\n          style=\"min-width: 20rem\"\n          (input)=\"onSearch($event)\"\n        />\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Name', 'Team', 'Location', 'Email'],\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    search: true,\n  };\n\n  private debounceTimer: ReturnType<typeof setTimeout> | undefined;\n\n  onSearch(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    clearTimeout(this.debounceTimer);\n    this.debounceTimer = setTimeout(() => {\n      const hot = this.hotTable.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      hot.getPlugin('search').query(value);\n      hot.render();\n    }, 120);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-and-search/external-search-box/angular/example1.ts","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.js.json
index 649ee1c7a..2c90874fd 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst exampleContainer = document.querySelector('#example1');\n\nconst searchWrapper = document.createElement('div');\nsearchWrapper.className = 'example-controls-container';\n\nconst controlsDiv = document.createElement('div');\ncontrolsDiv.className = 'controls';\n\nconst searchLabel = document.createElement('label');\nsearchLabel.setAttribute('for', 'external-search-input');\nsearchLabel.textContent = 'Search rows';\n\nconst searchInput = document.createElement('input');\nsearchInput.id = 'external-search-input';\nsearchInput.type = 'search';\nsearchInput.placeholder = 'Type to highlight matching cells...';\n\nconst hotContainer = document.createElement('div');\n\ncontrolsDiv.appendChild(searchLabel);\ncontrolsDiv.appendChild(searchInput);\nsearchWrapper.appendChild(controlsDiv);\nexampleContainer.appendChild(searchWrapper);\nexampleContainer.appendChild(hotContainer);\n\nconst hot = new Handsontable(hotContainer, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Team', 'Location', 'Email'],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  search: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debounce = (callback, delay = 120) => {\n  let timeoutId;\n\n  return (...args) => {\n    window.clearTimeout(timeoutId);\n    timeoutId = window.setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst runSearch = debounce((value) => {\n  const searchPlugin = hot.getPlugin('search');\n\n  searchPlugin.query(value);\n  hot.render();\n});\n\nsearchInput.addEventListener('input', (event) => {\n  runSearch(event.target.value);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/javascript/example1.js","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst exampleContainer = document.querySelector('#example1');\n\nconst searchWrapper = document.createElement('div');\nsearchWrapper.className = 'example-controls-container';\n\nconst controlsDiv = document.createElement('div');\ncontrolsDiv.className = 'controls';\n\nconst searchLabel = document.createElement('label');\nsearchLabel.setAttribute('for', 'external-search-input');\nsearchLabel.textContent = 'Search rows';\n\nconst searchInput = document.createElement('input');\nsearchInput.id = 'external-search-input';\nsearchInput.type = 'search';\nsearchInput.placeholder = 'Type to highlight matching cells...';\n\nconst hotContainer = document.createElement('div');\n\ncontrolsDiv.appendChild(searchLabel);\ncontrolsDiv.appendChild(searchInput);\nsearchWrapper.appendChild(controlsDiv);\nexampleContainer.appendChild(searchWrapper);\nexampleContainer.appendChild(hotContainer);\n\nconst hot = new Handsontable(hotContainer, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Team', 'Location', 'Email'],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  search: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debounce = (callback, delay = 120) => {\n  let timeoutId;\n\n  return (...args) => {\n    window.clearTimeout(timeoutId);\n    timeoutId = window.setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst runSearch = debounce((value) => {\n  const searchPlugin = hot.getPlugin('search');\n\n  searchPlugin.query(value);\n  hot.render();\n});\n\nsearchInput.addEventListener('input', (event) => {\n  runSearch(event.target.value);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/javascript/example1.js","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json
index a85bff10f..3d1d33e38 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst exampleContainer = document.querySelector('#example1');\n\nif (!exampleContainer) {\n  throw new Error('Example container not found.');\n}\n\nconst searchWrapper = document.createElement('div');\nsearchWrapper.className = 'example-controls-container';\n\nconst controlsDiv = document.createElement('div');\ncontrolsDiv.className = 'controls';\n\nconst searchLabel = document.createElement('label');\nsearchLabel.setAttribute('for', 'external-search-input');\nsearchLabel.textContent = 'Search rows';\n\nconst searchInput = document.createElement('input');\nsearchInput.id = 'external-search-input';\nsearchInput.type = 'search';\nsearchInput.placeholder = 'Type to highlight matching cells...';\n\nconst hotContainer = document.createElement('div');\n\ncontrolsDiv.appendChild(searchLabel);\ncontrolsDiv.appendChild(searchInput);\nsearchWrapper.appendChild(controlsDiv);\nexampleContainer.appendChild(searchWrapper);\nexampleContainer.appendChild(hotContainer);\n\nconst hot = new Handsontable(hotContainer, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Team', 'Location', 'Email'],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  search: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debounce = <T extends (...args: unknown[]) => void>(callback: T, delay = 120) => {\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  return (...args: Parameters<T>) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst runSearch = debounce((value: string) => {\n  const searchPlugin = hot.getPlugin('search');\n\n  searchPlugin.query(value);\n  hot.render();\n});\n\nsearchInput.addEventListener('input', (event) => {\n  runSearch((event.target as HTMLInputElement).value);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/javascript/example1.ts","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst exampleContainer = document.querySelector('#example1');\n\nif (!exampleContainer) {\n  throw new Error('Example container not found.');\n}\n\nconst searchWrapper = document.createElement('div');\nsearchWrapper.className = 'example-controls-container';\n\nconst controlsDiv = document.createElement('div');\ncontrolsDiv.className = 'controls';\n\nconst searchLabel = document.createElement('label');\nsearchLabel.setAttribute('for', 'external-search-input');\nsearchLabel.textContent = 'Search rows';\n\nconst searchInput = document.createElement('input');\nsearchInput.id = 'external-search-input';\nsearchInput.type = 'search';\nsearchInput.placeholder = 'Type to highlight matching cells...';\n\nconst hotContainer = document.createElement('div');\n\ncontrolsDiv.appendChild(searchLabel);\ncontrolsDiv.appendChild(searchInput);\nsearchWrapper.appendChild(controlsDiv);\nexampleContainer.appendChild(searchWrapper);\nexampleContainer.appendChild(hotContainer);\n\nconst hot = new Handsontable(hotContainer, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['Name', 'Team', 'Location', 'Email'],\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  search: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst debounce = <T extends (...args: unknown[]) => void>(callback: T, delay = 120) => {\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  return (...args: Parameters<T>) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst runSearch = debounce((value: string) => {\n  const searchPlugin = hot.getPlugin('search');\n\n  searchPlugin.query(value);\n  hot.render();\n});\n\nsearchInput.addEventListener('input', (event) => {\n  runSearch((event.target as HTMLInputElement).value);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/javascript/example1.ts","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__react__example1.tsx.json
index 9c301c512..9b08de211 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__external-search-box__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst debounce = (callback: (...args: unknown[]) => void, delay = 120) => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n\n  return (...args: unknown[]) => {\n    window.clearTimeout(timeoutId);\n    timeoutId = window.setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const runSearch = useCallback(\n    debounce((value: unknown) => {\n      const hot = hotRef.current?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      hot.getPlugin('search').query(String(value));\n      hot.render();\n    }),\n    []\n  );\n\n  function handleSearchInput(e: React.FormEvent<HTMLInputElement>) {\n    runSearch(e.currentTarget.value);\n  }\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"external-search-input\">Search rows</label>\n          <input\n            id=\"external-search-input\"\n            type=\"search\"\n            placeholder=\"Type to highlight matching cells...\"\n            onInput={handleSearchInput}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        rowHeaders={true}\n        colHeaders={['Name', 'Team', 'Location', 'Email']}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        search={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/react/example1.tsx","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Filtering And Search ▸ External search box · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useCallback } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],\n  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],\n  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],\n  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],\n  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],\n  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],\n];\n/* end:skip-in-preview */\n\nconst debounce = (callback: (...args: unknown[]) => void, delay = 120) => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n\n  return (...args: unknown[]) => {\n    window.clearTimeout(timeoutId);\n    timeoutId = window.setTimeout(() => callback(...args), delay);\n  };\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const runSearch = useCallback(\n    debounce((value: unknown) => {\n      const hot = hotRef.current?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      hot.getPlugin('search').query(String(value));\n      hot.render();\n    }),\n    []\n  );\n\n  function handleSearchInput(e: React.FormEvent<HTMLInputElement>) {\n    runSearch(e.currentTarget.value);\n  }\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <label htmlFor=\"external-search-input\">Search rows</label>\n          <input\n            id=\"external-search-input\"\n            type=\"search\"\n            placeholder=\"Type to highlight matching cells...\"\n            onInput={handleSearchInput}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        rowHeaders={true}\n        colHeaders={['Name', 'Team', 'Location', 'Email']}\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        autoWrapCol={true}\n        search={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#external-search-input {\n  min-width: 20rem;\n}"},"docsPath":"recipes/filtering-and-search/external-search-box/react/example1.tsx","breadcrumb":["Recipes","Filtering And Search","External search box"],"guide":"recipes/filtering-and-search/external-search-box/external-search-box.md","guideTitle":"External search box","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/external-search-box","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json
index e9ac931d4..41fcb7e16 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-highlight-search-matches></example1-highlight-search-matches></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { rendererFactory } from 'handsontable/renderers';\n\ntype RowData = {\n  id: number;\n  title: string;\n  owner: string;\n  status: string;\n};\n\nconst data: RowData[] = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nlet currentSearchTerm = '';\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map(fragment => (\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    ))\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-highlight-search-matches',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search tasks\"\n          (input)=\"onSearch($event)\"\n        />\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    search: true,\n    columns: [\n      { data: 'id', type: 'numeric' },\n      { data: 'title', renderer: highlightRenderer },\n      { data: 'owner', renderer: highlightRenderer },\n      { data: 'status', renderer: highlightRenderer },\n    ],\n  };\n\n  onSearch(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    currentSearchTerm = value;\n    hot.getPlugin('search').query(value);\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/angular/example1.ts","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-highlight-search-matches></example1-highlight-search-matches></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { rendererFactory } from 'handsontable/renderers';\n\ntype RowData = {\n  id: number;\n  title: string;\n  owner: string;\n  status: string;\n};\n\nconst data: RowData[] = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nlet currentSearchTerm = '';\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map(fragment => (\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    ))\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-highlight-search-matches',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <input\n          id=\"search_field\"\n          type=\"search\"\n          placeholder=\"Search tasks\"\n          (input)=\"onSearch($event)\"\n        />\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    search: true,\n    columns: [\n      { data: 'id', type: 'numeric' },\n      { data: 'title', renderer: highlightRenderer },\n      { data: 'owner', renderer: highlightRenderer },\n      { data: 'status', renderer: highlightRenderer },\n    ],\n  };\n\n  onSearch(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    currentSearchTerm = value;\n    hot.getPlugin('search').query(value);\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/angular/example1.ts","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json
index 4e35b7a77..d6ae121ca 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search tasks\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nregisterAllModules();\nconst data = [\n    { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n    { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n    { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n    { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\nlet currentSearchTerm = '';\nfunction escapeRegExp(value) {\n    return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\nfunction escapeHtml(value) {\n    return value\n        .replace(/&/g, '&amp;')\n        .replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;')\n        .replace(/\"/g, '&quot;')\n        .replace(/'/g, '&#39;');\n}\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n    const cellText = value === null || value === undefined ? '' : String(value);\n    const query = currentSearchTerm.trim();\n    if (!query || !cellProperties.isSearchResult) {\n        td.textContent = cellText;\n        return;\n    }\n    const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n    const highlighted = cellText\n        .split(splitter)\n        .map(fragment => (fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)))\n        .join('');\n    td.innerHTML = highlighted;\n});\nconst container = document.querySelector('#example1');\nconst searchField = document.querySelector('#search_field');\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    search: true,\n    columns: [\n        { data: 'id', type: 'numeric' },\n        { data: 'title', renderer: highlightRenderer },\n        { data: 'owner', renderer: highlightRenderer },\n        { data: 'status', renderer: highlightRenderer },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst searchPlugin = hot.getPlugin('search');\nsearchField.addEventListener('input', (event) => {\n    currentSearchTerm = event.target.value;\n    searchPlugin.query(currentSearchTerm);\n    hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/javascript/example1.js","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search tasks\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nregisterAllModules();\nconst data = [\n    { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n    { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n    { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n    { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\nlet currentSearchTerm = '';\nfunction escapeRegExp(value) {\n    return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\nfunction escapeHtml(value) {\n    return value\n        .replace(/&/g, '&amp;')\n        .replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;')\n        .replace(/\"/g, '&quot;')\n        .replace(/'/g, '&#39;');\n}\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n    const cellText = value === null || value === undefined ? '' : String(value);\n    const query = currentSearchTerm.trim();\n    if (!query || !cellProperties.isSearchResult) {\n        td.textContent = cellText;\n        return;\n    }\n    const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n    const highlighted = cellText\n        .split(splitter)\n        .map(fragment => (fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)))\n        .join('');\n    td.innerHTML = highlighted;\n});\nconst container = document.querySelector('#example1');\nconst searchField = document.querySelector('#search_field');\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n    rowHeaders: true,\n    height: 'auto',\n    search: true,\n    columns: [\n        { data: 'id', type: 'numeric' },\n        { data: 'title', renderer: highlightRenderer },\n        { data: 'owner', renderer: highlightRenderer },\n        { data: 'status', renderer: highlightRenderer },\n    ],\n    licenseKey: 'non-commercial-and-evaluation',\n});\nconst searchPlugin = hot.getPlugin('search');\nsearchField.addEventListener('input', (event) => {\n    currentSearchTerm = event.target.value;\n    searchPlugin.query(currentSearchTerm);\n    hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/javascript/example1.js","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json
index b6390cdd5..dd5c09478 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search tasks\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\n\ntype RowData = {\n  id: number;\n  title: string;\n  owner: string;\n  status: string;\n};\n\nconst data: RowData[] = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nlet currentSearchTerm = '';\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map(fragment => (\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    ))\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\nconst container = document.querySelector('#example1')!;\nconst searchField = document.querySelector('#search_field')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  search: true,\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'title', renderer: highlightRenderer },\n    { data: 'owner', renderer: highlightRenderer },\n    { data: 'status', renderer: highlightRenderer },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchPlugin: Search = hot.getPlugin('search');\n\nsearchField.addEventListener('input', (event) => {\n  currentSearchTerm = (event.target as HTMLInputElement).value;\n  searchPlugin.query(currentSearchTerm);\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/javascript/example1.ts","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <input id=\"search_field\" type=\"search\" placeholder=\"Search tasks\">\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Search } from 'handsontable/plugins';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\n\ntype RowData = {\n  id: number;\n  title: string;\n  owner: string;\n  status: string;\n};\n\nconst data: RowData[] = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nlet currentSearchTerm = '';\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map(fragment => (\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    ))\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\nconst container = document.querySelector('#example1')!;\nconst searchField = document.querySelector('#search_field')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Title', 'Owner', 'Status'],\n  rowHeaders: true,\n  height: 'auto',\n  search: true,\n  columns: [\n    { data: 'id', type: 'numeric' },\n    { data: 'title', renderer: highlightRenderer },\n    { data: 'owner', renderer: highlightRenderer },\n    { data: 'status', renderer: highlightRenderer },\n  ],\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst searchPlugin: Search = hot.getPlugin('search');\n\nsearchField.addEventListener('input', (event) => {\n  currentSearchTerm = (event.target as HTMLInputElement).value;\n  searchPlugin.query(currentSearchTerm);\n  hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/javascript/example1.ts","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json
index 43a423817..a461777c8 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\n\nconst data = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nlet currentSearchTerm = '';\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map((fragment) =>\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    )\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  function handleSearchInput(e: React.FormEvent<HTMLInputElement>) {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    currentSearchTerm = e.currentTarget.value;\n    hot.getPlugin('search').query(currentSearchTerm);\n    hot.render();\n  }\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            type=\"search\"\n            placeholder=\"Search tasks\"\n            onInput={handleSearchInput}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Title', 'Owner', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        search={true}\n        columns={[\n          { data: 'id', type: 'numeric' },\n          { data: 'title', renderer: highlightRenderer },\n          { data: 'owner', renderer: highlightRenderer },\n          { data: 'status', renderer: highlightRenderer },\n        ]}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/react/example1.tsx","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Filtering And Search ▸ Highlight search matches · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\n\nconst data = [\n  { id: 101, title: 'Search API docs', owner: 'Alex', status: 'In progress' },\n  { id: 102, title: 'Renderer refactor', owner: 'Mia', status: 'Review' },\n  { id: 103, title: 'Fix keyboard shortcut', owner: 'Noah', status: 'Done' },\n  { id: 104, title: 'Search UX tests', owner: 'Ava', status: 'In progress' },\n];\n\nlet currentSearchTerm = '';\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nconst highlightRenderer = rendererFactory(({ td, value, cellProperties }) => {\n  const cellText = value === null || value === undefined ? '' : String(value);\n  const query = currentSearchTerm.trim();\n\n  if (!query || !cellProperties.isSearchResult) {\n    td.textContent = cellText;\n    return;\n  }\n\n  const splitter = new RegExp(`(${escapeRegExp(query)})`, 'gi');\n  const highlighted = cellText\n    .split(splitter)\n    .map((fragment) =>\n      fragment.toLocaleLowerCase() === query.toLocaleLowerCase()\n        ? `<mark>${escapeHtml(fragment)}</mark>`\n        : escapeHtml(fragment)\n    )\n    .join('');\n\n  td.innerHTML = highlighted;\n});\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  function handleSearchInput(e: React.FormEvent<HTMLInputElement>) {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    currentSearchTerm = e.currentTarget.value;\n    hot.getPlugin('search').query(currentSearchTerm);\n    hot.render();\n  }\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <input\n            type=\"search\"\n            placeholder=\"Search tasks\"\n            onInput={handleSearchInput}\n          />\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Title', 'Owner', 'Status']}\n        rowHeaders={true}\n        height=\"auto\"\n        search={true}\n        columns={[\n          { data: 'id', type: 'numeric' },\n          { data: 'title', renderer: highlightRenderer },\n          { data: 'owner', renderer: highlightRenderer },\n          { data: 'status', renderer: highlightRenderer },\n        ]}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/filtering-and-search/highlight-search-matches/react/example1.tsx","breadcrumb":["Recipes","Filtering And Search","Highlight search matches"],"guide":"recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md","guideTitle":"Highlight search matches","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-and-search/highlight-search-matches","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json
index 741752234..4e93c7c61 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-multi-column-filter-panel></example1-multi-column-filter-panel></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Product = {\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n};\n\nconst sourceData: Product[] = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-multi-column-filter-panel',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"filter-panel\">\n        <label class=\"filter-label filter-label--wide\">\n          Product name\n          <input type=\"text\" [value]=\"enteredName\" placeholder=\"Contains...\" (input)=\"onNameFilter($event)\" />\n        </label>\n        <label class=\"filter-label filter-label--wide\">\n          Category\n          <select [value]=\"selectedCategory\" (change)=\"onCategoryFilter($event)\">\n            <option value=\"\">All categories</option>\n            <option value=\"Bikes\">Bikes</option>\n            <option value=\"Safety\">Safety</option>\n            <option value=\"Components\">Components</option>\n            <option value=\"Accessories\">Accessories</option>\n            <option value=\"Maintenance\">Maintenance</option>\n          </select>\n        </label>\n        <label class=\"filter-label\">\n          Min price\n          <input type=\"number\" min=\"0\" [value]=\"minPrice\" placeholder=\"0\" (input)=\"onMinPriceFilter($event)\" />\n        </label>\n        <label class=\"filter-label\">\n          Max price\n          <input type=\"number\" min=\"0\" [value]=\"maxPrice\" placeholder=\"2500\" (input)=\"onMaxPriceFilter($event)\" />\n        </label>\n        <button type=\"button\" (click)=\"clearFilters()\">Clear all filters</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = sourceData;\n\n  readonly gridSettings: GridSettings = {\n    columns: [\n      { data: 'name', type: 'text', title: 'Product' },\n      { data: 'category', type: 'text', title: 'Category' },\n      { data: 'price', type: 'numeric', title: 'Price' },\n      { data: 'stock', type: 'numeric', title: 'Stock' },\n    ],\n    colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n    rowHeaders: true,\n    filters: true,\n    dropdownMenu: false,\n    width: '100%',\n    height: 320,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  enteredName = '';\n  selectedCategory = '';\n  minPrice = '';\n  maxPrice = '';\n\n  onNameFilter(event: Event): void {\n    this.enteredName = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  onCategoryFilter(event: Event): void {\n    this.selectedCategory = (event.target as HTMLSelectElement).value;\n    this.applyFilters();\n  }\n\n  onMinPriceFilter(event: Event): void {\n    this.minPrice = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  onMaxPriceFilter(event: Event): void {\n    this.maxPrice = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  clearFilters(): void {\n    this.enteredName = '';\n    this.selectedCategory = '';\n    this.minPrice = '';\n    this.maxPrice = '';\n\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n    filtersPlugin.filter();\n    hot.render();\n  }\n\n  private applyFilters(): void {\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n\n    if (this.enteredName) {\n      filtersPlugin.addCondition(0, 'contains', [this.enteredName]);\n    }\n\n    if (this.selectedCategory) {\n      filtersPlugin.addCondition(1, 'eq', [this.selectedCategory]);\n    }\n\n    if (this.minPrice && this.maxPrice) {\n      const lowerBound = Number(this.minPrice);\n      const upperBound = Number(this.maxPrice);\n\n      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n      }\n    } else if (this.minPrice) {\n      const lowerBound = Number(this.minPrice);\n\n      if (Number.isFinite(lowerBound)) {\n        filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n      }\n    } else if (this.maxPrice) {\n      const upperBound = Number(this.maxPrice);\n\n      if (Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'lte', [upperBound]);\n      }\n    }\n\n    filtersPlugin.filter();\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/angular/example1.ts","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-multi-column-filter-panel></example1-multi-column-filter-panel></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Product = {\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n};\n\nconst sourceData: Product[] = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-multi-column-filter-panel',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"filter-panel\">\n        <label class=\"filter-label filter-label--wide\">\n          Product name\n          <input type=\"text\" [value]=\"enteredName\" placeholder=\"Contains...\" (input)=\"onNameFilter($event)\" />\n        </label>\n        <label class=\"filter-label filter-label--wide\">\n          Category\n          <select [value]=\"selectedCategory\" (change)=\"onCategoryFilter($event)\">\n            <option value=\"\">All categories</option>\n            <option value=\"Bikes\">Bikes</option>\n            <option value=\"Safety\">Safety</option>\n            <option value=\"Components\">Components</option>\n            <option value=\"Accessories\">Accessories</option>\n            <option value=\"Maintenance\">Maintenance</option>\n          </select>\n        </label>\n        <label class=\"filter-label\">\n          Min price\n          <input type=\"number\" min=\"0\" [value]=\"minPrice\" placeholder=\"0\" (input)=\"onMinPriceFilter($event)\" />\n        </label>\n        <label class=\"filter-label\">\n          Max price\n          <input type=\"number\" min=\"0\" [value]=\"maxPrice\" placeholder=\"2500\" (input)=\"onMaxPriceFilter($event)\" />\n        </label>\n        <button type=\"button\" (click)=\"clearFilters()\">Clear all filters</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = sourceData;\n\n  readonly gridSettings: GridSettings = {\n    columns: [\n      { data: 'name', type: 'text', title: 'Product' },\n      { data: 'category', type: 'text', title: 'Category' },\n      { data: 'price', type: 'numeric', title: 'Price' },\n      { data: 'stock', type: 'numeric', title: 'Stock' },\n    ],\n    colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n    rowHeaders: true,\n    filters: true,\n    dropdownMenu: false,\n    width: '100%',\n    height: 320,\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n\n  enteredName = '';\n  selectedCategory = '';\n  minPrice = '';\n  maxPrice = '';\n\n  onNameFilter(event: Event): void {\n    this.enteredName = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  onCategoryFilter(event: Event): void {\n    this.selectedCategory = (event.target as HTMLSelectElement).value;\n    this.applyFilters();\n  }\n\n  onMinPriceFilter(event: Event): void {\n    this.minPrice = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  onMaxPriceFilter(event: Event): void {\n    this.maxPrice = (event.target as HTMLInputElement).value.trim();\n    this.applyFilters();\n  }\n\n  clearFilters(): void {\n    this.enteredName = '';\n    this.selectedCategory = '';\n    this.minPrice = '';\n    this.maxPrice = '';\n\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n    filtersPlugin.filter();\n    hot.render();\n  }\n\n  private applyFilters(): void {\n    const hot = this.hotTable.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n\n    if (this.enteredName) {\n      filtersPlugin.addCondition(0, 'contains', [this.enteredName]);\n    }\n\n    if (this.selectedCategory) {\n      filtersPlugin.addCondition(1, 'eq', [this.selectedCategory]);\n    }\n\n    if (this.minPrice && this.maxPrice) {\n      const lowerBound = Number(this.minPrice);\n      const upperBound = Number(this.maxPrice);\n\n      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n      }\n    } else if (this.minPrice) {\n      const lowerBound = Number(this.minPrice);\n\n      if (Number.isFinite(lowerBound)) {\n        filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n      }\n    } else if (this.maxPrice) {\n      const upperBound = Number(this.maxPrice);\n\n      if (Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'lte', [upperBound]);\n      }\n    }\n\n    filtersPlugin.filter();\n    hot.render();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/angular/example1.ts","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json
index 0f15ffa12..44af69d3b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst sourceData = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1');\n\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\">\n    <div class=\"filter-panel\">\n      <label class=\"filter-label filter-label--wide\">\n        Product name\n        <input id=\"nameFilter\" type=\"text\" placeholder=\"Contains...\" />\n      </label>\n      <label class=\"filter-label filter-label--wide\">\n        Category\n        <select id=\"categoryFilter\">\n          <option value=\"\">All categories</option>\n          <option value=\"Bikes\">Bikes</option>\n          <option value=\"Safety\">Safety</option>\n          <option value=\"Components\">Components</option>\n          <option value=\"Accessories\">Accessories</option>\n          <option value=\"Maintenance\">Maintenance</option>\n        </select>\n      </label>\n      <label class=\"filter-label\">\n        Min price\n        <input id=\"minPriceFilter\" type=\"number\" min=\"0\" placeholder=\"0\" />\n      </label>\n      <label class=\"filter-label\">\n        Max price\n        <input id=\"maxPriceFilter\" type=\"number\" min=\"0\" placeholder=\"2500\" />\n      </label>\n      <button id=\"clearFilters\" type=\"button\">Clear all filters</button>\n    </div>\n  </div>\n  <div id=\"hot\"></div>\n`;\n\nconst container = rootContainer.querySelector('#hot');\n\nconst hot = new Handsontable(container, {\n  data: sourceData,\n  columns: [\n    { data: 'name', type: 'text', title: 'Product' },\n    { data: 'category', type: 'text', title: 'Category' },\n    { data: 'price', type: 'numeric', title: 'Price' },\n    { data: 'stock', type: 'numeric', title: 'Stock' },\n  ],\n  colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n  rowHeaders: true,\n  filters: true,\n  dropdownMenu: false,\n  width: '100%',\n  height: 320,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst filtersPlugin = hot.getPlugin('filters');\n\nconst categoryFilter = rootContainer.querySelector('#categoryFilter');\nconst nameFilter = rootContainer.querySelector('#nameFilter');\nconst minPriceFilter = rootContainer.querySelector('#minPriceFilter');\nconst maxPriceFilter = rootContainer.querySelector('#maxPriceFilter');\nconst clearFiltersButton = rootContainer.querySelector('#clearFilters');\n\nfunction applyFilters() {\n  const selectedCategory = categoryFilter.value;\n  const enteredName = nameFilter.value.trim();\n  const minPrice = minPriceFilter.value.trim();\n  const maxPrice = maxPriceFilter.value.trim();\n\n  filtersPlugin.clearConditions();\n\n  if (selectedCategory) {\n    filtersPlugin.addCondition(1, 'eq', [selectedCategory]);\n  }\n\n  if (enteredName) {\n    filtersPlugin.addCondition(0, 'contains', [enteredName]);\n  }\n\n  if (minPrice && maxPrice) {\n    const lowerBound = Number(minPrice);\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n    }\n  } else if (minPrice) {\n    const lowerBound = Number(minPrice);\n\n    if (Number.isFinite(lowerBound)) {\n      filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n    }\n  } else if (maxPrice) {\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'lte', [upperBound]);\n    }\n  }\n\n  filtersPlugin.filter();\n  hot.render();\n}\n\nfunction clearFilters() {\n  categoryFilter.value = '';\n  nameFilter.value = '';\n  minPriceFilter.value = '';\n  maxPriceFilter.value = '';\n\n  filtersPlugin.clearConditions();\n  filtersPlugin.filter();\n  hot.render();\n}\n\ncategoryFilter.addEventListener('change', applyFilters);\nnameFilter.addEventListener('input', applyFilters);\nminPriceFilter.addEventListener('input', applyFilters);\nmaxPriceFilter.addEventListener('input', applyFilters);\nclearFiltersButton.addEventListener('click', clearFilters);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}\n\n.example-controls-container .filter-label--wide {\n  min-width: 160px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/javascript/example1.js","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst sourceData = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1');\n\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\">\n    <div class=\"filter-panel\">\n      <label class=\"filter-label filter-label--wide\">\n        Product name\n        <input id=\"nameFilter\" type=\"text\" placeholder=\"Contains...\" />\n      </label>\n      <label class=\"filter-label filter-label--wide\">\n        Category\n        <select id=\"categoryFilter\">\n          <option value=\"\">All categories</option>\n          <option value=\"Bikes\">Bikes</option>\n          <option value=\"Safety\">Safety</option>\n          <option value=\"Components\">Components</option>\n          <option value=\"Accessories\">Accessories</option>\n          <option value=\"Maintenance\">Maintenance</option>\n        </select>\n      </label>\n      <label class=\"filter-label\">\n        Min price\n        <input id=\"minPriceFilter\" type=\"number\" min=\"0\" placeholder=\"0\" />\n      </label>\n      <label class=\"filter-label\">\n        Max price\n        <input id=\"maxPriceFilter\" type=\"number\" min=\"0\" placeholder=\"2500\" />\n      </label>\n      <button id=\"clearFilters\" type=\"button\">Clear all filters</button>\n    </div>\n  </div>\n  <div id=\"hot\"></div>\n`;\n\nconst container = rootContainer.querySelector('#hot');\n\nconst hot = new Handsontable(container, {\n  data: sourceData,\n  columns: [\n    { data: 'name', type: 'text', title: 'Product' },\n    { data: 'category', type: 'text', title: 'Category' },\n    { data: 'price', type: 'numeric', title: 'Price' },\n    { data: 'stock', type: 'numeric', title: 'Stock' },\n  ],\n  colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n  rowHeaders: true,\n  filters: true,\n  dropdownMenu: false,\n  width: '100%',\n  height: 320,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst filtersPlugin = hot.getPlugin('filters');\n\nconst categoryFilter = rootContainer.querySelector('#categoryFilter');\nconst nameFilter = rootContainer.querySelector('#nameFilter');\nconst minPriceFilter = rootContainer.querySelector('#minPriceFilter');\nconst maxPriceFilter = rootContainer.querySelector('#maxPriceFilter');\nconst clearFiltersButton = rootContainer.querySelector('#clearFilters');\n\nfunction applyFilters() {\n  const selectedCategory = categoryFilter.value;\n  const enteredName = nameFilter.value.trim();\n  const minPrice = minPriceFilter.value.trim();\n  const maxPrice = maxPriceFilter.value.trim();\n\n  filtersPlugin.clearConditions();\n\n  if (selectedCategory) {\n    filtersPlugin.addCondition(1, 'eq', [selectedCategory]);\n  }\n\n  if (enteredName) {\n    filtersPlugin.addCondition(0, 'contains', [enteredName]);\n  }\n\n  if (minPrice && maxPrice) {\n    const lowerBound = Number(minPrice);\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n    }\n  } else if (minPrice) {\n    const lowerBound = Number(minPrice);\n\n    if (Number.isFinite(lowerBound)) {\n      filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n    }\n  } else if (maxPrice) {\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'lte', [upperBound]);\n    }\n  }\n\n  filtersPlugin.filter();\n  hot.render();\n}\n\nfunction clearFilters() {\n  categoryFilter.value = '';\n  nameFilter.value = '';\n  minPriceFilter.value = '';\n  maxPriceFilter.value = '';\n\n  filtersPlugin.clearConditions();\n  filtersPlugin.filter();\n  hot.render();\n}\n\ncategoryFilter.addEventListener('change', applyFilters);\nnameFilter.addEventListener('input', applyFilters);\nminPriceFilter.addEventListener('input', applyFilters);\nmaxPriceFilter.addEventListener('input', applyFilters);\nclearFiltersButton.addEventListener('click', clearFilters);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}\n\n.example-controls-container .filter-label--wide {\n  min-width: 160px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/javascript/example1.js","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json
index c2b0216c6..fa3bf0ec3 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n};\n\n/* start:skip-in-preview */\nconst sourceData: Product[] = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1')!;\n\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\">\n    <div class=\"filter-panel\">\n      <label class=\"filter-label filter-label--wide\">\n        Product name\n        <input id=\"nameFilter\" type=\"text\" placeholder=\"Contains...\" />\n      </label>\n      <label class=\"filter-label filter-label--wide\">\n        Category\n        <select id=\"categoryFilter\">\n          <option value=\"\">All categories</option>\n          <option value=\"Bikes\">Bikes</option>\n          <option value=\"Safety\">Safety</option>\n          <option value=\"Components\">Components</option>\n          <option value=\"Accessories\">Accessories</option>\n          <option value=\"Maintenance\">Maintenance</option>\n        </select>\n      </label>\n      <label class=\"filter-label\">\n        Min price\n        <input id=\"minPriceFilter\" type=\"number\" min=\"0\" placeholder=\"0\" />\n      </label>\n      <label class=\"filter-label\">\n        Max price\n        <input id=\"maxPriceFilter\" type=\"number\" min=\"0\" placeholder=\"2500\" />\n      </label>\n      <button id=\"clearFilters\" type=\"button\">Clear all filters</button>\n    </div>\n  </div>\n  <div id=\"hot\"></div>\n`;\n\nconst container = rootContainer.querySelector('#hot')!;\n\nconst hot = new Handsontable(container, {\n  data: sourceData,\n  columns: [\n    { data: 'name', type: 'text', title: 'Product' },\n    { data: 'category', type: 'text', title: 'Category' },\n    { data: 'price', type: 'numeric', title: 'Price' },\n    { data: 'stock', type: 'numeric', title: 'Stock' },\n  ],\n  colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n  rowHeaders: true,\n  filters: true,\n  dropdownMenu: false,\n  width: '100%',\n  height: 320,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst filtersPlugin = hot.getPlugin('filters');\n\nconst categoryFilter = rootContainer.querySelector('#categoryFilter') as HTMLSelectElement;\nconst nameFilter = rootContainer.querySelector('#nameFilter') as HTMLInputElement;\nconst minPriceFilter = rootContainer.querySelector('#minPriceFilter') as HTMLInputElement;\nconst maxPriceFilter = rootContainer.querySelector('#maxPriceFilter') as HTMLInputElement;\nconst clearFiltersButton = rootContainer.querySelector('#clearFilters') as HTMLButtonElement;\n\nfunction applyFilters(): void {\n  const selectedCategory = categoryFilter.value;\n  const enteredName = nameFilter.value.trim();\n  const minPrice = minPriceFilter.value.trim();\n  const maxPrice = maxPriceFilter.value.trim();\n\n  filtersPlugin.clearConditions();\n\n  if (selectedCategory) {\n    filtersPlugin.addCondition(1, 'eq', [selectedCategory]);\n  }\n\n  if (enteredName) {\n    filtersPlugin.addCondition(0, 'contains', [enteredName]);\n  }\n\n  if (minPrice && maxPrice) {\n    const lowerBound = Number(minPrice);\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n    }\n  } else if (minPrice) {\n    const lowerBound = Number(minPrice);\n\n    if (Number.isFinite(lowerBound)) {\n      filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n    }\n  } else if (maxPrice) {\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'lte', [upperBound]);\n    }\n  }\n\n  filtersPlugin.filter();\n  hot.render();\n}\n\nfunction clearFilters(): void {\n  categoryFilter.value = '';\n  nameFilter.value = '';\n  minPriceFilter.value = '';\n  maxPriceFilter.value = '';\n\n  filtersPlugin.clearConditions();\n  filtersPlugin.filter();\n  hot.render();\n}\n\ncategoryFilter.addEventListener('change', applyFilters);\nnameFilter.addEventListener('input', applyFilters);\nminPriceFilter.addEventListener('input', applyFilters);\nmaxPriceFilter.addEventListener('input', applyFilters);\nclearFiltersButton.addEventListener('click', clearFilters);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}\n\n.example-controls-container .filter-label--wide {\n  min-width: 160px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/javascript/example1.ts","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Product = {\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n};\n\n/* start:skip-in-preview */\nconst sourceData: Product[] = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\nconst rootContainer = document.querySelector('#example1')!;\n\nrootContainer.innerHTML = `\n  <div class=\"example-controls-container\">\n    <div class=\"filter-panel\">\n      <label class=\"filter-label filter-label--wide\">\n        Product name\n        <input id=\"nameFilter\" type=\"text\" placeholder=\"Contains...\" />\n      </label>\n      <label class=\"filter-label filter-label--wide\">\n        Category\n        <select id=\"categoryFilter\">\n          <option value=\"\">All categories</option>\n          <option value=\"Bikes\">Bikes</option>\n          <option value=\"Safety\">Safety</option>\n          <option value=\"Components\">Components</option>\n          <option value=\"Accessories\">Accessories</option>\n          <option value=\"Maintenance\">Maintenance</option>\n        </select>\n      </label>\n      <label class=\"filter-label\">\n        Min price\n        <input id=\"minPriceFilter\" type=\"number\" min=\"0\" placeholder=\"0\" />\n      </label>\n      <label class=\"filter-label\">\n        Max price\n        <input id=\"maxPriceFilter\" type=\"number\" min=\"0\" placeholder=\"2500\" />\n      </label>\n      <button id=\"clearFilters\" type=\"button\">Clear all filters</button>\n    </div>\n  </div>\n  <div id=\"hot\"></div>\n`;\n\nconst container = rootContainer.querySelector('#hot')!;\n\nconst hot = new Handsontable(container, {\n  data: sourceData,\n  columns: [\n    { data: 'name', type: 'text', title: 'Product' },\n    { data: 'category', type: 'text', title: 'Category' },\n    { data: 'price', type: 'numeric', title: 'Price' },\n    { data: 'stock', type: 'numeric', title: 'Stock' },\n  ],\n  colHeaders: ['Product', 'Category', 'Price', 'Stock'],\n  rowHeaders: true,\n  filters: true,\n  dropdownMenu: false,\n  width: '100%',\n  height: 320,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst filtersPlugin = hot.getPlugin('filters');\n\nconst categoryFilter = rootContainer.querySelector('#categoryFilter') as HTMLSelectElement;\nconst nameFilter = rootContainer.querySelector('#nameFilter') as HTMLInputElement;\nconst minPriceFilter = rootContainer.querySelector('#minPriceFilter') as HTMLInputElement;\nconst maxPriceFilter = rootContainer.querySelector('#maxPriceFilter') as HTMLInputElement;\nconst clearFiltersButton = rootContainer.querySelector('#clearFilters') as HTMLButtonElement;\n\nfunction applyFilters(): void {\n  const selectedCategory = categoryFilter.value;\n  const enteredName = nameFilter.value.trim();\n  const minPrice = minPriceFilter.value.trim();\n  const maxPrice = maxPriceFilter.value.trim();\n\n  filtersPlugin.clearConditions();\n\n  if (selectedCategory) {\n    filtersPlugin.addCondition(1, 'eq', [selectedCategory]);\n  }\n\n  if (enteredName) {\n    filtersPlugin.addCondition(0, 'contains', [enteredName]);\n  }\n\n  if (minPrice && maxPrice) {\n    const lowerBound = Number(minPrice);\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n    }\n  } else if (minPrice) {\n    const lowerBound = Number(minPrice);\n\n    if (Number.isFinite(lowerBound)) {\n      filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n    }\n  } else if (maxPrice) {\n    const upperBound = Number(maxPrice);\n\n    if (Number.isFinite(upperBound)) {\n      filtersPlugin.addCondition(2, 'lte', [upperBound]);\n    }\n  }\n\n  filtersPlugin.filter();\n  hot.render();\n}\n\nfunction clearFilters(): void {\n  categoryFilter.value = '';\n  nameFilter.value = '';\n  minPriceFilter.value = '';\n  maxPriceFilter.value = '';\n\n  filtersPlugin.clearConditions();\n  filtersPlugin.filter();\n  hot.render();\n}\n\ncategoryFilter.addEventListener('change', applyFilters);\nnameFilter.addEventListener('input', applyFilters);\nminPriceFilter.addEventListener('input', applyFilters);\nmaxPriceFilter.addEventListener('input', applyFilters);\nclearFiltersButton.addEventListener('click', clearFilters);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}\n\n.example-controls-container .filter-label--wide {\n  min-width: 160px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/javascript/example1.ts","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json
index 980fbb39c..318c9a235 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, type ReactNode } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst sourceData = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\ntype FilterLabelProps = {\n  label: string;\n  children: ReactNode;\n};\n\nconst FilterLabel = ({ label, children }: FilterLabelProps) => (\n  <label className=\"filter-label\">\n    {label}\n    {children}\n  </label>\n);\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const nameRef = useRef<HTMLInputElement>(null);\n  const categoryRef = useRef<HTMLSelectElement>(null);\n  const minPriceRef = useRef<HTMLInputElement>(null);\n  const maxPriceRef = useRef<HTMLInputElement>(null);\n\n  const applyFilters = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const name = nameRef.current?.value ?? '';\n    const category = categoryRef.current?.value ?? '';\n    const minPrice = minPriceRef.current?.value ?? '';\n    const maxPrice = maxPriceRef.current?.value ?? '';\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n\n    if (category) {\n      filtersPlugin.addCondition(1, 'eq', [category]);\n    }\n\n    if (name.trim()) {\n      filtersPlugin.addCondition(0, 'contains', [name.trim()]);\n    }\n\n    if (minPrice && maxPrice) {\n      const lowerBound = Number(minPrice);\n      const upperBound = Number(maxPrice);\n\n      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n      }\n    } else if (minPrice) {\n      const lowerBound = Number(minPrice);\n\n      if (Number.isFinite(lowerBound)) {\n        filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n      }\n    } else if (maxPrice) {\n      const upperBound = Number(maxPrice);\n\n      if (Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'lte', [upperBound]);\n      }\n    }\n\n    filtersPlugin.filter();\n  };\n\n  const clearFilters = () => {\n    if (nameRef.current) nameRef.current.value = '';\n    if (categoryRef.current) categoryRef.current.value = '';\n    if (minPriceRef.current) minPriceRef.current.value = '';\n    if (maxPriceRef.current) maxPriceRef.current.value = '';\n\n    applyFilters();\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"filter-panel\">\n          <FilterLabel label=\"Product name\">\n            <input\n              ref={nameRef}\n              type=\"text\"\n              placeholder=\"Contains...\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <FilterLabel label=\"Category\">\n            <select ref={categoryRef} onChange={applyFilters}>\n              <option value=\"\">All categories</option>\n              <option value=\"Bikes\">Bikes</option>\n              <option value=\"Safety\">Safety</option>\n              <option value=\"Components\">Components</option>\n              <option value=\"Accessories\">Accessories</option>\n              <option value=\"Maintenance\">Maintenance</option>\n            </select>\n          </FilterLabel>\n          <FilterLabel label=\"Min price\">\n            <input\n              ref={minPriceRef}\n              type=\"number\"\n              min=\"0\"\n              placeholder=\"0\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <FilterLabel label=\"Max price\">\n            <input\n              ref={maxPriceRef}\n              type=\"number\"\n              min=\"0\"\n              placeholder=\"2500\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <button type=\"button\" onClick={clearFilters}>\n            Clear all filters\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={sourceData}\n        columns={[\n          { data: 'name', type: 'text', title: 'Product' },\n          { data: 'category', type: 'text', title: 'Category' },\n          { data: 'price', type: 'numeric', title: 'Price' },\n          { data: 'stock', type: 'numeric', title: 'Stock' },\n        ]}\n        colHeaders={['Product', 'Category', 'Price', 'Stock']}\n        rowHeaders={true}\n        filters={true}\n        dropdownMenu={false}\n        width=\"100%\"\n        height={320}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/react/example1.tsx","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Filtering Search ▸ Multi-column filter panel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, type ReactNode } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst sourceData = [\n  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },\n  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },\n  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },\n  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },\n  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },\n  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },\n  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },\n  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },\n  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },\n  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },\n];\n/* end:skip-in-preview */\n\ntype FilterLabelProps = {\n  label: string;\n  children: ReactNode;\n};\n\nconst FilterLabel = ({ label, children }: FilterLabelProps) => (\n  <label className=\"filter-label\">\n    {label}\n    {children}\n  </label>\n);\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const nameRef = useRef<HTMLInputElement>(null);\n  const categoryRef = useRef<HTMLSelectElement>(null);\n  const minPriceRef = useRef<HTMLInputElement>(null);\n  const maxPriceRef = useRef<HTMLInputElement>(null);\n\n  const applyFilters = () => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const name = nameRef.current?.value ?? '';\n    const category = categoryRef.current?.value ?? '';\n    const minPrice = minPriceRef.current?.value ?? '';\n    const maxPrice = maxPriceRef.current?.value ?? '';\n    const filtersPlugin = hot.getPlugin('filters');\n\n    filtersPlugin.clearConditions();\n\n    if (category) {\n      filtersPlugin.addCondition(1, 'eq', [category]);\n    }\n\n    if (name.trim()) {\n      filtersPlugin.addCondition(0, 'contains', [name.trim()]);\n    }\n\n    if (minPrice && maxPrice) {\n      const lowerBound = Number(minPrice);\n      const upperBound = Number(maxPrice);\n\n      if (Number.isFinite(lowerBound) && Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'between', [lowerBound, upperBound]);\n      }\n    } else if (minPrice) {\n      const lowerBound = Number(minPrice);\n\n      if (Number.isFinite(lowerBound)) {\n        filtersPlugin.addCondition(2, 'gte', [lowerBound]);\n      }\n    } else if (maxPrice) {\n      const upperBound = Number(maxPrice);\n\n      if (Number.isFinite(upperBound)) {\n        filtersPlugin.addCondition(2, 'lte', [upperBound]);\n      }\n    }\n\n    filtersPlugin.filter();\n  };\n\n  const clearFilters = () => {\n    if (nameRef.current) nameRef.current.value = '';\n    if (categoryRef.current) categoryRef.current.value = '';\n    if (minPriceRef.current) minPriceRef.current.value = '';\n    if (maxPriceRef.current) maxPriceRef.current.value = '';\n\n    applyFilters();\n  };\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"filter-panel\">\n          <FilterLabel label=\"Product name\">\n            <input\n              ref={nameRef}\n              type=\"text\"\n              placeholder=\"Contains...\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <FilterLabel label=\"Category\">\n            <select ref={categoryRef} onChange={applyFilters}>\n              <option value=\"\">All categories</option>\n              <option value=\"Bikes\">Bikes</option>\n              <option value=\"Safety\">Safety</option>\n              <option value=\"Components\">Components</option>\n              <option value=\"Accessories\">Accessories</option>\n              <option value=\"Maintenance\">Maintenance</option>\n            </select>\n          </FilterLabel>\n          <FilterLabel label=\"Min price\">\n            <input\n              ref={minPriceRef}\n              type=\"number\"\n              min=\"0\"\n              placeholder=\"0\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <FilterLabel label=\"Max price\">\n            <input\n              ref={maxPriceRef}\n              type=\"number\"\n              min=\"0\"\n              placeholder=\"2500\"\n              onChange={applyFilters}\n            />\n          </FilterLabel>\n          <button type=\"button\" onClick={clearFilters}>\n            Clear all filters\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={sourceData}\n        columns={[\n          { data: 'name', type: 'text', title: 'Product' },\n          { data: 'category', type: 'text', title: 'Category' },\n          { data: 'price', type: 'numeric', title: 'Price' },\n          { data: 'stock', type: 'numeric', title: 'Stock' },\n        ]}\n        colHeaders={['Product', 'Category', 'Price', 'Stock']}\n        rowHeaders={true}\n        filters={true}\n        dropdownMenu={false}\n        width=\"100%\"\n        height={320}\n        autoWrapRow={true}\n        autoWrapCol={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".filter-panel {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: flex-end;\n}\n\n/* Stack label text above the control (overrides the inline-flex horizontal\n   layout from interactive-example.css) */\n.example-controls-container .filter-label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.25rem;\n  min-width: 120px;\n}"},"docsPath":"recipes/filtering-search/multi-column-filter-panel/react/example1.tsx","breadcrumb":["Recipes","Filtering Search","Multi-column filter panel"],"guide":"recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md","guideTitle":"Multi-column filter panel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/filtering-search/multi-column-filter-panel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__angular__example1.ts.json
index c589b920d..dfe3b5875 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-export-to-pdf></example1-export-to-pdf></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\n/* start:skip-in-preview */\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-export-to-pdf',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"exportToPdf()\">Export to PDF</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Qty', 'Unit price', 'Line total'],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n  };\n\n  exportToPdf(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const body: any = hot.getData();\n    const colCount = hot.countCols();\n    const head = [\n      Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n\n    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n    autoTable(doc, {\n      head,\n      body,\n      styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n      headStyles: {\n        fillColor: [26, 66, 232],\n        textColor: 255,\n        fontStyle: 'bold',\n      },\n      alternateRowStyles: { fillColor: [245, 247, 250] },\n      margin: { top: 14, left: 12, right: 12, bottom: 14 },\n      showHead: 'everyPage',\n    });\n\n    doc.save('export.pdf');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/import-export/export-to-pdf/angular/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-export-to-pdf></example1-export-to-pdf></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\n/* start:skip-in-preview */\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-export-to-pdf',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"exportToPdf()\">Export to PDF</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Qty', 'Unit price', 'Line total'],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n  };\n\n  exportToPdf(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const body: any = hot.getData();\n    const colCount = hot.countCols();\n    const head = [\n      Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n\n    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n    autoTable(doc, {\n      head,\n      body,\n      styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n      headStyles: {\n        fillColor: [26, 66, 232],\n        textColor: 255,\n        fontStyle: 'bold',\n      },\n      alternateRowStyles: { fillColor: [245, 247, 250] },\n      margin: { top: 14, left: 12, right: 12, bottom: 14 },\n      showHead: 'everyPage',\n    });\n\n    doc.save('export.pdf');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/import-export/export-to-pdf/angular/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.js.json
index 3f7919a74..4bd454067 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"exportPdfBtn\">Export to PDF</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\nregisterAllModules();\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n    `SKU-${1000 + row}`,\n    `Product ${row + 1}`,\n    row % 12 + 1,\n    (9.99 + row * 0.25).toFixed(2),\n    ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 320,\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n});\nfunction exportGridToPdf() {\n    const body = hot.getData();\n    const colCount = hot.countCols();\n    const head = [\n        Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n    const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n    autoTable(doc, {\n        head,\n        body,\n        styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n        headStyles: {\n            fillColor: [26, 66, 232],\n            textColor: 255,\n            fontStyle: \"bold\",\n        },\n        alternateRowStyles: { fillColor: [245, 247, 250] },\n        margin: { top: 14, left: 12, right: 12, bottom: 14 },\n        showHead: \"everyPage\",\n    });\n    doc.save(\"export.pdf\");\n}\ndocument.querySelector(\"#exportPdfBtn\").addEventListener(\"click\", exportGridToPdf);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.js","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"exportPdfBtn\">Export to PDF</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\nregisterAllModules();\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n    `SKU-${1000 + row}`,\n    `Product ${row + 1}`,\n    row % 12 + 1,\n    (9.99 + row * 0.25).toFixed(2),\n    ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\nconst hot = new Handsontable(container, {\n    data,\n    colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n    columnSorting: true,\n    rowHeaders: true,\n    height: 320,\n    width: \"100%\",\n    licenseKey: \"non-commercial-and-evaluation\",\n});\nfunction exportGridToPdf() {\n    const body = hot.getData();\n    const colCount = hot.countCols();\n    const head = [\n        Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n    const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n    autoTable(doc, {\n        head,\n        body,\n        styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n        headStyles: {\n            fillColor: [26, 66, 232],\n            textColor: 255,\n            fontStyle: \"bold\",\n        },\n        alternateRowStyles: { fillColor: [245, 247, 250] },\n        margin: { top: 14, left: 12, right: 12, bottom: 14 },\n        showHead: \"everyPage\",\n    });\n    doc.save(\"export.pdf\");\n}\ndocument.querySelector(\"#exportPdfBtn\").addEventListener(\"click\", exportGridToPdf);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.js","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.ts.json
index 5f258b9d7..67a6139e9 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"exportPdfBtn\">Export to PDF</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n  columnSorting: true,\n  rowHeaders: true,\n  height: 320,\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n});\n\nfunction exportGridToPdf() {\n  const body = hot.getData();\n  const colCount = hot.countCols();\n  const head = [\n    Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n  ];\n\n  const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n\n  autoTable(doc, {\n    head,\n    body,\n    styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n    headStyles: {\n      fillColor: [26, 66, 232],\n      textColor: 255,\n      fontStyle: \"bold\",\n    },\n    alternateRowStyles: { fillColor: [245, 247, 250] },\n    margin: { top: 14, left: 12, right: 12, bottom: 14 },\n    showHead: \"everyPage\",\n  });\n\n  doc.save(\"export.pdf\");\n}\n\ndocument.querySelector(\"#exportPdfBtn\")!.addEventListener(\"click\", exportGridToPdf);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button type=\"button\" id=\"exportPdfBtn\">Export to PDF</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n  columnSorting: true,\n  rowHeaders: true,\n  height: 320,\n  width: \"100%\",\n  licenseKey: \"non-commercial-and-evaluation\",\n});\n\nfunction exportGridToPdf() {\n  const body = hot.getData();\n  const colCount = hot.countCols();\n  const head = [\n    Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n  ];\n\n  const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n\n  autoTable(doc, {\n    head,\n    body,\n    styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n    headStyles: {\n      fillColor: [26, 66, 232],\n      textColor: 255,\n      fontStyle: \"bold\",\n    },\n    alternateRowStyles: { fillColor: [245, 247, 250] },\n    margin: { top: 14, left: 12, right: 12, bottom: 14 },\n    showHead: \"everyPage\",\n  });\n\n  doc.save(\"export.pdf\");\n}\n\ndocument.querySelector(\"#exportPdfBtn\")!.addEventListener(\"click\", exportGridToPdf);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__react__example1.tsx.json
index 9d430349b..eead8e766 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__export-to-pdf__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data: (string | number)[][] = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const exportGridToPdf = (): void => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const body = hot.getData() as (string | number)[][];\n    const colCount = hot.countCols();\n    const head: string[][] = [\n      Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n\n    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n    autoTable(doc, {\n      head,\n      body,\n      styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n      headStyles: {\n        fillColor: [26, 66, 232],\n        textColor: 255,\n        fontStyle: 'bold',\n      },\n      alternateRowStyles: { fillColor: [245, 247, 250] },\n      margin: { top: 14, left: 12, right: 12, bottom: 14 },\n      showHead: 'everyPage',\n    });\n\n    doc.save('export.pdf');\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={exportGridToPdf}>\n            Export to PDF\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Product', 'Qty', 'Unit price', 'Line total']}\n        columnSorting={true}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/import-export/export-to-pdf/react/example1.tsx","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"jspdf\": \"4.2.1\",\n    \"jspdf-autotable\": \"5.0.8\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data: (string | number)[][] = Array.from({ length: ROWS }, (_, row) => [\n  `SKU-${1000 + row}`,\n  `Product ${row + 1}`,\n  row % 12 + 1,\n  (9.99 + row * 0.25).toFixed(2),\n  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const exportGridToPdf = (): void => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    const body = hot.getData() as (string | number)[][];\n    const colCount = hot.countCols();\n    const head: string[][] = [\n      Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n    ];\n\n    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n    autoTable(doc, {\n      head,\n      body,\n      styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n      headStyles: {\n        fillColor: [26, 66, 232],\n        textColor: 255,\n        fontStyle: 'bold',\n      },\n      alternateRowStyles: { fillColor: [245, 247, 250] },\n      margin: { top: 14, left: 12, right: 12, bottom: 14 },\n      showHead: 'everyPage',\n    });\n\n    doc.save('export.pdf');\n  };\n\n  return (\n    <>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={exportGridToPdf}>\n            Export to PDF\n          </button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Product', 'Qty', 'Unit price', 'Line total']}\n        columnSorting={true}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/import-export/export-to-pdf/react/example1.tsx","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__angular__example1.ts.json
index fa765415c..91a617a16 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"devDependencies\": {\n    \"@types/papaparse\": \"5.5.2\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-import-csv-excel></example1-import-csv-excel></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Papa from 'papaparse';\nimport readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\ninterface ParsedPayload {\n  headers: string[];\n  rows: Record<string, unknown>[];\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction normalizeCellValue(value: unknown): unknown {\n  if (value === null || value === undefined) {\n    return null;\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n  const text = String(value).trim();\n  return text === '' ? null : text;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n  const fields = (results.meta.fields ?? []).filter((f) => f !== undefined && f !== '');\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n  const rows = results.data.map((row) => {\n    const out: Record<string, unknown> = {};\n    for (const key of fields) {\n      out[key] = normalizeCellValue(row[key]);\n    }\n    return out;\n  });\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string): ParsedPayload {\n  const trimmed = text.trim();\n  if (!trimmed) {\n    throw new Error('The input is empty.');\n  }\n  const parsed = Papa.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n  return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    Papa.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: Papa.ParseResult<Record<string, unknown>>) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: Error) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n  try {\n    sheets = await readXlsxFile(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n  const firstSheet = sheets[0];\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n  const matrix: unknown[][] = firstSheet.data;\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n  const rawHeader = (matrix[0] as unknown[]).map((cell) => String(cell ?? '').trim());\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, unknown>[] = [];\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r] as unknown[];\n    const allEmpty = !line || (line as unknown[]).every((c) => normalizeCellValue(c) === null);\n    if (allEmpty) {\n      continue;\n    }\n    const obj: Record<string, unknown> = {};\n    for (let c = 0; c < keys.length; c++) {\n      obj[keys[c]] = normalizeCellValue(line[c]);\n    }\n    rows.push(obj);\n  }\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n  if (ext === 'csv') {\n    return parseCsvFile(file);\n  }\n  if (ext === 'xlsx') {\n    return parseXlsxFile(file);\n  }\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-import-csv-excel',\n  template: `\n    <div class=\"import-csv-excel-wrap\">\n      <div\n        class=\"import-dropzone\"\n        [class.import-dropzone--active]=\"isDragOver\"\n        tabindex=\"0\"\n        role=\"button\"\n        aria-label=\"Drop a CSV or Excel file here\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n        <div class=\"import-actions\">\n          <label class=\"import-file-label\">\n            <span>Choose file</span>\n            <input\n              type=\"file\"\n              accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n              (change)=\"onFileChange($event)\"\n              #fileInput\n            />\n          </label>\n          <button type=\"button\" class=\"import-sample-btn\" (click)=\"loadSampleData()\">Load sample data</button>\n        </div>\n      </div>\n\n      @if (errorMessage) {\n        <div class=\"import-msg import-msg--error\">{{ errorMessage }}</div>\n      }\n\n      @if (gridData.length === 0) {\n        <div class=\"import-empty\">\n          <span class=\"import-empty-icon\" aria-hidden=\"true\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n              <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n            </svg>\n          </span>\n          <p class=\"import-empty-title\">No data loaded yet</p>\n          <p class=\"import-empty-text\">\n            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n          </p>\n        </div>\n      } @else {\n        <hot-table [data]=\"gridData\" [settings]=\"gridSettings\"></hot-table>\n      }\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly zone = inject(NgZone);\n\n  isDragOver = false;\n  errorMessage = '';\n  gridData: Record<string, unknown>[] = [];\n\n  private readonly SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\n  gridSettings: GridSettings = {\n    colHeaders: [],\n    columns: [],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n  };\n\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver = true;\n  }\n\n  onDragLeave(): void {\n    this.isDragOver = false;\n  }\n\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver = false;\n    const file = event.dataTransfer?.files?.[0];\n    if (file) {\n      this.handleFile(file);\n    }\n  }\n\n  onFileChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.handleFile(file);\n    }\n    input.value = '';\n  }\n\n  async loadSampleData(): Promise<void> {\n    this.errorMessage = '';\n    try {\n      const payload = parseCsvText(this.SAMPLE_CSV);\n      this.loadIntoGrid(payload);\n    } catch (e) {\n      this.errorMessage = e instanceof Error ? e.message : String(e);\n    }\n  }\n\n  private async handleFile(file: File): Promise<void> {\n    this.errorMessage = '';\n    if (file.size === 0) {\n      this.errorMessage = 'The file is empty.';\n      return;\n    }\n    try {\n      const payload = await parseFile(file);\n      this.zone.run(() => this.loadIntoGrid(payload));\n    } catch (e) {\n      this.zone.run(() => {\n        this.errorMessage = e instanceof Error ? e.message : String(e);\n      });\n    }\n  }\n\n  private loadIntoGrid(payload: ParsedPayload): void {\n    const { headers, rows } = payload;\n    this.gridSettings = {\n      ...this.gridSettings,\n      colHeaders: headers,\n      columns: this.columnsFromHeaders(headers, rows),\n    };\n    this.gridData = [...rows];\n  }\n\n  private columnsFromHeaders(headers: string[], rows: Record<string, unknown>[]): GridSettings['columns'] {\n    return headers.map((data) => {\n      const values = rows\n        .map((row) => row[data])\n        .filter((v) => v !== null);\n      if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n        return { data, type: 'numeric' };\n      }\n      if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n        return { data, type: 'checkbox' };\n      }\n      return { data, type: 'text' };\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n  cursor: pointer;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/angular/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"devDependencies\": {\n    \"@types/papaparse\": \"5.5.2\"\n  }\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-import-csv-excel></example1-import-csv-excel></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, NgZone, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Papa from 'papaparse';\nimport readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\ninterface ParsedPayload {\n  headers: string[];\n  rows: Record<string, unknown>[];\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction normalizeCellValue(value: unknown): unknown {\n  if (value === null || value === undefined) {\n    return null;\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n  const text = String(value).trim();\n  return text === '' ? null : text;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n  const fields = (results.meta.fields ?? []).filter((f) => f !== undefined && f !== '');\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n  const rows = results.data.map((row) => {\n    const out: Record<string, unknown> = {};\n    for (const key of fields) {\n      out[key] = normalizeCellValue(row[key]);\n    }\n    return out;\n  });\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string): ParsedPayload {\n  const trimmed = text.trim();\n  if (!trimmed) {\n    throw new Error('The input is empty.');\n  }\n  const parsed = Papa.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n  return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    Papa.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: Papa.ParseResult<Record<string, unknown>>) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: Error) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n  try {\n    sheets = await readXlsxFile(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n  const firstSheet = sheets[0];\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n  const matrix: unknown[][] = firstSheet.data;\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n  const rawHeader = (matrix[0] as unknown[]).map((cell) => String(cell ?? '').trim());\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, unknown>[] = [];\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r] as unknown[];\n    const allEmpty = !line || (line as unknown[]).every((c) => normalizeCellValue(c) === null);\n    if (allEmpty) {\n      continue;\n    }\n    const obj: Record<string, unknown> = {};\n    for (let c = 0; c < keys.length; c++) {\n      obj[keys[c]] = normalizeCellValue(line[c]);\n    }\n    rows.push(obj);\n  }\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n  if (ext === 'csv') {\n    return parseCsvFile(file);\n  }\n  if (ext === 'xlsx') {\n    return parseXlsxFile(file);\n  }\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-import-csv-excel',\n  template: `\n    <div class=\"import-csv-excel-wrap\">\n      <div\n        class=\"import-dropzone\"\n        [class.import-dropzone--active]=\"isDragOver\"\n        tabindex=\"0\"\n        role=\"button\"\n        aria-label=\"Drop a CSV or Excel file here\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave()\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n        <div class=\"import-actions\">\n          <label class=\"import-file-label\">\n            <span>Choose file</span>\n            <input\n              type=\"file\"\n              accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n              (change)=\"onFileChange($event)\"\n              #fileInput\n            />\n          </label>\n          <button type=\"button\" class=\"import-sample-btn\" (click)=\"loadSampleData()\">Load sample data</button>\n        </div>\n      </div>\n\n      @if (errorMessage) {\n        <div class=\"import-msg import-msg--error\">{{ errorMessage }}</div>\n      }\n\n      @if (gridData.length === 0) {\n        <div class=\"import-empty\">\n          <span class=\"import-empty-icon\" aria-hidden=\"true\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n              <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n            </svg>\n          </span>\n          <p class=\"import-empty-title\">No data loaded yet</p>\n          <p class=\"import-empty-text\">\n            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n          </p>\n        </div>\n      } @else {\n        <hot-table [data]=\"gridData\" [settings]=\"gridSettings\"></hot-table>\n      }\n    </div>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  private readonly zone = inject(NgZone);\n\n  isDragOver = false;\n  errorMessage = '';\n  gridData: Record<string, unknown>[] = [];\n\n  private readonly SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\n  gridSettings: GridSettings = {\n    colHeaders: [],\n    columns: [],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n  };\n\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver = true;\n  }\n\n  onDragLeave(): void {\n    this.isDragOver = false;\n  }\n\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver = false;\n    const file = event.dataTransfer?.files?.[0];\n    if (file) {\n      this.handleFile(file);\n    }\n  }\n\n  onFileChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.handleFile(file);\n    }\n    input.value = '';\n  }\n\n  async loadSampleData(): Promise<void> {\n    this.errorMessage = '';\n    try {\n      const payload = parseCsvText(this.SAMPLE_CSV);\n      this.loadIntoGrid(payload);\n    } catch (e) {\n      this.errorMessage = e instanceof Error ? e.message : String(e);\n    }\n  }\n\n  private async handleFile(file: File): Promise<void> {\n    this.errorMessage = '';\n    if (file.size === 0) {\n      this.errorMessage = 'The file is empty.';\n      return;\n    }\n    try {\n      const payload = await parseFile(file);\n      this.zone.run(() => this.loadIntoGrid(payload));\n    } catch (e) {\n      this.zone.run(() => {\n        this.errorMessage = e instanceof Error ? e.message : String(e);\n      });\n    }\n  }\n\n  private loadIntoGrid(payload: ParsedPayload): void {\n    const { headers, rows } = payload;\n    this.gridSettings = {\n      ...this.gridSettings,\n      colHeaders: headers,\n      columns: this.columnsFromHeaders(headers, rows),\n    };\n    this.gridData = [...rows];\n  }\n\n  private columnsFromHeaders(headers: string[], rows: Record<string, unknown>[]): GridSettings['columns'] {\n    return headers.map((data) => {\n      const values = rows\n        .map((row) => row[data])\n        .filter((v) => v !== null);\n      if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n        return { data, type: 'numeric' };\n      }\n      if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n        return { data, type: 'checkbox' };\n      }\n      return { data, type: 'text' };\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n  cursor: pointer;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/angular/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.js.json
index 50170a91a..7109008aa 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      id=\"import-dropzone\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input id=\"import-file\" type=\"file\" accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\" />\n        </label>\n        <button type=\"button\" id=\"import-load-sample\" class=\"import-sample-btn\">Load sample data</button>\n      </div>\n    </div>\n  \n    <div id=\"import-error\" class=\"import-msg import-msg--error\" hidden></div>\n  \n    <div id=\"import-empty\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.</p>\n    </div>\n  \n    <div id=\"example1\" hidden></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\nconst scriptPromises = new Map();\nfunction loadScript(src) {\n    const cached = scriptPromises.get(src);\n    if (cached) {\n        return cached;\n    }\n    const p = new Promise((resolve, reject) => {\n        const existing = document.querySelector(`script[data-cdn=\"${src}\"]`);\n        if (existing) {\n            existing.addEventListener('load', () => resolve(), { once: true });\n            existing.addEventListener('error', () => reject(new Error(`Failed to load ${src}`)), { once: true });\n            if (existing.getAttribute('data-loaded') === '1') {\n                resolve();\n            }\n            return;\n        }\n        const s = document.createElement('script');\n        s.src = src;\n        s.async = true;\n        s.dataset.cdn = src;\n        s.onload = () => {\n            s.setAttribute('data-loaded', '1');\n            resolve();\n        };\n        s.onerror = () => reject(new Error(`Failed to load ${src}`));\n        document.head.appendChild(s);\n    });\n    scriptPromises.set(src, p);\n    return p;\n}\nasync function ensurePapa() {\n    if (typeof window.Papa !== 'undefined') {\n        return window.Papa;\n    }\n    await loadScript(CDN_PAPAPARSE);\n    if (typeof window.Papa === 'undefined') {\n        throw new Error('PapaParse did not register on window.');\n    }\n    return window.Papa;\n}\nasync function ensureReadExcelFile() {\n    if (typeof window.readXlsxFile !== 'undefined') {\n        return window.readXlsxFile;\n    }\n    await loadScript(CDN_READ_EXCEL_FILE);\n    if (typeof window.readXlsxFile === 'undefined') {\n        throw new Error('read-excel-file did not register on window.');\n    }\n    return window.readXlsxFile;\n}\nfunction extensionOf(name) {\n    const i = name.lastIndexOf('.');\n    return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\nfunction showError(el, message) {\n    if (!el) {\n        return;\n    }\n    el.textContent = message;\n    el.hidden = false;\n}\nfunction clearError(el) {\n    if (!el) {\n        return;\n    }\n    el.textContent = '';\n    el.hidden = true;\n}\nfunction normalizeCellValue(value) {\n    if (value === null || value === undefined) {\n        return null;\n    }\n    if (typeof value === 'number' || typeof value === 'boolean') {\n        return value;\n    }\n    if (value instanceof Date) {\n        return value.toISOString().slice(0, 10);\n    }\n    const text = String(value).trim();\n    return text === '' ? null : text;\n}\nfunction mapRowByHeaders(row, headers) {\n    const out = {};\n    for (const key of headers) {\n        out[key] = normalizeCellValue(row[key]);\n    }\n    return out;\n}\nfunction processPapaResults(results) {\n    if (results.errors.length > 0) {\n        throw new Error(results.errors[0].message || 'CSV parse error.');\n    }\n    const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n    if (fields.length === 0) {\n        throw new Error('No header row found in the CSV.');\n    }\n    const rows = results.data.map((row) => mapRowByHeaders(row, fields));\n    if (rows.length === 0) {\n        throw new Error('No data rows after the header.');\n    }\n    return { headers: fields, rows };\n}\nfunction parseCsvText(text, PapaRef) {\n    const trimmed = text.trim();\n    if (!trimmed) {\n        throw new Error('The file is empty.');\n    }\n    const parsed = PapaRef.parse(trimmed, {\n        header: true,\n        dynamicTyping: true,\n        skipEmptyLines: 'greedy',\n        transformHeader: (h) => h.trim(),\n    });\n    return processPapaResults(parsed);\n}\nasync function parseCsvFile(file, PapaRef) {\n    return new Promise((resolve, reject) => {\n        PapaRef.parse(file, {\n            header: true,\n            dynamicTyping: true,\n            skipEmptyLines: 'greedy',\n            transformHeader: (h) => h.trim(),\n            complete: (results) => {\n                try {\n                    resolve(processPapaResults(results));\n                }\n                catch (e) {\n                    reject(e instanceof Error ? e : new Error(String(e)));\n                }\n            },\n            error: (err) => reject(err instanceof Error ? err : new Error(String(err))),\n        });\n    });\n}\nasync function parseXlsxFile(file, readXlsxFileRef) {\n    let sheets;\n    try {\n        sheets = await readXlsxFileRef(file);\n    }\n    catch {\n        throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n    }\n    const firstSheet = sheets[0];\n    if (!firstSheet) {\n        throw new Error('The workbook has no sheets.');\n    }\n    const matrix = firstSheet.data;\n    if (!matrix.length) {\n        throw new Error('The sheet is empty.');\n    }\n    const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n    if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n        throw new Error('No header row found in the Excel sheet.');\n    }\n    const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n    const rows = [];\n    for (let r = 1; r < matrix.length; r++) {\n        const line = matrix[r];\n        const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n        if (allEmpty) {\n            continue;\n        }\n        const obj = {};\n        for (let c = 0; c < keys.length; c++) {\n            const key = keys[c];\n            const raw = line[c];\n            obj[key] = normalizeCellValue(raw);\n        }\n        rows.push(obj);\n    }\n    if (rows.length === 0) {\n        throw new Error('No data rows after the header.');\n    }\n    return { headers: keys, rows };\n}\nasync function parseFile(file) {\n    const ext = extensionOf(file.name);\n    if (ext === 'csv') {\n        const PapaRef = await ensurePapa();\n        return parseCsvFile(file, PapaRef);\n    }\n    if (ext === 'xlsx') {\n        const readXlsxFileRef = await ensureReadExcelFile();\n        return parseXlsxFile(file, readXlsxFileRef);\n    }\n    throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\nfunction columnsFromHeaders(headers, rows) {\n    return headers.map((data) => {\n        const values = rows\n            .map((row) => row[data])\n            .filter((v) => v !== null);\n        if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n            return { data, type: 'numeric' };\n        }\n        if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n            return { data, type: 'checkbox' };\n        }\n        return { data, type: 'text' };\n    });\n}\nconst gridContainer = document.querySelector('#example1');\nconst emptyEl = document.querySelector('#import-empty');\nconst errEl = document.querySelector('#import-error');\nconst fileInput = document.querySelector('#import-file');\nconst dropzone = document.querySelector('#import-dropzone');\nconst sampleBtn = document.querySelector('#import-load-sample');\nlet hot = null;\nfunction loadIntoGrid({ headers, rows }) {\n    const columns = columnsFromHeaders(headers, rows);\n    if (!hot) {\n        if (emptyEl) {\n            emptyEl.hidden = true;\n        }\n        if (gridContainer) {\n            gridContainer.hidden = false;\n        }\n        hot = new Handsontable(gridContainer, {\n            data: rows,\n            columns,\n            colHeaders: headers,\n            rowHeaders: true,\n            height: 'auto',\n            width: '100%',\n            licenseKey: 'non-commercial-and-evaluation',\n        });\n    }\n    else {\n        hot.updateSettings({ colHeaders: headers, columns });\n        hot.loadData(rows);\n    }\n}\nasync function handleFile(file) {\n    clearError(errEl);\n    if (!file) {\n        return;\n    }\n    if (file.size === 0) {\n        showError(errEl, 'The file is empty.');\n        return;\n    }\n    try {\n        const payload = await parseFile(file);\n        loadIntoGrid(payload);\n    }\n    catch (e) {\n        showError(errEl, e instanceof Error ? e.message : String(e));\n    }\n}\nfileInput?.addEventListener('change', () => {\n    const f = fileInput.files?.[0];\n    handleFile(f);\n    fileInput.value = '';\n});\ndropzone?.addEventListener('dragover', (ev) => {\n    ev.preventDefault();\n    dropzone.classList.add('import-dropzone--active');\n});\ndropzone?.addEventListener('dragleave', () => {\n    dropzone.classList.remove('import-dropzone--active');\n});\ndropzone?.addEventListener('drop', (ev) => {\n    ev.preventDefault();\n    dropzone.classList.remove('import-dropzone--active');\n    const f = ev.dataTransfer?.files?.[0];\n    handleFile(f);\n});\nsampleBtn?.addEventListener('click', async () => {\n    clearError(errEl);\n    try {\n        const PapaRef = await ensurePapa();\n        const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n        loadIntoGrid(payload);\n    }\n    catch (e) {\n        showError(errEl, e instanceof Error ? e.message : String(e));\n    }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty[hidden] {\n  display: none;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}\n\n#example1 {\n  padding: 1rem;\n  min-height: 180px;\n}\n\n#example1[hidden] {\n  display: none;\n}"},"docsPath":"recipes/import-export/import-csv-excel/javascript/example1.js","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      id=\"import-dropzone\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input id=\"import-file\" type=\"file\" accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\" />\n        </label>\n        <button type=\"button\" id=\"import-load-sample\" class=\"import-sample-btn\">Load sample data</button>\n      </div>\n    </div>\n  \n    <div id=\"import-error\" class=\"import-msg import-msg--error\" hidden></div>\n  \n    <div id=\"import-empty\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.</p>\n    </div>\n  \n    <div id=\"example1\" hidden></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\nconst scriptPromises = new Map();\nfunction loadScript(src) {\n    const cached = scriptPromises.get(src);\n    if (cached) {\n        return cached;\n    }\n    const p = new Promise((resolve, reject) => {\n        const existing = document.querySelector(`script[data-cdn=\"${src}\"]`);\n        if (existing) {\n            existing.addEventListener('load', () => resolve(), { once: true });\n            existing.addEventListener('error', () => reject(new Error(`Failed to load ${src}`)), { once: true });\n            if (existing.getAttribute('data-loaded') === '1') {\n                resolve();\n            }\n            return;\n        }\n        const s = document.createElement('script');\n        s.src = src;\n        s.async = true;\n        s.dataset.cdn = src;\n        s.onload = () => {\n            s.setAttribute('data-loaded', '1');\n            resolve();\n        };\n        s.onerror = () => reject(new Error(`Failed to load ${src}`));\n        document.head.appendChild(s);\n    });\n    scriptPromises.set(src, p);\n    return p;\n}\nasync function ensurePapa() {\n    if (typeof window.Papa !== 'undefined') {\n        return window.Papa;\n    }\n    await loadScript(CDN_PAPAPARSE);\n    if (typeof window.Papa === 'undefined') {\n        throw new Error('PapaParse did not register on window.');\n    }\n    return window.Papa;\n}\nasync function ensureReadExcelFile() {\n    if (typeof window.readXlsxFile !== 'undefined') {\n        return window.readXlsxFile;\n    }\n    await loadScript(CDN_READ_EXCEL_FILE);\n    if (typeof window.readXlsxFile === 'undefined') {\n        throw new Error('read-excel-file did not register on window.');\n    }\n    return window.readXlsxFile;\n}\nfunction extensionOf(name) {\n    const i = name.lastIndexOf('.');\n    return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\nfunction showError(el, message) {\n    if (!el) {\n        return;\n    }\n    el.textContent = message;\n    el.hidden = false;\n}\nfunction clearError(el) {\n    if (!el) {\n        return;\n    }\n    el.textContent = '';\n    el.hidden = true;\n}\nfunction normalizeCellValue(value) {\n    if (value === null || value === undefined) {\n        return null;\n    }\n    if (typeof value === 'number' || typeof value === 'boolean') {\n        return value;\n    }\n    if (value instanceof Date) {\n        return value.toISOString().slice(0, 10);\n    }\n    const text = String(value).trim();\n    return text === '' ? null : text;\n}\nfunction mapRowByHeaders(row, headers) {\n    const out = {};\n    for (const key of headers) {\n        out[key] = normalizeCellValue(row[key]);\n    }\n    return out;\n}\nfunction processPapaResults(results) {\n    if (results.errors.length > 0) {\n        throw new Error(results.errors[0].message || 'CSV parse error.');\n    }\n    const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n    if (fields.length === 0) {\n        throw new Error('No header row found in the CSV.');\n    }\n    const rows = results.data.map((row) => mapRowByHeaders(row, fields));\n    if (rows.length === 0) {\n        throw new Error('No data rows after the header.');\n    }\n    return { headers: fields, rows };\n}\nfunction parseCsvText(text, PapaRef) {\n    const trimmed = text.trim();\n    if (!trimmed) {\n        throw new Error('The file is empty.');\n    }\n    const parsed = PapaRef.parse(trimmed, {\n        header: true,\n        dynamicTyping: true,\n        skipEmptyLines: 'greedy',\n        transformHeader: (h) => h.trim(),\n    });\n    return processPapaResults(parsed);\n}\nasync function parseCsvFile(file, PapaRef) {\n    return new Promise((resolve, reject) => {\n        PapaRef.parse(file, {\n            header: true,\n            dynamicTyping: true,\n            skipEmptyLines: 'greedy',\n            transformHeader: (h) => h.trim(),\n            complete: (results) => {\n                try {\n                    resolve(processPapaResults(results));\n                }\n                catch (e) {\n                    reject(e instanceof Error ? e : new Error(String(e)));\n                }\n            },\n            error: (err) => reject(err instanceof Error ? err : new Error(String(err))),\n        });\n    });\n}\nasync function parseXlsxFile(file, readXlsxFileRef) {\n    let sheets;\n    try {\n        sheets = await readXlsxFileRef(file);\n    }\n    catch {\n        throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n    }\n    const firstSheet = sheets[0];\n    if (!firstSheet) {\n        throw new Error('The workbook has no sheets.');\n    }\n    const matrix = firstSheet.data;\n    if (!matrix.length) {\n        throw new Error('The sheet is empty.');\n    }\n    const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n    if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n        throw new Error('No header row found in the Excel sheet.');\n    }\n    const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n    const rows = [];\n    for (let r = 1; r < matrix.length; r++) {\n        const line = matrix[r];\n        const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n        if (allEmpty) {\n            continue;\n        }\n        const obj = {};\n        for (let c = 0; c < keys.length; c++) {\n            const key = keys[c];\n            const raw = line[c];\n            obj[key] = normalizeCellValue(raw);\n        }\n        rows.push(obj);\n    }\n    if (rows.length === 0) {\n        throw new Error('No data rows after the header.');\n    }\n    return { headers: keys, rows };\n}\nasync function parseFile(file) {\n    const ext = extensionOf(file.name);\n    if (ext === 'csv') {\n        const PapaRef = await ensurePapa();\n        return parseCsvFile(file, PapaRef);\n    }\n    if (ext === 'xlsx') {\n        const readXlsxFileRef = await ensureReadExcelFile();\n        return parseXlsxFile(file, readXlsxFileRef);\n    }\n    throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\nfunction columnsFromHeaders(headers, rows) {\n    return headers.map((data) => {\n        const values = rows\n            .map((row) => row[data])\n            .filter((v) => v !== null);\n        if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n            return { data, type: 'numeric' };\n        }\n        if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n            return { data, type: 'checkbox' };\n        }\n        return { data, type: 'text' };\n    });\n}\nconst gridContainer = document.querySelector('#example1');\nconst emptyEl = document.querySelector('#import-empty');\nconst errEl = document.querySelector('#import-error');\nconst fileInput = document.querySelector('#import-file');\nconst dropzone = document.querySelector('#import-dropzone');\nconst sampleBtn = document.querySelector('#import-load-sample');\nlet hot = null;\nfunction loadIntoGrid({ headers, rows }) {\n    const columns = columnsFromHeaders(headers, rows);\n    if (!hot) {\n        if (emptyEl) {\n            emptyEl.hidden = true;\n        }\n        if (gridContainer) {\n            gridContainer.hidden = false;\n        }\n        hot = new Handsontable(gridContainer, {\n            data: rows,\n            columns,\n            colHeaders: headers,\n            rowHeaders: true,\n            height: 'auto',\n            width: '100%',\n            licenseKey: 'non-commercial-and-evaluation',\n        });\n    }\n    else {\n        hot.updateSettings({ colHeaders: headers, columns });\n        hot.loadData(rows);\n    }\n}\nasync function handleFile(file) {\n    clearError(errEl);\n    if (!file) {\n        return;\n    }\n    if (file.size === 0) {\n        showError(errEl, 'The file is empty.');\n        return;\n    }\n    try {\n        const payload = await parseFile(file);\n        loadIntoGrid(payload);\n    }\n    catch (e) {\n        showError(errEl, e instanceof Error ? e.message : String(e));\n    }\n}\nfileInput?.addEventListener('change', () => {\n    const f = fileInput.files?.[0];\n    handleFile(f);\n    fileInput.value = '';\n});\ndropzone?.addEventListener('dragover', (ev) => {\n    ev.preventDefault();\n    dropzone.classList.add('import-dropzone--active');\n});\ndropzone?.addEventListener('dragleave', () => {\n    dropzone.classList.remove('import-dropzone--active');\n});\ndropzone?.addEventListener('drop', (ev) => {\n    ev.preventDefault();\n    dropzone.classList.remove('import-dropzone--active');\n    const f = ev.dataTransfer?.files?.[0];\n    handleFile(f);\n});\nsampleBtn?.addEventListener('click', async () => {\n    clearError(errEl);\n    try {\n        const PapaRef = await ensurePapa();\n        const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n        loadIntoGrid(payload);\n    }\n    catch (e) {\n        showError(errEl, e instanceof Error ? e.message : String(e));\n    }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty[hidden] {\n  display: none;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}\n\n#example1 {\n  padding: 1rem;\n  min-height: 180px;\n}\n\n#example1[hidden] {\n  display: none;\n}"},"docsPath":"recipes/import-export/import-csv-excel/javascript/example1.js","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.ts.json
index 101fc234a..85d4e0aa2 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      id=\"import-dropzone\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input id=\"import-file\" type=\"file\" accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\" />\n        </label>\n        <button type=\"button\" id=\"import-load-sample\" class=\"import-sample-btn\">Load sample data</button>\n      </div>\n    </div>\n  \n    <div id=\"import-error\" class=\"import-msg import-msg--error\" hidden></div>\n  \n    <div id=\"import-empty\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.</p>\n    </div>\n  \n    <div id=\"example1\" hidden></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport Papa from 'papaparse';\nimport type readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\nregisterAllModules();\n\ntype ParsedPayload = {\n  headers: string[];\n  rows: Record<string, string | number | boolean | null>[];\n};\n\ntype ParsedCellValue = string | number | boolean | null;\ntype ParsedRow = Record<string, ParsedCellValue>;\n\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\n\ndeclare global {\n  interface Window {\n    Papa?: typeof Papa;\n    readXlsxFile?: typeof readXlsxFile;\n  }\n}\n\nconst scriptPromises = new Map<string, Promise<void>>();\n\nfunction loadScript(src: string): Promise<void> {\n  const cached = scriptPromises.get(src);\n\n  if (cached) {\n    return cached;\n  }\n\n  const p = new Promise<void>((resolve, reject) => {\n    const existing = document.querySelector<HTMLScriptElement>(`script[data-cdn=\"${src}\"]`);\n\n    if (existing) {\n      existing.addEventListener('load', () => resolve(), { once: true });\n      existing.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load ${src}`)),\n        { once: true },\n      );\n      if (existing.getAttribute('data-loaded') === '1') {\n        resolve();\n      }\n\n      return;\n    }\n\n    const s = document.createElement('script');\n\n    s.src = src;\n    s.async = true;\n    s.dataset.cdn = src;\n    s.onload = () => {\n      s.setAttribute('data-loaded', '1');\n      resolve();\n    };\n    s.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(s);\n  });\n\n  scriptPromises.set(src, p);\n\n  return p;\n}\n\nasync function ensurePapa(): Promise<typeof Papa> {\n  if (typeof window.Papa !== 'undefined') {\n    return window.Papa;\n  }\n\n  await loadScript(CDN_PAPAPARSE);\n\n  if (typeof window.Papa === 'undefined') {\n    throw new Error('PapaParse did not register on window.');\n  }\n\n  return window.Papa;\n}\n\nasync function ensureReadExcelFile(): Promise<typeof readXlsxFile> {\n  if (typeof window.readXlsxFile !== 'undefined') {\n    return window.readXlsxFile;\n  }\n\n  await loadScript(CDN_READ_EXCEL_FILE);\n\n  if (typeof window.readXlsxFile === 'undefined') {\n    throw new Error('read-excel-file did not register on window.');\n  }\n\n  return window.readXlsxFile;\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction showError(el: HTMLElement | null, message: string): void {\n  if (!el) {\n    return;\n  }\n\n  el.textContent = message;\n  el.hidden = false;\n}\n\nfunction clearError(el: HTMLElement | null): void {\n  if (!el) {\n    return;\n  }\n\n  el.textContent = '';\n  el.hidden = true;\n}\n\nfunction normalizeCellValue(value: unknown): ParsedCellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction mapRowByHeaders(row: Record<string, unknown>, headers: string[]): ParsedRow {\n  const out: ParsedRow = {};\n\n  for (const key of headers) {\n    out[key] = normalizeCellValue(row[key]);\n  }\n\n  return out;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = (results.data as Record<string, unknown>[]).map((row) => mapRowByHeaders(row, fields));\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string, PapaRef: typeof Papa): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = PapaRef.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n\n  return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File, PapaRef: typeof Papa): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    PapaRef.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h) => h.trim(),\n      complete: (results) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File, readXlsxFileRef: typeof readXlsxFile): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n\n  try {\n    sheets = await readXlsxFileRef(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix: unknown[][] = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n\n  const rows: Record<string, string | number | boolean | null>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: ParsedRow = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      const key = keys[c];\n      const raw = line[c];\n\n      obj[key] = normalizeCellValue(raw);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    const PapaRef = await ensurePapa();\n\n    return parseCsvFile(file, PapaRef);\n  }\n\n  if (ext === 'xlsx') {\n    const readXlsxFileRef = await ensureReadExcelFile();\n\n    return parseXlsxFile(file, readXlsxFileRef);\n  }\n\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\nfunction columnsFromHeaders(headers: string[], rows: ParsedRow[]): GridSettings['columns'] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v): v is string | number | boolean => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' as const };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' as const };\n    }\n\n    return { data, type: 'text' as const };\n  });\n}\n\nconst gridContainer = document.querySelector<HTMLElement>('#example1')!;\nconst emptyEl = document.querySelector<HTMLElement>('#import-empty');\nconst errEl = document.querySelector<HTMLElement>('#import-error');\nconst fileInput = document.querySelector<HTMLInputElement>('#import-file');\nconst dropzone = document.querySelector<HTMLElement>('#import-dropzone');\nconst sampleBtn = document.querySelector<HTMLButtonElement>('#import-load-sample');\n\nlet hot: Handsontable | null = null;\n\nfunction loadIntoGrid({ headers, rows }: ParsedPayload): void {\n  const columns = columnsFromHeaders(headers, rows);\n\n  if (!hot) {\n    if (emptyEl) {\n      emptyEl.hidden = true;\n    }\n    gridContainer.hidden = false;\n    hot = new Handsontable(gridContainer, {\n      data: rows,\n      columns,\n      colHeaders: headers,\n      rowHeaders: true,\n      height: 'auto',\n      width: '100%',\n      licenseKey: 'non-commercial-and-evaluation',\n    });\n  } else {\n    hot.updateSettings({ colHeaders: headers, columns });\n    hot.loadData(rows);\n  }\n}\n\nasync function handleFile(file: File | null | undefined): Promise<void> {\n  clearError(errEl);\n\n  if (!file) {\n    return;\n  }\n\n  if (file.size === 0) {\n    showError(errEl, 'The file is empty.');\n\n    return;\n  }\n\n  try {\n    const payload = await parseFile(file);\n\n    loadIntoGrid(payload);\n  } catch (e) {\n    showError(errEl, e instanceof Error ? e.message : String(e));\n  }\n}\n\nfileInput?.addEventListener('change', () => {\n  const f = fileInput.files?.[0];\n\n  handleFile(f);\n  fileInput.value = '';\n});\n\ndropzone?.addEventListener('dragover', (ev) => {\n  ev.preventDefault();\n  dropzone.classList.add('import-dropzone--active');\n});\n\ndropzone?.addEventListener('dragleave', () => {\n  dropzone.classList.remove('import-dropzone--active');\n});\n\ndropzone?.addEventListener('drop', (ev) => {\n  ev.preventDefault();\n  dropzone.classList.remove('import-dropzone--active');\n  const f = ev.dataTransfer?.files?.[0];\n\n  handleFile(f);\n});\n\nsampleBtn?.addEventListener('click', async () => {\n  clearError(errEl);\n\n  try {\n    const PapaRef = await ensurePapa();\n    const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n\n    loadIntoGrid(payload);\n  } catch (e) {\n    showError(errEl, e instanceof Error ? e.message : String(e));\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty[hidden] {\n  display: none;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}\n\n#example1 {\n  padding: 1rem;\n  min-height: 180px;\n}\n\n#example1[hidden] {\n  display: none;\n}"},"docsPath":"recipes/import-export/import-csv-excel/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      id=\"import-dropzone\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input id=\"import-file\" type=\"file\" accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\" />\n        </label>\n        <button type=\"button\" id=\"import-load-sample\" class=\"import-sample-btn\">Load sample data</button>\n      </div>\n    </div>\n  \n    <div id=\"import-error\" class=\"import-msg import-msg--error\" hidden></div>\n  \n    <div id=\"import-empty\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"/>\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\"/>\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.</p>\n    </div>\n  \n    <div id=\"example1\" hidden></div>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport Papa from 'papaparse';\nimport type readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\nregisterAllModules();\n\ntype ParsedPayload = {\n  headers: string[];\n  rows: Record<string, string | number | boolean | null>[];\n};\n\ntype ParsedCellValue = string | number | boolean | null;\ntype ParsedRow = Record<string, ParsedCellValue>;\n\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\n\ndeclare global {\n  interface Window {\n    Papa?: typeof Papa;\n    readXlsxFile?: typeof readXlsxFile;\n  }\n}\n\nconst scriptPromises = new Map<string, Promise<void>>();\n\nfunction loadScript(src: string): Promise<void> {\n  const cached = scriptPromises.get(src);\n\n  if (cached) {\n    return cached;\n  }\n\n  const p = new Promise<void>((resolve, reject) => {\n    const existing = document.querySelector<HTMLScriptElement>(`script[data-cdn=\"${src}\"]`);\n\n    if (existing) {\n      existing.addEventListener('load', () => resolve(), { once: true });\n      existing.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load ${src}`)),\n        { once: true },\n      );\n      if (existing.getAttribute('data-loaded') === '1') {\n        resolve();\n      }\n\n      return;\n    }\n\n    const s = document.createElement('script');\n\n    s.src = src;\n    s.async = true;\n    s.dataset.cdn = src;\n    s.onload = () => {\n      s.setAttribute('data-loaded', '1');\n      resolve();\n    };\n    s.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(s);\n  });\n\n  scriptPromises.set(src, p);\n\n  return p;\n}\n\nasync function ensurePapa(): Promise<typeof Papa> {\n  if (typeof window.Papa !== 'undefined') {\n    return window.Papa;\n  }\n\n  await loadScript(CDN_PAPAPARSE);\n\n  if (typeof window.Papa === 'undefined') {\n    throw new Error('PapaParse did not register on window.');\n  }\n\n  return window.Papa;\n}\n\nasync function ensureReadExcelFile(): Promise<typeof readXlsxFile> {\n  if (typeof window.readXlsxFile !== 'undefined') {\n    return window.readXlsxFile;\n  }\n\n  await loadScript(CDN_READ_EXCEL_FILE);\n\n  if (typeof window.readXlsxFile === 'undefined') {\n    throw new Error('read-excel-file did not register on window.');\n  }\n\n  return window.readXlsxFile;\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction showError(el: HTMLElement | null, message: string): void {\n  if (!el) {\n    return;\n  }\n\n  el.textContent = message;\n  el.hidden = false;\n}\n\nfunction clearError(el: HTMLElement | null): void {\n  if (!el) {\n    return;\n  }\n\n  el.textContent = '';\n  el.hidden = true;\n}\n\nfunction normalizeCellValue(value: unknown): ParsedCellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction mapRowByHeaders(row: Record<string, unknown>, headers: string[]): ParsedRow {\n  const out: ParsedRow = {};\n\n  for (const key of headers) {\n    out[key] = normalizeCellValue(row[key]);\n  }\n\n  return out;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = (results.data as Record<string, unknown>[]).map((row) => mapRowByHeaders(row, fields));\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string, PapaRef: typeof Papa): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = PapaRef.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n\n  return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File, PapaRef: typeof Papa): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    PapaRef.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h) => h.trim(),\n      complete: (results) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File, readXlsxFileRef: typeof readXlsxFile): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n\n  try {\n    sheets = await readXlsxFileRef(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix: unknown[][] = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n\n  const rows: Record<string, string | number | boolean | null>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: ParsedRow = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      const key = keys[c];\n      const raw = line[c];\n\n      obj[key] = normalizeCellValue(raw);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    const PapaRef = await ensurePapa();\n\n    return parseCsvFile(file, PapaRef);\n  }\n\n  if (ext === 'xlsx') {\n    const readXlsxFileRef = await ensureReadExcelFile();\n\n    return parseXlsxFile(file, readXlsxFileRef);\n  }\n\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\nfunction columnsFromHeaders(headers: string[], rows: ParsedRow[]): GridSettings['columns'] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v): v is string | number | boolean => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' as const };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' as const };\n    }\n\n    return { data, type: 'text' as const };\n  });\n}\n\nconst gridContainer = document.querySelector<HTMLElement>('#example1')!;\nconst emptyEl = document.querySelector<HTMLElement>('#import-empty');\nconst errEl = document.querySelector<HTMLElement>('#import-error');\nconst fileInput = document.querySelector<HTMLInputElement>('#import-file');\nconst dropzone = document.querySelector<HTMLElement>('#import-dropzone');\nconst sampleBtn = document.querySelector<HTMLButtonElement>('#import-load-sample');\n\nlet hot: Handsontable | null = null;\n\nfunction loadIntoGrid({ headers, rows }: ParsedPayload): void {\n  const columns = columnsFromHeaders(headers, rows);\n\n  if (!hot) {\n    if (emptyEl) {\n      emptyEl.hidden = true;\n    }\n    gridContainer.hidden = false;\n    hot = new Handsontable(gridContainer, {\n      data: rows,\n      columns,\n      colHeaders: headers,\n      rowHeaders: true,\n      height: 'auto',\n      width: '100%',\n      licenseKey: 'non-commercial-and-evaluation',\n    });\n  } else {\n    hot.updateSettings({ colHeaders: headers, columns });\n    hot.loadData(rows);\n  }\n}\n\nasync function handleFile(file: File | null | undefined): Promise<void> {\n  clearError(errEl);\n\n  if (!file) {\n    return;\n  }\n\n  if (file.size === 0) {\n    showError(errEl, 'The file is empty.');\n\n    return;\n  }\n\n  try {\n    const payload = await parseFile(file);\n\n    loadIntoGrid(payload);\n  } catch (e) {\n    showError(errEl, e instanceof Error ? e.message : String(e));\n  }\n}\n\nfileInput?.addEventListener('change', () => {\n  const f = fileInput.files?.[0];\n\n  handleFile(f);\n  fileInput.value = '';\n});\n\ndropzone?.addEventListener('dragover', (ev) => {\n  ev.preventDefault();\n  dropzone.classList.add('import-dropzone--active');\n});\n\ndropzone?.addEventListener('dragleave', () => {\n  dropzone.classList.remove('import-dropzone--active');\n});\n\ndropzone?.addEventListener('drop', (ev) => {\n  ev.preventDefault();\n  dropzone.classList.remove('import-dropzone--active');\n  const f = ev.dataTransfer?.files?.[0];\n\n  handleFile(f);\n});\n\nsampleBtn?.addEventListener('click', async () => {\n  clearError(errEl);\n\n  try {\n    const PapaRef = await ensurePapa();\n    const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n\n    loadIntoGrid(payload);\n  } catch (e) {\n    showError(errEl, e instanceof Error ? e.message : String(e));\n  }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty[hidden] {\n  display: none;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}\n\n#example1 {\n  padding: 1rem;\n  min-height: 180px;\n}\n\n#example1[hidden] {\n  display: none;\n}"},"docsPath":"recipes/import-export/import-csv-excel/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__react__example1.tsx.json
index 9b180091b..27953c59f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\ntype ReadXlsxFile = (input: Blob) => Promise<{ sheet: string; data: unknown[][] }[]>;\n\ndeclare global {\n  interface Window {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Papa?: any;\n    readXlsxFile?: ReadXlsxFile;\n  }\n}\n\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\n\nconst scriptPromises = new Map<string, Promise<void>>();\n\nfunction loadScript(src: string): Promise<void> {\n  const cached = scriptPromises.get(src);\n\n  if (cached) {\n    return cached;\n  }\n\n  const p = new Promise<void>((resolve, reject) => {\n    const existing = document.querySelector(`script[data-cdn=\"${src}\"]`) as HTMLScriptElement | null;\n\n    if (existing) {\n      existing.addEventListener('load', () => resolve(), { once: true });\n      existing.addEventListener('error', () => reject(new Error(`Failed to load ${src}`)), { once: true });\n      if (existing.getAttribute('data-loaded') === '1') {\n        resolve();\n      }\n\n      return;\n    }\n\n    const s = document.createElement('script');\n\n    s.src = src;\n    s.async = true;\n    s.dataset.cdn = src;\n    s.onload = () => {\n      s.setAttribute('data-loaded', '1');\n      resolve();\n    };\n    s.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(s);\n  });\n\n  scriptPromises.set(src, p);\n\n  return p;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nasync function ensurePapa(): Promise<any> {\n  if (typeof window.Papa !== 'undefined') {\n    return window.Papa;\n  }\n\n  await loadScript(CDN_PAPAPARSE);\n\n  if (typeof window.Papa === 'undefined') {\n    throw new Error('PapaParse did not register on window.');\n  }\n\n  return window.Papa;\n}\n\nasync function ensureReadExcelFile(): Promise<ReadXlsxFile> {\n  if (typeof window.readXlsxFile !== 'undefined') {\n    return window.readXlsxFile;\n  }\n\n  await loadScript(CDN_READ_EXCEL_FILE);\n\n  if (typeof window.readXlsxFile === 'undefined') {\n    throw new Error('read-excel-file did not register on window.');\n  }\n\n  return window.readXlsxFile;\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\ntype CellValue = string | number | boolean | null;\n\ntype ParsedPayload = {\n  headers: string[];\n  rows: Record<string, CellValue>[];\n};\n\ntype ColumnDef = {\n  data: string;\n  type: 'text' | 'numeric' | 'checkbox';\n};\n\nfunction normalizeCellValue(value: unknown): CellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction mapRowByHeaders(row: Record<string, unknown>, headers: string[]): Record<string, CellValue> {\n  const out: Record<string, CellValue> = {};\n\n  for (const key of headers) {\n    out[key] = normalizeCellValue(row[key]);\n  }\n\n  return out;\n}\n\ntype PapaParseResults = {\n  data: Record<string, unknown>[];\n  errors: { message?: string }[];\n  meta: { fields?: string[] };\n};\n\nfunction processPapaResults(results: PapaParseResults): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = results.data.map((row) => mapRowByHeaders(row, fields));\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction parseCsvText(text: string, PapaRef: any): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = PapaRef.parse(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h: string) => h.trim(),\n  }) as PapaParseResults;\n\n  return processPapaResults(parsed);\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nasync function parseCsvFile(file: File, PapaRef: any): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    PapaRef.parse(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: PapaParseResults) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: unknown) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File, readXlsxFileRef: ReadXlsxFile): Promise<ParsedPayload> {\n  let sheets: Awaited<ReturnType<ReadXlsxFile>>;\n\n  try {\n    sheets = await readXlsxFileRef(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = (matrix[0] as unknown[]).map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, CellValue>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r] as unknown[];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: Record<string, CellValue> = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      const key = keys[c];\n      const raw = line[c];\n\n      obj[key] = normalizeCellValue(raw);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    const PapaRef = await ensurePapa();\n\n    return parseCsvFile(file, PapaRef);\n  }\n\n  if (ext === 'xlsx') {\n    const readXlsxFileRef = await ensureReadExcelFile();\n\n    return parseXlsxFile(file, readXlsxFileRef);\n  }\n\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\nfunction columnsFromHeaders(headers: string[], rows: Record<string, CellValue>[]): ColumnDef[] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v) => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' as const };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' as const };\n    }\n\n    return { data, type: 'text' as const };\n  });\n}\n\n/* start:skip-in-preview */\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const [errorMessage, setErrorMessage] = useState<string>('');\n  const [dropzoneActive, setDropzoneActive] = useState<boolean>(false);\n  const [gridData, setGridData] = useState<Record<string, CellValue>[]>([]);\n  const [gridColHeaders, setGridColHeaders] = useState<string[]>([]);\n  const [gridColumns, setGridColumns] = useState<ColumnDef[]>([]);\n\n  const loadIntoGrid = ({ headers, rows }: ParsedPayload): void => {\n    setErrorMessage('');\n    setGridColHeaders(headers);\n    setGridColumns(columnsFromHeaders(headers, rows));\n    setGridData(rows);\n  };\n\n  const handleError = (e: unknown): void => {\n    setErrorMessage(e instanceof Error ? e.message : String(e));\n  };\n\n  const handleFile = async (file: File | undefined): Promise<void> => {\n    setErrorMessage('');\n\n    if (!file) {\n      return;\n    }\n\n    if (file.size === 0) {\n      setErrorMessage('The file is empty.');\n\n      return;\n    }\n\n    try {\n      const payload = await parseFile(file);\n\n      loadIntoGrid(payload);\n    } catch (e) {\n      handleError(e);\n    }\n  };\n\n  const handleFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {\n    const f = ev.target.files?.[0];\n\n    handleFile(f);\n    ev.target.value = '';\n  };\n\n  const handleDragOver = (ev: React.DragEvent<HTMLDivElement>): void => {\n    ev.preventDefault();\n    setDropzoneActive(true);\n  };\n\n  const handleDragLeave = (): void => {\n    setDropzoneActive(false);\n  };\n\n  const handleDrop = (ev: React.DragEvent<HTMLDivElement>): void => {\n    ev.preventDefault();\n    setDropzoneActive(false);\n    const f = ev.dataTransfer?.files?.[0];\n\n    handleFile(f);\n  };\n\n  const handleLoadSample = async (): Promise<void> => {\n    setErrorMessage('');\n\n    try {\n      const PapaRef = await ensurePapa();\n      const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n\n      loadIntoGrid(payload);\n    } catch (e) {\n      handleError(e);\n    }\n  };\n\n  return (\n    <div className=\"import-csv-excel-wrap\">\n      <div\n        className={`import-dropzone${dropzoneActive ? ' import-dropzone--active' : ''}`}\n        tabIndex={0}\n        role=\"button\"\n        aria-label=\"Drop a CSV or Excel file here\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <p>\n          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.\n        </p>\n        <div className=\"import-actions\">\n          <label className=\"import-file-label\">\n            <span>Choose file</span>\n            <input\n              type=\"file\"\n              accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n              onChange={handleFileInputChange}\n            />\n          </label>\n          <button type=\"button\" className=\"import-sample-btn\" onClick={handleLoadSample}>\n            Load sample data\n          </button>\n        </div>\n      </div>\n\n      {errorMessage && (\n        <div className=\"import-msg import-msg--error\">{errorMessage}</div>\n      )}\n\n      {gridData.length === 0 ? (\n        <div className=\"import-empty\">\n          <span className=\"import-empty-icon\" aria-hidden=\"true\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" />\n              <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\" />\n            </svg>\n          </span>\n          <p className=\"import-empty-title\">No data loaded yet</p>\n          <p className=\"import-empty-text\">\n            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n          </p>\n        </div>\n      ) : (\n        <HotTable\n          data={gridData}\n          columns={gridColumns}\n          colHeaders={gridColHeaders}\n          rowHeaders={true}\n          height=\"auto\"\n          width=\"100%\"\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/react/example1.tsx","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example1.css';\n\nregisterAllModules();\n\ntype ReadXlsxFile = (input: Blob) => Promise<{ sheet: string; data: unknown[][] }[]>;\n\ndeclare global {\n  interface Window {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Papa?: any;\n    readXlsxFile?: ReadXlsxFile;\n  }\n}\n\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_READ_EXCEL_FILE = 'https://cdn.jsdelivr.net/npm/read-excel-file@9.3.10/bundle/read-excel-file.min.js';\n\nconst scriptPromises = new Map<string, Promise<void>>();\n\nfunction loadScript(src: string): Promise<void> {\n  const cached = scriptPromises.get(src);\n\n  if (cached) {\n    return cached;\n  }\n\n  const p = new Promise<void>((resolve, reject) => {\n    const existing = document.querySelector(`script[data-cdn=\"${src}\"]`) as HTMLScriptElement | null;\n\n    if (existing) {\n      existing.addEventListener('load', () => resolve(), { once: true });\n      existing.addEventListener('error', () => reject(new Error(`Failed to load ${src}`)), { once: true });\n      if (existing.getAttribute('data-loaded') === '1') {\n        resolve();\n      }\n\n      return;\n    }\n\n    const s = document.createElement('script');\n\n    s.src = src;\n    s.async = true;\n    s.dataset.cdn = src;\n    s.onload = () => {\n      s.setAttribute('data-loaded', '1');\n      resolve();\n    };\n    s.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(s);\n  });\n\n  scriptPromises.set(src, p);\n\n  return p;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nasync function ensurePapa(): Promise<any> {\n  if (typeof window.Papa !== 'undefined') {\n    return window.Papa;\n  }\n\n  await loadScript(CDN_PAPAPARSE);\n\n  if (typeof window.Papa === 'undefined') {\n    throw new Error('PapaParse did not register on window.');\n  }\n\n  return window.Papa;\n}\n\nasync function ensureReadExcelFile(): Promise<ReadXlsxFile> {\n  if (typeof window.readXlsxFile !== 'undefined') {\n    return window.readXlsxFile;\n  }\n\n  await loadScript(CDN_READ_EXCEL_FILE);\n\n  if (typeof window.readXlsxFile === 'undefined') {\n    throw new Error('read-excel-file did not register on window.');\n  }\n\n  return window.readXlsxFile;\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\ntype CellValue = string | number | boolean | null;\n\ntype ParsedPayload = {\n  headers: string[];\n  rows: Record<string, CellValue>[];\n};\n\ntype ColumnDef = {\n  data: string;\n  type: 'text' | 'numeric' | 'checkbox';\n};\n\nfunction normalizeCellValue(value: unknown): CellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction mapRowByHeaders(row: Record<string, unknown>, headers: string[]): Record<string, CellValue> {\n  const out: Record<string, CellValue> = {};\n\n  for (const key of headers) {\n    out[key] = normalizeCellValue(row[key]);\n  }\n\n  return out;\n}\n\ntype PapaParseResults = {\n  data: Record<string, unknown>[];\n  errors: { message?: string }[];\n  meta: { fields?: string[] };\n};\n\nfunction processPapaResults(results: PapaParseResults): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = results.data.map((row) => mapRowByHeaders(row, fields));\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction parseCsvText(text: string, PapaRef: any): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = PapaRef.parse(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h: string) => h.trim(),\n  }) as PapaParseResults;\n\n  return processPapaResults(parsed);\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nasync function parseCsvFile(file: File, PapaRef: any): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    PapaRef.parse(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: PapaParseResults) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: unknown) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File, readXlsxFileRef: ReadXlsxFile): Promise<ParsedPayload> {\n  let sheets: Awaited<ReturnType<ReadXlsxFile>>;\n\n  try {\n    sheets = await readXlsxFileRef(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = (matrix[0] as unknown[]).map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, CellValue>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r] as unknown[];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: Record<string, CellValue> = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      const key = keys[c];\n      const raw = line[c];\n\n      obj[key] = normalizeCellValue(raw);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    const PapaRef = await ensurePapa();\n\n    return parseCsvFile(file, PapaRef);\n  }\n\n  if (ext === 'xlsx') {\n    const readXlsxFileRef = await ensureReadExcelFile();\n\n    return parseXlsxFile(file, readXlsxFileRef);\n  }\n\n  throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\nfunction columnsFromHeaders(headers: string[], rows: Record<string, CellValue>[]): ColumnDef[] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v) => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' as const };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' as const };\n    }\n\n    return { data, type: 'text' as const };\n  });\n}\n\n/* start:skip-in-preview */\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  const [errorMessage, setErrorMessage] = useState<string>('');\n  const [dropzoneActive, setDropzoneActive] = useState<boolean>(false);\n  const [gridData, setGridData] = useState<Record<string, CellValue>[]>([]);\n  const [gridColHeaders, setGridColHeaders] = useState<string[]>([]);\n  const [gridColumns, setGridColumns] = useState<ColumnDef[]>([]);\n\n  const loadIntoGrid = ({ headers, rows }: ParsedPayload): void => {\n    setErrorMessage('');\n    setGridColHeaders(headers);\n    setGridColumns(columnsFromHeaders(headers, rows));\n    setGridData(rows);\n  };\n\n  const handleError = (e: unknown): void => {\n    setErrorMessage(e instanceof Error ? e.message : String(e));\n  };\n\n  const handleFile = async (file: File | undefined): Promise<void> => {\n    setErrorMessage('');\n\n    if (!file) {\n      return;\n    }\n\n    if (file.size === 0) {\n      setErrorMessage('The file is empty.');\n\n      return;\n    }\n\n    try {\n      const payload = await parseFile(file);\n\n      loadIntoGrid(payload);\n    } catch (e) {\n      handleError(e);\n    }\n  };\n\n  const handleFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {\n    const f = ev.target.files?.[0];\n\n    handleFile(f);\n    ev.target.value = '';\n  };\n\n  const handleDragOver = (ev: React.DragEvent<HTMLDivElement>): void => {\n    ev.preventDefault();\n    setDropzoneActive(true);\n  };\n\n  const handleDragLeave = (): void => {\n    setDropzoneActive(false);\n  };\n\n  const handleDrop = (ev: React.DragEvent<HTMLDivElement>): void => {\n    ev.preventDefault();\n    setDropzoneActive(false);\n    const f = ev.dataTransfer?.files?.[0];\n\n    handleFile(f);\n  };\n\n  const handleLoadSample = async (): Promise<void> => {\n    setErrorMessage('');\n\n    try {\n      const PapaRef = await ensurePapa();\n      const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n\n      loadIntoGrid(payload);\n    } catch (e) {\n      handleError(e);\n    }\n  };\n\n  return (\n    <div className=\"import-csv-excel-wrap\">\n      <div\n        className={`import-dropzone${dropzoneActive ? ' import-dropzone--active' : ''}`}\n        tabIndex={0}\n        role=\"button\"\n        aria-label=\"Drop a CSV or Excel file here\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <p>\n          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.\n        </p>\n        <div className=\"import-actions\">\n          <label className=\"import-file-label\">\n            <span>Choose file</span>\n            <input\n              type=\"file\"\n              accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n              onChange={handleFileInputChange}\n            />\n          </label>\n          <button type=\"button\" className=\"import-sample-btn\" onClick={handleLoadSample}>\n            Load sample data\n          </button>\n        </div>\n      </div>\n\n      {errorMessage && (\n        <div className=\"import-msg import-msg--error\">{errorMessage}</div>\n      )}\n\n      {gridData.length === 0 ? (\n        <div className=\"import-empty\">\n          <span className=\"import-empty-icon\" aria-hidden=\"true\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" />\n              <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\" />\n            </svg>\n          </span>\n          <p className=\"import-empty-title\">No data loaded yet</p>\n          <p className=\"import-empty-text\">\n            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n          </p>\n        </div>\n      ) : (\n        <HotTable\n          data={gridData}\n          columns={gridColumns}\n          colHeaders={gridColHeaders}\n          rowHeaders={true}\n          height=\"auto\"\n          width=\"100%\"\n          licenseKey=\"non-commercial-and-evaluation\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/react/example1.tsx","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__vue__example1.vue.json
index b5d8240db..329bd5ec9 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__import-export__import-csv-excel__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/vue3\": \"0.0.0-next-770903c-20261001\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, shallowRef, computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport Papa from 'papaparse';\nimport readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\nregisterAllModules();\n\ntype CellValue = string | number | boolean | null;\n\ninterface ParsedPayload {\n  headers: string[];\n  rows: Record<string, CellValue>[];\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction normalizeCellValue(value: unknown): CellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = (results.meta.fields ?? []).filter((f) => f !== undefined && f !== '');\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = results.data.map((row) => {\n    const out: Record<string, CellValue> = {};\n\n    for (const key of fields) {\n      out[key] = normalizeCellValue(row[key]);\n    }\n\n    return out;\n  });\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = Papa.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n\n  return processPapaResults(parsed);\n}\n\nfunction parseCsvFile(file: File): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    Papa.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: Papa.ParseResult<Record<string, unknown>>) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: Error) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n\n  try {\n    sheets = await readXlsxFile(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix: unknown[][] = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, CellValue>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: Record<string, CellValue> = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      obj[keys[c]] = normalizeCellValue(line[c]);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nfunction parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    return parseCsvFile(file);\n  }\n\n  if (ext === 'xlsx') {\n    return parseXlsxFile(file);\n  }\n\n  return Promise.reject(new Error('Unsupported file type. Use a .csv or .xlsx file.'));\n}\n\nfunction columnsFromHeaders(headers: string[], rows: Record<string, CellValue>[]): GridSettings['columns'] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v) => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' };\n    }\n\n    return { data, type: 'text' };\n  });\n}\n\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\nconst isDragOver = ref(false);\nconst errorMessage = ref('');\nconst payload = shallowRef<ParsedPayload | null>(null);\nconst importCount = ref(0);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: payload.value?.rows ?? [],\n  colHeaders: payload.value?.headers ?? [],\n  columns: payload.value ? columnsFromHeaders(payload.value.headers, payload.value.rows) : [],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nfunction loadIntoGrid(parsed: ParsedPayload): void {\n  payload.value = parsed;\n  importCount.value += 1;\n}\n\nfunction showError(e: unknown): void {\n  errorMessage.value = e instanceof Error ? e.message : String(e);\n}\n\nasync function handleFile(file: File | undefined): Promise<void> {\n  errorMessage.value = '';\n\n  if (!file) {\n    return;\n  }\n\n  if (file.size === 0) {\n    errorMessage.value = 'The file is empty.';\n\n    return;\n  }\n\n  try {\n    loadIntoGrid(await parseFile(file));\n  } catch (e) {\n    showError(e);\n  }\n}\n\nfunction loadSampleData(): void {\n  errorMessage.value = '';\n\n  try {\n    loadIntoGrid(parseCsvText(SAMPLE_CSV));\n  } catch (e) {\n    showError(e);\n  }\n}\n\nfunction onDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragOver.value = true;\n}\n\nfunction onDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragOver.value = false;\n  handleFile(event.dataTransfer?.files?.[0]);\n}\n\nfunction onFileChange(event: Event): void {\n  const input = event.target as HTMLInputElement;\n\n  handleFile(input.files?.[0]);\n  input.value = '';\n}\n</script>\n\n<template>\n  <div id=\"example1\" class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      :class=\"{ 'import-dropzone--active': isDragOver }\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"isDragOver = false\"\n      @drop=\"onDrop\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input\n            type=\"file\"\n            accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n            @change=\"onFileChange\"\n          />\n        </label>\n        <button type=\"button\" class=\"import-sample-btn\" @click=\"loadSampleData\">Load sample data</button>\n      </div>\n    </div>\n\n    <div v-if=\"errorMessage\" class=\"import-msg import-msg--error\">{{ errorMessage }}</div>\n\n    <div v-if=\"!payload\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" />\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\" />\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">\n        Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n      </p>\n    </div>\n    <HotTable v-else :key=\"importCount\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n  cursor: pointer;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/vue/example1.vue","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"Vue 3"}
+{"framework":"vue","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"papaparse\": \"5.7.0\",\n    \"read-excel-file\": \"9.3.10\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, shallowRef, computed } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport Papa from 'papaparse';\nimport readXlsxFile from 'read-excel-file/browser';\nimport type { Sheet } from 'read-excel-file/browser';\n\nregisterAllModules();\n\ntype CellValue = string | number | boolean | null;\n\ninterface ParsedPayload {\n  headers: string[];\n  rows: Record<string, CellValue>[];\n}\n\nfunction extensionOf(name: string): string {\n  const i = name.lastIndexOf('.');\n\n  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction normalizeCellValue(value: unknown): CellValue {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return value;\n  }\n\n  if (value instanceof Date) {\n    return value.toISOString().slice(0, 10);\n  }\n\n  const text = String(value).trim();\n\n  return text === '' ? null : text;\n}\n\nfunction processPapaResults(results: Papa.ParseResult<Record<string, unknown>>): ParsedPayload {\n  if (results.errors.length > 0) {\n    throw new Error(results.errors[0].message || 'CSV parse error.');\n  }\n\n  const fields = (results.meta.fields ?? []).filter((f) => f !== undefined && f !== '');\n\n  if (fields.length === 0) {\n    throw new Error('No header row found in the CSV.');\n  }\n\n  const rows = results.data.map((row) => {\n    const out: Record<string, CellValue> = {};\n\n    for (const key of fields) {\n      out[key] = normalizeCellValue(row[key]);\n    }\n\n    return out;\n  });\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string): ParsedPayload {\n  const trimmed = text.trim();\n\n  if (!trimmed) {\n    throw new Error('The file is empty.');\n  }\n\n  const parsed = Papa.parse<Record<string, unknown>>(trimmed, {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: 'greedy',\n    transformHeader: (h) => h.trim(),\n  });\n\n  return processPapaResults(parsed);\n}\n\nfunction parseCsvFile(file: File): Promise<ParsedPayload> {\n  return new Promise((resolve, reject) => {\n    Papa.parse<Record<string, unknown>>(file, {\n      header: true,\n      dynamicTyping: true,\n      skipEmptyLines: 'greedy',\n      transformHeader: (h: string) => h.trim(),\n      complete: (results: Papa.ParseResult<Record<string, unknown>>) => {\n        try {\n          resolve(processPapaResults(results));\n        } catch (e) {\n          reject(e instanceof Error ? e : new Error(String(e)));\n        }\n      },\n      error: (err: Error) => reject(err instanceof Error ? err : new Error(String(err))),\n    });\n  });\n}\n\nasync function parseXlsxFile(file: File): Promise<ParsedPayload> {\n  let sheets: Sheet[];\n\n  try {\n    sheets = await readXlsxFile(file);\n  } catch {\n    throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n  }\n\n  const firstSheet = sheets[0];\n\n  if (!firstSheet) {\n    throw new Error('The workbook has no sheets.');\n  }\n\n  const matrix: unknown[][] = firstSheet.data;\n\n  if (!matrix.length) {\n    throw new Error('The sheet is empty.');\n  }\n\n  const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n\n  if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n    throw new Error('No header row found in the Excel sheet.');\n  }\n\n  const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n  const rows: Record<string, CellValue>[] = [];\n\n  for (let r = 1; r < matrix.length; r++) {\n    const line = matrix[r];\n    const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n    if (allEmpty) {\n      continue;\n    }\n\n    const obj: Record<string, CellValue> = {};\n\n    for (let c = 0; c < keys.length; c++) {\n      obj[keys[c]] = normalizeCellValue(line[c]);\n    }\n\n    rows.push(obj);\n  }\n\n  if (rows.length === 0) {\n    throw new Error('No data rows after the header.');\n  }\n\n  return { headers: keys, rows };\n}\n\nfunction parseFile(file: File): Promise<ParsedPayload> {\n  const ext = extensionOf(file.name);\n\n  if (ext === 'csv') {\n    return parseCsvFile(file);\n  }\n\n  if (ext === 'xlsx') {\n    return parseXlsxFile(file);\n  }\n\n  return Promise.reject(new Error('Unsupported file type. Use a .csv or .xlsx file.'));\n}\n\nfunction columnsFromHeaders(headers: string[], rows: Record<string, CellValue>[]): GridSettings['columns'] {\n  return headers.map((data) => {\n    const values = rows\n      .map((row) => row[data])\n      .filter((v) => v !== null);\n\n    if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n      return { data, type: 'numeric' };\n    }\n\n    if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n      return { data, type: 'checkbox' };\n    }\n\n    return { data, type: 'text' };\n  });\n}\n\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\nconst isDragOver = ref(false);\nconst errorMessage = ref('');\nconst payload = shallowRef<ParsedPayload | null>(null);\nconst importCount = ref(0);\n\nconst hotSettings = computed<GridSettings>(() => ({\n  data: payload.value?.rows ?? [],\n  colHeaders: payload.value?.headers ?? [],\n  columns: payload.value ? columnsFromHeaders(payload.value.headers, payload.value.rows) : [],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  licenseKey: 'non-commercial-and-evaluation',\n}));\n\nfunction loadIntoGrid(parsed: ParsedPayload): void {\n  payload.value = parsed;\n  importCount.value += 1;\n}\n\nfunction showError(e: unknown): void {\n  errorMessage.value = e instanceof Error ? e.message : String(e);\n}\n\nasync function handleFile(file: File | undefined): Promise<void> {\n  errorMessage.value = '';\n\n  if (!file) {\n    return;\n  }\n\n  if (file.size === 0) {\n    errorMessage.value = 'The file is empty.';\n\n    return;\n  }\n\n  try {\n    loadIntoGrid(await parseFile(file));\n  } catch (e) {\n    showError(e);\n  }\n}\n\nfunction loadSampleData(): void {\n  errorMessage.value = '';\n\n  try {\n    loadIntoGrid(parseCsvText(SAMPLE_CSV));\n  } catch (e) {\n    showError(e);\n  }\n}\n\nfunction onDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragOver.value = true;\n}\n\nfunction onDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragOver.value = false;\n  handleFile(event.dataTransfer?.files?.[0]);\n}\n\nfunction onFileChange(event: Event): void {\n  const input = event.target as HTMLInputElement;\n\n  handleFile(input.files?.[0]);\n  input.value = '';\n}\n</script>\n\n<template>\n  <div id=\"example1\" class=\"import-csv-excel-wrap\">\n    <div\n      class=\"import-dropzone\"\n      :class=\"{ 'import-dropzone--active': isDragOver }\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Drop a CSV or Excel file here\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"isDragOver = false\"\n      @drop=\"onDrop\"\n    >\n      <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>\n      <div class=\"import-actions\">\n        <label class=\"import-file-label\">\n          <span>Choose file</span>\n          <input\n            type=\"file\"\n            accept=\".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv\"\n            @change=\"onFileChange\"\n          />\n        </label>\n        <button type=\"button\" class=\"import-sample-btn\" @click=\"loadSampleData\">Load sample data</button>\n      </div>\n    </div>\n\n    <div v-if=\"errorMessage\" class=\"import-msg import-msg--error\">{{ errorMessage }}</div>\n\n    <div v-if=\"!payload\" class=\"import-empty\">\n      <span class=\"import-empty-icon\" aria-hidden=\"true\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" />\n          <path d=\"M3 9h18M3 15h18M9 3v18M15 3v18\" />\n        </svg>\n      </span>\n      <p class=\"import-empty-title\">No data loaded yet</p>\n      <p class=\"import-empty-text\">\n        Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n      </p>\n    </div>\n    <HotTable v-else :key=\"importCount\" :settings=\"hotSettings\" />\n  </div>\n</template>","/src/styles.css":".import-csv-excel-wrap {\n  display: flex;\n  flex-direction: column;\n  margin: 0 -1rem;\n}\n\n.import-dropzone {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  border: 0;\n  border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: transparent;\n  color: var(--sl-color-gray-2, #555555);\n  font-size: var(--sl-text-xs, 0.75rem);\n  transition: background 0.15s ease;\n  cursor: pointer;\n}\n\n.import-dropzone p {\n  margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n  background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.import-file-label {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  border-radius: 0;\n  background: var(--sl-color-gray-6, #eeeeee);\n  color: var(--sl-color-gray-2, #555555);\n  font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n  font-size: var(--sl-text-xs, 0.75rem);\n  font-weight: 500;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n  background: var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.import-msg {\n  margin: 0;\n  padding: 0.75rem 1rem;\n  border-radius: 0;\n  font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n  border-bottom: 1px solid var(--sl-color-red, #ef4444);\n  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n  color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  min-height: 200px;\n  color: var(--sl-color-gray-2, #555555);\n  text-align: center;\n}\n\n.import-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  margin-bottom: 0.25rem;\n  border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n  color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n  margin: 0;\n  color: var(--sl-color-white, #333333);\n  font-size: var(--sl-text-sm, 0.875rem);\n  font-weight: 600;\n}\n\n.import-empty-text {\n  margin: 0;\n  max-width: 38ch;\n  font-size: var(--sl-text-xs, 0.75rem);\n  line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/vue/example1.vue","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__angular__example1.ts.json
index ccdefe155..475734489 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-expensive-cell-renderer></example1-expensive-cell-renderer></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ElementRef, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-expensive-cell-renderer',\n  styles: [`\n    .render-stats {\n      margin: 8px 0 0;\n      font-size: 13px;\n      color: #666;\n    }\n  `],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"renderAgain()\">Render again</button>\n        <button type=\"button\" (click)=\"updateFirstRow()\">Update the first row</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <p #statsLine class=\"render-stats\">Renderer calls: 0 | Computations: 0</p>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('statsLine', { static: true }) readonly statsLine!: ElementRef<HTMLParagraphElement>;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'customer', type: 'text', width: 170 },\n      { data: 'region', type: 'text', width: 90 },\n      { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n    autoWrapRow: true,\n    // Runs once per draw, scroll draws included, after every cell renderer. The grid runs outside\n    // Angular's zone, and the first draw happens during `ngAfterViewInit`. Write the counters\n    // straight into the element instead of into a bound property: a bound property set from here\n    // costs a whole-application change-detection pass on every draw, and on the first draw it\n    // raises NG0100 (ExpressionChangedAfterItHasBeenCheckedError).\n    afterViewRender: () => {\n      this.statsLine.nativeElement.textContent =\n        `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n    },\n  };\n\n  renderAgain(): void {\n    this.hotTable?.hotInstance?.render();\n  }\n\n  updateFirstRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // Bring the first row into view, so its renderer runs and the counter shows the single\n    // recomputation. A cell outside the rendered band is not painted at all.\n    hot.scrollViewportTo({ row: 0 });\n\n    // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n    const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n    hot.setSourceDataAtCell(0, 'sales', nextSales);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/expensive-cell-renderer/angular/example1.ts","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-expensive-cell-renderer></example1-expensive-cell-renderer></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ElementRef, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-expensive-cell-renderer',\n  styles: [`\n    .render-stats {\n      margin: 8px 0 0;\n      font-size: 13px;\n      color: #666;\n    }\n  `],\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"renderAgain()\">Render again</button>\n        <button type=\"button\" (click)=\"updateFirstRow()\">Update the first row</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <p #statsLine class=\"render-stats\">Renderer calls: 0 | Computations: 0</p>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('statsLine', { static: true }) readonly statsLine!: ElementRef<HTMLParagraphElement>;\n\n  readonly data = data;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n    columns: [\n      { data: 'id', type: 'numeric', width: 70, readOnly: true },\n      { data: 'customer', type: 'text', width: 170 },\n      { data: 'region', type: 'text', width: 90 },\n      { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n    autoWrapRow: true,\n    // Runs once per draw, scroll draws included, after every cell renderer. The grid runs outside\n    // Angular's zone, and the first draw happens during `ngAfterViewInit`. Write the counters\n    // straight into the element instead of into a bound property: a bound property set from here\n    // costs a whole-application change-detection pass on every draw, and on the first draw it\n    // raises NG0100 (ExpressionChangedAfterItHasBeenCheckedError).\n    afterViewRender: () => {\n      this.statsLine.nativeElement.textContent =\n        `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n    },\n  };\n\n  renderAgain(): void {\n    this.hotTable?.hotInstance?.render();\n  }\n\n  updateFirstRow(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // Bring the first row into view, so its renderer runs and the counter shows the single\n    // recomputation. A cell outside the rendered band is not painted at all.\n    hot.scrollViewportTo({ row: 0 });\n\n    // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n    const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n    hot.setSourceDataAtCell(0, 'sales', nextSales);\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/expensive-cell-renderer/angular/example1.ts","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.js.json
index a9df92a66..41d095765 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"render-again-btn\" type=\"button\">Render again</button>\n      <button id=\"update-row-btn\" type=\"button\">Update the first row</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <p id=\"render-stats\" style=\"margin: 8px 0 0; font-size: 13px; color: #666;\">Renderer calls: 0 | Computations: 0</p>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { baseRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count) {\n  const rows = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales) {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap();\n\nconst trendRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst container = document.querySelector('#example1');\nconst statsElement = document.querySelector('#render-stats');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'customer', type: 'text', width: 170 },\n    { data: 'region', type: 'text', width: 90 },\n    { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  // Runs once per draw, scroll draws included, after every cell renderer. Keep DOM writes like\n  // this one out of the renderer.\n  afterViewRender() {\n    statsElement.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n  },\n});\n\ndocument.querySelector('#render-again-btn').addEventListener('click', () => {\n  hot.render();\n});\n\ndocument.querySelector('#update-row-btn').addEventListener('click', () => {\n  // Bring the first row into view, so its renderer runs and the counter shows the single\n  // recomputation. A cell outside the rendered band is not painted at all.\n  hot.scrollViewportTo({ row: 0 });\n\n  // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n  const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n  hot.setSourceDataAtCell(0, 'sales', nextSales);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/expensive-cell-renderer/javascript/example1.js","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"render-again-btn\" type=\"button\">Render again</button>\n      <button id=\"update-row-btn\" type=\"button\">Update the first row</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <p id=\"render-stats\" style=\"margin: 8px 0 0; font-size: 13px; color: #666;\">Renderer calls: 0 | Computations: 0</p>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { baseRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count) {\n  const rows = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales) {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap();\n\nconst trendRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst container = document.querySelector('#example1');\nconst statsElement = document.querySelector('#render-stats');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'customer', type: 'text', width: 170 },\n    { data: 'region', type: 'text', width: 90 },\n    { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  // Runs once per draw, scroll draws included, after every cell renderer. Keep DOM writes like\n  // this one out of the renderer.\n  afterViewRender() {\n    statsElement.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n  },\n});\n\ndocument.querySelector('#render-again-btn').addEventListener('click', () => {\n  hot.render();\n});\n\ndocument.querySelector('#update-row-btn').addEventListener('click', () => {\n  // Bring the first row into view, so its renderer runs and the counter shows the single\n  // recomputation. A cell outside the rendered band is not painted at all.\n  hot.scrollViewportTo({ row: 0 });\n\n  // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n  const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n  hot.setSourceDataAtCell(0, 'sales', nextSales);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/expensive-cell-renderer/javascript/example1.js","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.ts.json
index f5836c1a2..239fc1060 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"render-again-btn\" type=\"button\">Render again</button>\n      <button id=\"update-row-btn\" type=\"button\">Update the first row</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <p id=\"render-stats\" style=\"margin: 8px 0 0; font-size: 13px; color: #666;\">Renderer calls: 0 | Computations: 0</p>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst container = document.querySelector<HTMLElement>('#example1')!;\nconst statsElement = document.querySelector<HTMLElement>('#render-stats')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'customer', type: 'text', width: 170 },\n    { data: 'region', type: 'text', width: 90 },\n    { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  // Runs once per draw, scroll draws included, after every cell renderer. Keep DOM writes like\n  // this one out of the renderer.\n  afterViewRender() {\n    statsElement.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n  },\n});\n\ndocument.querySelector('#render-again-btn')!.addEventListener('click', () => {\n  hot.render();\n});\n\ndocument.querySelector('#update-row-btn')!.addEventListener('click', () => {\n  // Bring the first row into view, so its renderer runs and the counter shows the single\n  // recomputation. A cell outside the rendered band is not painted at all.\n  hot.scrollViewportTo({ row: 0 });\n\n  // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n  const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n  hot.setSourceDataAtCell(0, 'sales', nextSales);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/performance/expensive-cell-renderer/javascript/example1.ts","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"render-again-btn\" type=\"button\">Render again</button>\n      <button id=\"update-row-btn\" type=\"button\">Update the first row</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <p id=\"render-stats\" style=\"margin: 8px 0 0; font-size: 13px; color: #666;\">Renderer calls: 0 | Computations: 0</p>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterAllModules();\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst container = document.querySelector<HTMLElement>('#example1')!;\nconst statsElement = document.querySelector<HTMLElement>('#render-stats')!;\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['ID', 'Customer', 'Region', 'Trend (12 months)'],\n  columns: [\n    { data: 'id', type: 'numeric', width: 70, readOnly: true },\n    { data: 'customer', type: 'text', width: 170 },\n    { data: 'region', type: 'text', width: 90 },\n    { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n  // Runs once per draw, scroll draws included, after every cell renderer. Keep DOM writes like\n  // this one out of the renderer.\n  afterViewRender() {\n    statsElement.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n  },\n});\n\ndocument.querySelector('#render-again-btn')!.addEventListener('click', () => {\n  hot.render();\n});\n\ndocument.querySelector('#update-row-btn')!.addEventListener('click', () => {\n  // Bring the first row into view, so its renderer runs and the counter shows the single\n  // recomputation. A cell outside the rendered band is not painted at all.\n  hot.scrollViewportTo({ row: 0 });\n\n  // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n  const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n  hot.setSourceDataAtCell(0, 'sales', nextSales);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/performance/expensive-cell-renderer/javascript/example1.ts","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__react__example1.tsx.json
index 558904cb9..04819f02d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__expensive-cell-renderer__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst COLUMNS: ColumnSettings[] = [\n  { data: 'id', type: 'numeric', width: 70, readOnly: true },\n  { data: 'customer', type: 'text', width: 170 },\n  { data: 'region', type: 'text', width: 90 },\n  { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const statsRef = useRef<HTMLParagraphElement>(null);\n\n  // Runs once per draw, scroll draws included, after every cell renderer. The counters change on\n  // every draw, so write them straight into the DOM rather than into React state, which would\n  // re-render the component on every draw.\n  const handleAfterViewRender = useCallback(() => {\n    if (statsRef.current) {\n      statsRef.current.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n    }\n  }, []);\n\n  const renderAgain = useCallback(() => {\n    hotRef.current?.hotInstance?.render();\n  }, []);\n\n  const updateFirstRow = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // Bring the first row into view, so its renderer runs and the counter shows the single\n    // recomputation. A cell outside the rendered band is not painted at all.\n    hot.scrollViewportTo({ row: 0 });\n\n    // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n    const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n    hot.setSourceDataAtCell(0, 'sales', nextSales);\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={renderAgain}>Render again</button>\n          <button type=\"button\" onClick={updateFirstRow}>Update the first row</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Customer', 'Region', 'Trend (12 months)']}\n        columns={COLUMNS}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterViewRender={handleAfterViewRender}\n      />\n      <p ref={statsRef} style={{ margin: '8px 0 0', fontSize: 13, color: '#666' }}>\n        Renderer calls: 0 | Computations: 0\n      </p>\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/expensive-cell-renderer/react/example1.tsx","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Performance ▸ Cache the output of an expensive cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, baseRenderer, textRenderer } from 'handsontable/renderers';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\ntype OrderRow = {\n  id: number;\n  customer: string;\n  region: string;\n  sales: number[];\n};\n\n/* start:skip-in-preview */\nconst CUSTOMERS = ['Acme Corp', 'Vertex Industries', 'Harbor Goods', 'Alpine Supply Co.', 'Northwind Traders', 'Lumen Retail'];\nconst REGIONS = ['North', 'South', 'East', 'West'];\n\n// Twelve monthly sales figures per customer, generated deterministically so every load looks the same.\nfunction createRows(count: number): OrderRow[] {\n  const rows: OrderRow[] = [];\n\n  for (let index = 0; index < count; index += 1) {\n    const sales: number[] = [];\n    let seed = (index + 1) * 7919;\n\n    for (let month = 0; month < 12; month += 1) {\n      seed = (seed * 48271) % 2147483647;\n      sales.push(1000 + (seed % 9000));\n    }\n\n    rows.push({\n      id: 1001 + index,\n      customer: CUSTOMERS[index % CUSTOMERS.length],\n      region: REGIONS[index % REGIONS.length],\n      sales,\n    });\n  }\n\n  return rows;\n}\n/* end:skip-in-preview */\n\nconst data = createRows(300);\nconst stats = { rendererCalls: 0, computations: 0 };\n\n// The slow part of the renderer: a text sparkline plus the change from the first to the last month.\n// It is a pure function -- the same input always gives the same output -- so its result can be cached.\nfunction buildTrend(sales: number[]): string {\n  const glyphs = '▁▂▃▄▅▆▇█';\n  const min = Math.min(...sales);\n  const max = Math.max(...sales);\n  const range = max - min || 1;\n  const bars = sales\n    .map((value) => glyphs[Math.round(((value - min) / range) * (glyphs.length - 1))])\n    .join('');\n  const change = Math.round(((sales[sales.length - 1] - sales[0]) / sales[0]) * 100);\n\n  return `${bars} ${change >= 0 ? '+' : ''}${change}%`;\n}\n\n// One cache entry per data record, never per `td`: the grid reuses a `td` for a different record\n// as you scroll. A WeakMap releases the entry together with the record. Each entry remembers the\n// input it was computed from, so a replaced array is computed again.\nconst trendCache = new WeakMap<OrderRow, { input: number[]; output: string }>();\n\nconst trendRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n  stats.rendererCalls += 1;\n\n  // `row` is a visual index, and `data` is in physical order, so translate before the lookup.\n  // Read the record from your own array: `getSourceDataAtRow()` returns a copy of the row on\n  // every call, which can never be a WeakMap key. Keep this closure and the grid's data source\n  // the same array -- after `updateData()`, point it at the new one.\n  const record = data[instance.toPhysicalRow(row)];\n  const sales = value;\n\n  // A row without a record (a `minSpareRows` row, or one mid-`alter()`) and an empty cell both\n  // reach the renderer. Neither can be cached: `undefined` is not a valid WeakMap key.\n  if (!record || !Array.isArray(sales) || sales.length === 0) {\n    textRenderer(instance, td, row, col, prop, '—', cellProperties);\n\n    return;\n  }\n\n  let entry = trendCache.get(record);\n\n  if (!entry || entry.input !== sales) {\n    stats.computations += 1;\n    entry = { input: sales, output: buildTrend(sales) };\n    trendCache.set(record, entry);\n  }\n\n  // Write through the built-in text renderer rather than setting `td.textContent`. On a row with\n  // an exact height the engine keeps the cell's content inside a wrapper, and this writes into\n  // that wrapper instead of replacing it.\n  textRenderer(instance, td, row, col, prop, entry.output, cellProperties);\n};\n\nconst COLUMNS: ColumnSettings[] = [\n  { data: 'id', type: 'numeric', width: 70, readOnly: true },\n  { data: 'customer', type: 'text', width: 170 },\n  { data: 'region', type: 'text', width: 90 },\n  { data: 'sales', renderer: trendRenderer, width: 190, readOnly: true },\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const statsRef = useRef<HTMLParagraphElement>(null);\n\n  // Runs once per draw, scroll draws included, after every cell renderer. The counters change on\n  // every draw, so write them straight into the DOM rather than into React state, which would\n  // re-render the component on every draw.\n  const handleAfterViewRender = useCallback(() => {\n    if (statsRef.current) {\n      statsRef.current.textContent = `Renderer calls: ${stats.rendererCalls} | Computations: ${stats.computations}`;\n    }\n  }, []);\n\n  const renderAgain = useCallback(() => {\n    hotRef.current?.hotInstance?.render();\n  }, []);\n\n  const updateFirstRow = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    // Bring the first row into view, so its renderer runs and the counter shows the single\n    // recomputation. A cell outside the rendered band is not painted at all.\n    hot.scrollViewportTo({ row: 0 });\n\n    // Replace the array instead of changing it in place: the renderer compares inputs by identity.\n    const nextSales = data[0].sales.map((value, month) => Math.round(value * (1 + month / 10)));\n\n    hot.setSourceDataAtCell(0, 'sales', nextSales);\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={renderAgain}>Render again</button>\n          <button type=\"button\" onClick={updateFirstRow}>Update the first row</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['ID', 'Customer', 'Region', 'Trend (12 months)']}\n        columns={COLUMNS}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterViewRender={handleAfterViewRender}\n      />\n      <p ref={statsRef} style={{ margin: '8px 0 0', fontSize: 13, color: '#666' }}>\n        Renderer calls: 0 | Computations: 0\n      </p>\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/expensive-cell-renderer/react/example1.tsx","breadcrumb":["Recipes","Performance","Cache the output of an expensive cell renderer"],"guide":"recipes/performance/expensive-cell-renderer/expensive-cell-renderer.md","guideTitle":"Cache the output of an expensive cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/expensive-cell-renderer","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__angular__example1.ts.json
index 9ea37d735..1f2c1dd19 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-lazy-loading></example1-lazy-loading>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\ntype TaskRow = {\n  id: number;\n  title: string;\n  completed: boolean;\n  userId: number;\n};\n\nconst INITIAL_DATA: TaskRow[] = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-lazy-loading',\n  styles: [`\n    .status-line {\n      padding: 8px;\n      text-align: center;\n      color: #666;\n      font-size: 13px;\n    }\n  `],\n  template: `\n    <hot-table [data]=\"loadedData\" [settings]=\"gridSettings\"></hot-table>\n    <div class=\"status-line\">{{ statusText }}</div>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  loadedData: TaskRow[] = [...INITIAL_DATA];\n  // Always visible -- no blinking; text only changes at end-of-data or on error\n  statusText = 'Scroll table to load more records';\n\n  private currentPage = 1;\n  private isLoading = false;\n  private hasMore = true;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task Title', 'Status', 'Assignee'],\n    columns: [\n      { data: 'title', type: 'text', width: 400 },\n      { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n      { data: 'userId', type: 'numeric', width: 100 },\n    ],\n    rowHeaders: true,\n    height: 400,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n    loading: true,\n    afterScrollVertically: () => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const lastVisibleRow = (hot as any).view.getLastFullyVisibleRow();\n      const totalRows = hot.countRows();\n\n      if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n        this.fetchNextPage();\n      }\n    },\n  };\n\n  ngOnInit(): void {\n    this.fetchNextPage();\n  }\n\n  private async fetchNextPage(): Promise<void> {\n    if (this.isLoading || !this.hasMore) {\n      return;\n    }\n\n    this.isLoading = true;\n    this.hotTable?.hotInstance?.getPlugin('loading').show();\n\n    try {\n      const nextPage = this.currentPage + 1;\n      const response = await fetch(\n        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error: ${response.status}`);\n      }\n\n      const newRows: TaskRow[] = await response.json();\n\n      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n        this.hasMore = false;\n        this.statusText = 'All tasks loaded.';\n      } else {\n        this.currentPage = nextPage;\n        // Push rows in a loop to avoid stack overflow with large arrays\n        newRows.forEach((row) => this.loadedData.push(row));\n        // `updateData()` appends rows without resetting scroll position\n        this.hotTable?.hotInstance?.updateData(this.loadedData);\n      }\n    } catch {\n      this.statusText = 'Failed to load more tasks. Scroll down to retry.';\n      this.isLoading = false;\n      this.hotTable?.hotInstance?.getPlugin('loading').hide();\n\n      return;\n    }\n\n    this.isLoading = false;\n    this.hotTable?.hotInstance?.getPlugin('loading').hide();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/lazy-loading/angular/example1.ts","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-lazy-loading></example1-lazy-loading>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n/* start:skip-in-preview */\ntype TaskRow = {\n  id: number;\n  title: string;\n  completed: boolean;\n  userId: number;\n};\n\nconst INITIAL_DATA: TaskRow[] = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-lazy-loading',\n  styles: [`\n    .status-line {\n      padding: 8px;\n      text-align: center;\n      color: #666;\n      font-size: 13px;\n    }\n  `],\n  template: `\n    <hot-table [data]=\"loadedData\" [settings]=\"gridSettings\"></hot-table>\n    <div class=\"status-line\">{{ statusText }}</div>\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  loadedData: TaskRow[] = [...INITIAL_DATA];\n  // Always visible -- no blinking; text only changes at end-of-data or on error\n  statusText = 'Scroll table to load more records';\n\n  private currentPage = 1;\n  private isLoading = false;\n  private hasMore = true;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task Title', 'Status', 'Assignee'],\n    columns: [\n      { data: 'title', type: 'text', width: 400 },\n      { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n      { data: 'userId', type: 'numeric', width: 100 },\n    ],\n    rowHeaders: true,\n    height: 400,\n    width: '100%',\n    stretchH: 'all',\n    autoWrapRow: true,\n    loading: true,\n    afterScrollVertically: () => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const lastVisibleRow = (hot as any).view.getLastFullyVisibleRow();\n      const totalRows = hot.countRows();\n\n      if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n        this.fetchNextPage();\n      }\n    },\n  };\n\n  ngOnInit(): void {\n    this.fetchNextPage();\n  }\n\n  private async fetchNextPage(): Promise<void> {\n    if (this.isLoading || !this.hasMore) {\n      return;\n    }\n\n    this.isLoading = true;\n    this.hotTable?.hotInstance?.getPlugin('loading').show();\n\n    try {\n      const nextPage = this.currentPage + 1;\n      const response = await fetch(\n        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error: ${response.status}`);\n      }\n\n      const newRows: TaskRow[] = await response.json();\n\n      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n        this.hasMore = false;\n        this.statusText = 'All tasks loaded.';\n      } else {\n        this.currentPage = nextPage;\n        // Push rows in a loop to avoid stack overflow with large arrays\n        newRows.forEach((row) => this.loadedData.push(row));\n        // `updateData()` appends rows without resetting scroll position\n        this.hotTable?.hotInstance?.updateData(this.loadedData);\n      }\n    } catch {\n      this.statusText = 'Failed to load more tasks. Scroll down to retry.';\n      this.isLoading = false;\n      this.hotTable?.hotInstance?.getPlugin('loading').hide();\n\n      return;\n    }\n\n    this.isLoading = false;\n    this.hotTable?.hotInstance?.getPlugin('loading').hide();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/lazy-loading/angular/example1.ts","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__javascript__example1.js.json
index c5decb7f8..7af40dea6 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst INITIAL_DATA = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\n// Pagination state\nlet currentPage = 1;\nlet isLoading = false;\nlet hasMore = true;\nlet loadedData = [...INITIAL_DATA];\n\n// Number of rows from the bottom that triggers the next page fetch\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\nconst container = document.querySelector('#example1');\n\n// Persistent status line below the grid -- always visible, never blinks\nconst statusEl = document.createElement('div');\n\nstatusEl.style.cssText = 'padding:8px; text-align:center; color:#666; font-size:13px;';\nstatusEl.textContent = 'Scroll table to load more records';\ncontainer.insertAdjacentElement('afterend', statusEl);\n\n/**\n * Fetches the next page of tasks from the JSONPlaceholder API and appends\n * the rows to the grid using `updateData()`. This method preserves scroll\n * position and column state -- unlike `loadData()`, which resets both.\n */\nasync function fetchNextPage() {\n  if (isLoading || !hasMore) {\n    return;\n  }\n\n  isLoading = true;\n  hot.getPlugin('loading').show();\n\n  try {\n    const nextPage = currentPage + 1;\n    const response = await fetch(\n      `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n    );\n\n    if (!response.ok) {\n      throw new Error(`HTTP error: ${response.status}`);\n    }\n\n    const newRows = await response.json();\n\n    if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n      hasMore = false;\n      statusEl.textContent = 'All tasks loaded.';\n    } else {\n      currentPage = nextPage;\n      loadedData = [...loadedData, ...newRows];\n      // `updateData()` replaces the data source without resetting scroll\n      // position, selection, or column configuration.\n      hot.updateData(loadedData);\n    }\n  } catch {\n    statusEl.textContent = 'Failed to load more tasks. Scroll down to retry.';\n    isLoading = false;\n    hot.getPlugin('loading').hide();\n\n    return;\n  }\n\n  isLoading = false;\n  hot.getPlugin('loading').hide();\n}\n\nconst hot = new Handsontable(container, {\n  data: loadedData,\n  colHeaders: ['Task Title', 'Status', 'Assignee'],\n  columns: [\n    { data: 'title', type: 'text', width: 400 },\n    { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n    { data: 'userId', type: 'numeric', width: 100 },\n  ],\n  rowHeaders: true,\n  height: 400,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  loading: true,\n  afterScrollVertically() {\n    // `lastVisibleRow` is the visual index of the last fully visible row.\n    const lastVisibleRow = this.view.getLastFullyVisibleRow();\n    const totalRows = this.countRows();\n\n    // Trigger a fetch when the user is within LOAD_THRESHOLD rows of the\n    // last loaded row. Using `>= 0` guards against -1 when no rows are\n    // visible yet (e.g., during initial render).\n    if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n      fetchNextPage();\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Load the first remote page on initialization. The grid already shows\n// INITIAL_DATA; this call replaces it with server data so the example\n// works even without a real backend when the network is unavailable.\nfetchNextPage();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/lazy-loading/javascript/example1.js","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst INITIAL_DATA = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\n// Pagination state\nlet currentPage = 1;\nlet isLoading = false;\nlet hasMore = true;\nlet loadedData = [...INITIAL_DATA];\n\n// Number of rows from the bottom that triggers the next page fetch\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\nconst container = document.querySelector('#example1');\n\n// Persistent status line below the grid -- always visible, never blinks\nconst statusEl = document.createElement('div');\n\nstatusEl.style.cssText = 'padding:8px; text-align:center; color:#666; font-size:13px;';\nstatusEl.textContent = 'Scroll table to load more records';\ncontainer.insertAdjacentElement('afterend', statusEl);\n\n/**\n * Fetches the next page of tasks from the JSONPlaceholder API and appends\n * the rows to the grid using `updateData()`. This method preserves scroll\n * position and column state -- unlike `loadData()`, which resets both.\n */\nasync function fetchNextPage() {\n  if (isLoading || !hasMore) {\n    return;\n  }\n\n  isLoading = true;\n  hot.getPlugin('loading').show();\n\n  try {\n    const nextPage = currentPage + 1;\n    const response = await fetch(\n      `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n    );\n\n    if (!response.ok) {\n      throw new Error(`HTTP error: ${response.status}`);\n    }\n\n    const newRows = await response.json();\n\n    if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n      hasMore = false;\n      statusEl.textContent = 'All tasks loaded.';\n    } else {\n      currentPage = nextPage;\n      loadedData = [...loadedData, ...newRows];\n      // `updateData()` replaces the data source without resetting scroll\n      // position, selection, or column configuration.\n      hot.updateData(loadedData);\n    }\n  } catch {\n    statusEl.textContent = 'Failed to load more tasks. Scroll down to retry.';\n    isLoading = false;\n    hot.getPlugin('loading').hide();\n\n    return;\n  }\n\n  isLoading = false;\n  hot.getPlugin('loading').hide();\n}\n\nconst hot = new Handsontable(container, {\n  data: loadedData,\n  colHeaders: ['Task Title', 'Status', 'Assignee'],\n  columns: [\n    { data: 'title', type: 'text', width: 400 },\n    { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n    { data: 'userId', type: 'numeric', width: 100 },\n  ],\n  rowHeaders: true,\n  height: 400,\n  width: '100%',\n  stretchH: 'all',\n  autoWrapRow: true,\n  loading: true,\n  afterScrollVertically() {\n    // `lastVisibleRow` is the visual index of the last fully visible row.\n    const lastVisibleRow = this.view.getLastFullyVisibleRow();\n    const totalRows = this.countRows();\n\n    // Trigger a fetch when the user is within LOAD_THRESHOLD rows of the\n    // last loaded row. Using `>= 0` guards against -1 when no rows are\n    // visible yet (e.g., during initial render).\n    if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n      fetchNextPage();\n    }\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Load the first remote page on initialization. The grid already shows\n// INITIAL_DATA; this call replaces it with server data so the example\n// works even without a real backend when the network is unavailable.\nfetchNextPage();","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/lazy-loading/javascript/example1.js","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__react__example1.tsx.json
index 44da205f0..3b8cd172d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__lazy-loading__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useCallback, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype TaskRow = {\n  id: number;\n  title: string;\n  completed: boolean;\n  userId: number;\n};\n\nconst INITIAL_DATA: TaskRow[] = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const currentPage = useRef(1);\n  const isLoading = useRef(false);\n  const hasMore = useRef(true);\n  const loadedData = useRef<TaskRow[]>([...INITIAL_DATA]);\n  // Always visible -- no blinking; text only changes at end-of-data or on error\n  const [statusText, setStatusText] = useState('Scroll table to load more records');\n\n  const fetchNextPage = useCallback(async (): Promise<void> => {\n    if (isLoading.current || !hasMore.current) {\n      return;\n    }\n\n    isLoading.current = true;\n    hotRef.current?.hotInstance?.getPlugin('loading').show();\n\n    try {\n      const nextPage = currentPage.current + 1;\n      const response = await fetch(\n        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error: ${response.status}`);\n      }\n\n      const newRows: TaskRow[] = await response.json();\n\n      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n        hasMore.current = false;\n        setStatusText('All tasks loaded.');\n      } else {\n        currentPage.current = nextPage;\n        loadedData.current = [...loadedData.current, ...newRows];\n        // `updateData()` appends rows without resetting scroll position\n        hotRef.current?.hotInstance?.updateData(loadedData.current);\n      }\n    } catch {\n      setStatusText('Failed to load more tasks. Scroll down to retry.');\n      isLoading.current = false;\n      hotRef.current?.hotInstance?.getPlugin('loading').hide();\n\n      return;\n    }\n\n    isLoading.current = false;\n    hotRef.current?.hotInstance?.getPlugin('loading').hide();\n  }, []);\n\n  useEffect(() => {\n    fetchNextPage();\n  }, [fetchNextPage]);\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={INITIAL_DATA}\n        colHeaders={['Task Title', 'Status', 'Assignee']}\n        columns={[\n          { data: 'title', type: 'text', width: 400 },\n          { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n          { data: 'userId', type: 'numeric', width: 100 },\n        ]}\n        rowHeaders={true}\n        height={400}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        loading={true}\n        afterScrollVertically={function (this: Handsontable) {\n          const lastVisibleRow = this.view.getLastFullyVisibleRow();\n          const totalRows = this.countRows();\n\n          if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n            fetchNextPage();\n          }\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div style={{ padding: '8px', textAlign: 'center', color: '#666', fontSize: '13px' }}>\n        {statusText}\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/lazy-loading/react/example1.tsx","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Performance ▸ Lazy loading with pagination · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useCallback, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\ntype TaskRow = {\n  id: number;\n  title: string;\n  completed: boolean;\n  userId: number;\n};\n\nconst INITIAL_DATA: TaskRow[] = [\n  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },\n  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },\n  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },\n  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },\n  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },\n  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },\n  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },\n  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },\n  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },\n  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },\n  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },\n  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },\n  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },\n  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },\n  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },\n  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },\n  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },\n  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },\n  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },\n  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },\n];\n/* end:skip-in-preview */\n\nconst LOAD_THRESHOLD = 5;\nconst PAGE_SIZE = 20;\n// JSONPlaceholder has 200 todos total (10 pages of 20)\nconst TOTAL_PAGES = 10;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  const currentPage = useRef(1);\n  const isLoading = useRef(false);\n  const hasMore = useRef(true);\n  const loadedData = useRef<TaskRow[]>([...INITIAL_DATA]);\n  // Always visible -- no blinking; text only changes at end-of-data or on error\n  const [statusText, setStatusText] = useState('Scroll table to load more records');\n\n  const fetchNextPage = useCallback(async (): Promise<void> => {\n    if (isLoading.current || !hasMore.current) {\n      return;\n    }\n\n    isLoading.current = true;\n    hotRef.current?.hotInstance?.getPlugin('loading').show();\n\n    try {\n      const nextPage = currentPage.current + 1;\n      const response = await fetch(\n        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error: ${response.status}`);\n      }\n\n      const newRows: TaskRow[] = await response.json();\n\n      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {\n        hasMore.current = false;\n        setStatusText('All tasks loaded.');\n      } else {\n        currentPage.current = nextPage;\n        loadedData.current = [...loadedData.current, ...newRows];\n        // `updateData()` appends rows without resetting scroll position\n        hotRef.current?.hotInstance?.updateData(loadedData.current);\n      }\n    } catch {\n      setStatusText('Failed to load more tasks. Scroll down to retry.');\n      isLoading.current = false;\n      hotRef.current?.hotInstance?.getPlugin('loading').hide();\n\n      return;\n    }\n\n    isLoading.current = false;\n    hotRef.current?.hotInstance?.getPlugin('loading').hide();\n  }, []);\n\n  useEffect(() => {\n    fetchNextPage();\n  }, [fetchNextPage]);\n\n  return (\n    <>\n      <HotTable\n        ref={hotRef}\n        data={INITIAL_DATA}\n        colHeaders={['Task Title', 'Status', 'Assignee']}\n        columns={[\n          { data: 'title', type: 'text', width: 400 },\n          { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },\n          { data: 'userId', type: 'numeric', width: 100 },\n        ]}\n        rowHeaders={true}\n        height={400}\n        width=\"100%\"\n        stretchH=\"all\"\n        autoWrapRow={true}\n        loading={true}\n        afterScrollVertically={function (this: Handsontable) {\n          const lastVisibleRow = this.view.getLastFullyVisibleRow();\n          const totalRows = this.countRows();\n\n          if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {\n            fetchNextPage();\n          }\n        }}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <div style={{ padding: '8px', textAlign: 'center', color: '#666', fontSize: '13px' }}>\n        {statusText}\n      </div>\n    </>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/lazy-loading/react/example1.tsx","breadcrumb":["Recipes","Performance","Lazy loading with pagination"],"guide":"recipes/performance/lazy-loading/lazy-loading.md","guideTitle":"Lazy loading with pagination","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/lazy-loading","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__angular__example1.ts.json
index c4d8c1eef..a2139d1fc 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-persist-column-layout></example1-persist-column-layout></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\nconst DEFAULT_COL_WIDTHS: number[] = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER: number[] = [0, 1, 2, 3, 4, 5];\n\ntype SavedLayout = { widths: number[]; order: number[] };\n\nfunction loadLayout(): SavedLayout | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed: unknown = JSON.parse(raw);\n\n    if (\n      typeof parsed !== 'object' ||\n      parsed === null ||\n      !Array.isArray((parsed as SavedLayout).widths) ||\n      !Array.isArray((parsed as SavedLayout).order)\n    ) {\n      return null;\n    }\n\n    return parsed as SavedLayout;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveLayout(widths: number[], order: number[]): void {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-persist-column-layout',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"resetLayout()\">Reset layout</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status'],\n    columns: [\n      { data: 'sku', type: 'text' },\n      { data: 'name', type: 'text' },\n      { data: 'category', type: 'text' },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'stock', type: 'numeric' },\n      { data: 'status', type: 'text' },\n    ],\n    colWidths: initialWidths,\n    manualColumnResize: true,\n    manualColumnMove: initialOrder ?? true,\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n    autoWrapRow: true,\n    afterColumnResize: () => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) return;\n      const widths = (hot.getColHeader() as string[]).map(\n        (_, visualIndex) => hot.getColWidth(visualIndex) as number\n      );\n\n      saveLayout(widths, this.getCurrentOrder());\n    },\n    afterColumnMove: (\n      _movedColumns: number[],\n      _finalIndex: number,\n      _dropIndex: number | undefined,\n      _movePossible: boolean,\n      movePerformed: boolean\n    ) => {\n      if (!movePerformed) return;\n      saveLayout(this.getCurrentWidths(), this.getCurrentOrder());\n    },\n  };\n\n  resetLayout(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return;\n    localStorage.removeItem(STORAGE_KEY);\n    hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n    const resizePlugin = hot.getPlugin('manualColumnResize');\n\n    DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n      resizePlugin.setManualSize(visualIndex, width);\n    });\n    hot.render();\n  }\n\n  private getCurrentOrder(): number[] {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_ORDER;\n    const count = hot.countCols();\n    const order: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      order.push(hot.toPhysicalColumn(i) as number);\n    }\n\n    return order;\n  }\n\n  private getCurrentWidths(): number[] {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_WIDTHS;\n    const count = hot.countCols();\n    const widths: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      widths.push(hot.getColWidth(i) as number);\n    }\n\n    return widths;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/persist-column-layout/angular/example1.ts","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-persist-column-layout></example1-persist-column-layout></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\nconst data: Handsontable.RowObject[] = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\nconst DEFAULT_COL_WIDTHS: number[] = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER: number[] = [0, 1, 2, 3, 4, 5];\n\ntype SavedLayout = { widths: number[]; order: number[] };\n\nfunction loadLayout(): SavedLayout | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed: unknown = JSON.parse(raw);\n\n    if (\n      typeof parsed !== 'object' ||\n      parsed === null ||\n      !Array.isArray((parsed as SavedLayout).widths) ||\n      !Array.isArray((parsed as SavedLayout).order)\n    ) {\n      return null;\n    }\n\n    return parsed as SavedLayout;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveLayout(widths: number[], order: number[]): void {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-persist-column-layout',\n  template: `\n    <div class=\"example-controls-container\">\n      <div class=\"controls\">\n        <button type=\"button\" (click)=\"resetLayout()\">Reset layout</button>\n      </div>\n    </div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data = data;\n\n  gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status'],\n    columns: [\n      { data: 'sku', type: 'text' },\n      { data: 'name', type: 'text' },\n      { data: 'category', type: 'text' },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'stock', type: 'numeric' },\n      { data: 'status', type: 'text' },\n    ],\n    colWidths: initialWidths,\n    manualColumnResize: true,\n    manualColumnMove: initialOrder ?? true,\n    rowHeaders: true,\n    height: 320,\n    width: '100%',\n    autoWrapRow: true,\n    afterColumnResize: () => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) return;\n      const widths = (hot.getColHeader() as string[]).map(\n        (_, visualIndex) => hot.getColWidth(visualIndex) as number\n      );\n\n      saveLayout(widths, this.getCurrentOrder());\n    },\n    afterColumnMove: (\n      _movedColumns: number[],\n      _finalIndex: number,\n      _dropIndex: number | undefined,\n      _movePossible: boolean,\n      movePerformed: boolean\n    ) => {\n      if (!movePerformed) return;\n      saveLayout(this.getCurrentWidths(), this.getCurrentOrder());\n    },\n  };\n\n  resetLayout(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return;\n    localStorage.removeItem(STORAGE_KEY);\n    hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n    const resizePlugin = hot.getPlugin('manualColumnResize');\n\n    DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n      resizePlugin.setManualSize(visualIndex, width);\n    });\n    hot.render();\n  }\n\n  private getCurrentOrder(): number[] {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_ORDER;\n    const count = hot.countCols();\n    const order: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      order.push(hot.toPhysicalColumn(i) as number);\n    }\n\n    return order;\n  }\n\n  private getCurrentWidths(): number[] {\n    const hot = this.hotTable?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_WIDTHS;\n    const count = hot.countCols();\n    const widths: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      widths.push(hot.getColWidth(i) as number);\n    }\n\n    return widths;\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/performance/persist-column-layout/angular/example1.ts","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__javascript__example1.js.json
index 072383471..6242a3f1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"reset-layout-btn\" type=\"button\">Reset layout</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// Default column widths and order used when no saved layout exists.\nconst DEFAULT_COL_WIDTHS = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER = [0, 1, 2, 3, 4, 5];\n\n/**\n * Reads the saved layout from localStorage.\n * Returns null when the key is absent, unparseable, or from an older schema.\n */\nfunction loadLayout() {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed = JSON.parse(raw);\n\n    // Guard against stale data that lacks expected keys.\n    if (!Array.isArray(parsed.widths) || !Array.isArray(parsed.order)) return null;\n\n    return parsed;\n  } catch {\n    return null;\n  }\n}\n\n/** Persists column widths and order to localStorage. */\nfunction saveLayout(widths, order) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status'],\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'name', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'stock', type: 'numeric' },\n    { data: 'status', type: 'text' },\n  ],\n  colWidths: initialWidths,\n  manualColumnResize: true,\n  manualColumnMove: initialOrder || true,\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Capture the new width array after every column resize and persist it.\n  afterColumnResize() {\n    const widths = hot.getColHeader().map((_, visualIndex) =>\n      hot.getColWidth(visualIndex)\n    );\n\n    saveLayout(widths, getCurrentOrder());\n  },\n\n  // Capture the new column order after every column move and persist it.\n  afterColumnMove(_movedColumns, _finalIndex, _dropIndex, _movePossible, movePerformed) {\n    if (!movePerformed) return;\n    saveLayout(getCurrentWidths(), getCurrentOrder());\n  },\n});\n\n/** Returns the current visual-to-physical column order as an array of physical indices. */\nfunction getCurrentOrder() {\n  const count = hot.countCols();\n  const order = [];\n\n  for (let visualIndex = 0; visualIndex < count; visualIndex++) {\n    order.push(hot.toPhysicalColumn(visualIndex));\n  }\n\n  return order;\n}\n\n/** Returns the current column widths in visual order. */\nfunction getCurrentWidths() {\n  const count = hot.countCols();\n  const widths = [];\n\n  for (let visualIndex = 0; visualIndex < count; visualIndex++) {\n    widths.push(hot.getColWidth(visualIndex));\n  }\n\n  return widths;\n}\n\n// Reset button: clear localStorage and restore the default layout.\ndocument.querySelector('#reset-layout-btn').addEventListener('click', () => {\n  localStorage.removeItem(STORAGE_KEY);\n\n  // Reset column order to the identity sequence [0, 1, 2, 3, 4, 5].\n  hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n\n  // Reset each column width through the ManualColumnResize plugin API.\n  const resizePlugin = hot.getPlugin('manualColumnResize');\n\n  DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n    resizePlugin.setManualSize(visualIndex, width);\n  });\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/persist-column-layout/javascript/example1.js","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-controls-container\">\n    <div class=\"controls\">\n      <button id=\"reset-layout-btn\" type=\"button\">Reset layout</button>\n    </div>\n  </div>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\nconst data = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\n// Default column widths and order used when no saved layout exists.\nconst DEFAULT_COL_WIDTHS = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER = [0, 1, 2, 3, 4, 5];\n\n/**\n * Reads the saved layout from localStorage.\n * Returns null when the key is absent, unparseable, or from an older schema.\n */\nfunction loadLayout() {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed = JSON.parse(raw);\n\n    // Guard against stale data that lacks expected keys.\n    if (!Array.isArray(parsed.widths) || !Array.isArray(parsed.order)) return null;\n\n    return parsed;\n  } catch {\n    return null;\n  }\n}\n\n/** Persists column widths and order to localStorage. */\nfunction saveLayout(widths, order) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status'],\n  columns: [\n    { data: 'sku', type: 'text' },\n    { data: 'name', type: 'text' },\n    { data: 'category', type: 'text' },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'stock', type: 'numeric' },\n    { data: 'status', type: 'text' },\n  ],\n  colWidths: initialWidths,\n  manualColumnResize: true,\n  manualColumnMove: initialOrder || true,\n  rowHeaders: true,\n  height: 320,\n  width: '100%',\n  autoWrapRow: true,\n  licenseKey: 'non-commercial-and-evaluation',\n\n  // Capture the new width array after every column resize and persist it.\n  afterColumnResize() {\n    const widths = hot.getColHeader().map((_, visualIndex) =>\n      hot.getColWidth(visualIndex)\n    );\n\n    saveLayout(widths, getCurrentOrder());\n  },\n\n  // Capture the new column order after every column move and persist it.\n  afterColumnMove(_movedColumns, _finalIndex, _dropIndex, _movePossible, movePerformed) {\n    if (!movePerformed) return;\n    saveLayout(getCurrentWidths(), getCurrentOrder());\n  },\n});\n\n/** Returns the current visual-to-physical column order as an array of physical indices. */\nfunction getCurrentOrder() {\n  const count = hot.countCols();\n  const order = [];\n\n  for (let visualIndex = 0; visualIndex < count; visualIndex++) {\n    order.push(hot.toPhysicalColumn(visualIndex));\n  }\n\n  return order;\n}\n\n/** Returns the current column widths in visual order. */\nfunction getCurrentWidths() {\n  const count = hot.countCols();\n  const widths = [];\n\n  for (let visualIndex = 0; visualIndex < count; visualIndex++) {\n    widths.push(hot.getColWidth(visualIndex));\n  }\n\n  return widths;\n}\n\n// Reset button: clear localStorage and restore the default layout.\ndocument.querySelector('#reset-layout-btn').addEventListener('click', () => {\n  localStorage.removeItem(STORAGE_KEY);\n\n  // Reset column order to the identity sequence [0, 1, 2, 3, 4, 5].\n  hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n\n  // Reset each column width through the ManualColumnResize plugin API.\n  const resizePlugin = hot.getPlugin('manualColumnResize');\n\n  DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n    resizePlugin.setManualSize(visualIndex, width);\n  });\n\n  hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/performance/persist-column-layout/javascript/example1.js","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__react__example1.tsx.json
index 1a2a32441..5e36c481b 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__performance__persist-column-layout__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\ntype ProductRow = {\n  sku: string;\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n  status: string;\n};\n\nconst data: ProductRow[] = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\nconst DEFAULT_COL_WIDTHS: number[] = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER: number[] = [0, 1, 2, 3, 4, 5];\n\nconst COLUMNS: ColumnSettings[] = [\n  { data: 'sku', type: 'text' },\n  { data: 'name', type: 'text' },\n  { data: 'category', type: 'text' },\n  { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'stock', type: 'numeric' },\n  { data: 'status', type: 'text' },\n];\n\ntype SavedLayout = { widths: number[]; order: number[] };\n\nfunction loadLayout(): SavedLayout | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed: unknown = JSON.parse(raw);\n\n    if (\n      typeof parsed !== 'object' ||\n      parsed === null ||\n      !Array.isArray((parsed as SavedLayout).widths) ||\n      !Array.isArray((parsed as SavedLayout).order)\n    ) {\n      return null;\n    }\n\n    return parsed as SavedLayout;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveLayout(widths: number[], order: number[]): void {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const getCurrentOrder = useCallback((): number[] => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_ORDER;\n    const count = hot.countCols();\n    const order: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      order.push(hot.toPhysicalColumn(i) as number);\n    }\n\n    return order;\n  }, []);\n\n  const getCurrentWidths = useCallback((): number[] => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_WIDTHS;\n    const count = hot.countCols();\n    const widths: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      widths.push(hot.getColWidth(i) as number);\n    }\n\n    return widths;\n  }, []);\n\n  const handleAfterColumnResize = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return;\n    const widths = (hot.getColHeader() as string[]).map((_, visualIndex) =>\n      hot.getColWidth(visualIndex) as number\n    );\n\n    saveLayout(widths, getCurrentOrder());\n  }, [getCurrentOrder]);\n\n  const handleAfterColumnMove = useCallback(\n    (\n      _movedColumns: number[],\n      _finalIndex: number,\n      _dropIndex: number | undefined,\n      _movePossible: boolean,\n      movePerformed: boolean\n    ) => {\n      if (!movePerformed) return;\n      saveLayout(getCurrentWidths(), getCurrentOrder());\n    },\n    [getCurrentWidths, getCurrentOrder]\n  );\n\n  const handleReset = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return;\n    localStorage.removeItem(STORAGE_KEY);\n    hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n    const resizePlugin = hot.getPlugin('manualColumnResize');\n\n    DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n      resizePlugin.setManualSize(visualIndex, width);\n    });\n    hot.render();\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleReset}>Reset layout</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status']}\n        columns={COLUMNS}\n        colWidths={initialWidths}\n        manualColumnResize={true}\n        manualColumnMove={initialOrder || true}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterColumnResize={handleAfterColumnResize}\n        afterColumnMove={handleAfterColumnMove}\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/persist-column-layout/react/example1.tsx","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Performance ▸ Persist and restore column widths and order · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useCallback, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst STORAGE_KEY = 'ht-column-layout-v1';\n\n/* start:skip-in-preview */\ntype ProductRow = {\n  sku: string;\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n  status: string;\n};\n\nconst data: ProductRow[] = [\n  { sku: 'SKU-001', name: 'Wireless Keyboard', category: 'Electronics', price: 49.99, stock: 142, status: 'Active' },\n  { sku: 'SKU-002', name: 'USB-C Hub', category: 'Electronics', price: 34.99, stock: 87, status: 'Active' },\n  { sku: 'SKU-003', name: 'Ergonomic Chair', category: 'Furniture', price: 399.00, stock: 23, status: 'Active' },\n  { sku: 'SKU-004', name: 'Monitor Stand', category: 'Furniture', price: 79.99, stock: 55, status: 'Active' },\n  { sku: 'SKU-005', name: 'Noise-Cancelling Headphones', category: 'Electronics', price: 199.99, stock: 0, status: 'Out of Stock' },\n  { sku: 'SKU-006', name: 'Mechanical Keyboard', category: 'Electronics', price: 129.99, stock: 34, status: 'Active' },\n  { sku: 'SKU-007', name: 'Standing Desk', category: 'Furniture', price: 549.00, stock: 12, status: 'Active' },\n  { sku: 'SKU-008', name: 'Webcam HD', category: 'Electronics', price: 89.99, stock: 61, status: 'Active' },\n  { sku: 'SKU-009', name: 'Cable Organizer', category: 'Accessories', price: 14.99, stock: 203, status: 'Active' },\n  { sku: 'SKU-010', name: 'Laptop Stand', category: 'Accessories', price: 29.99, stock: 0, status: 'Discontinued' },\n  { sku: 'SKU-011', name: 'Blue Light Glasses', category: 'Accessories', price: 24.99, stock: 98, status: 'Active' },\n  { sku: 'SKU-012', name: 'Desk Lamp', category: 'Furniture', price: 44.99, stock: 77, status: 'Active' },\n];\n/* end:skip-in-preview */\n\nconst DEFAULT_COL_WIDTHS: number[] = [90, 200, 120, 90, 70, 110];\nconst DEFAULT_COL_ORDER: number[] = [0, 1, 2, 3, 4, 5];\n\nconst COLUMNS: ColumnSettings[] = [\n  { data: 'sku', type: 'text' },\n  { data: 'name', type: 'text' },\n  { data: 'category', type: 'text' },\n  { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  { data: 'stock', type: 'numeric' },\n  { data: 'status', type: 'text' },\n];\n\ntype SavedLayout = { widths: number[]; order: number[] };\n\nfunction loadLayout(): SavedLayout | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n\n    if (!raw) return null;\n    const parsed: unknown = JSON.parse(raw);\n\n    if (\n      typeof parsed !== 'object' ||\n      parsed === null ||\n      !Array.isArray((parsed as SavedLayout).widths) ||\n      !Array.isArray((parsed as SavedLayout).order)\n    ) {\n      return null;\n    }\n\n    return parsed as SavedLayout;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveLayout(widths: number[], order: number[]): void {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify({ widths, order }));\n}\n\nconst saved = loadLayout();\nconst initialWidths = saved ? saved.widths : DEFAULT_COL_WIDTHS;\nconst initialOrder = saved ? saved.order : null;\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const getCurrentOrder = useCallback((): number[] => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_ORDER;\n    const count = hot.countCols();\n    const order: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      order.push(hot.toPhysicalColumn(i) as number);\n    }\n\n    return order;\n  }, []);\n\n  const getCurrentWidths = useCallback((): number[] => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return DEFAULT_COL_WIDTHS;\n    const count = hot.countCols();\n    const widths: number[] = [];\n\n    for (let i = 0; i < count; i++) {\n      widths.push(hot.getColWidth(i) as number);\n    }\n\n    return widths;\n  }, []);\n\n  const handleAfterColumnResize = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return;\n    const widths = (hot.getColHeader() as string[]).map((_, visualIndex) =>\n      hot.getColWidth(visualIndex) as number\n    );\n\n    saveLayout(widths, getCurrentOrder());\n  }, [getCurrentOrder]);\n\n  const handleAfterColumnMove = useCallback(\n    (\n      _movedColumns: number[],\n      _finalIndex: number,\n      _dropIndex: number | undefined,\n      _movePossible: boolean,\n      movePerformed: boolean\n    ) => {\n      if (!movePerformed) return;\n      saveLayout(getCurrentWidths(), getCurrentOrder());\n    },\n    [getCurrentWidths, getCurrentOrder]\n  );\n\n  const handleReset = useCallback(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) return;\n    localStorage.removeItem(STORAGE_KEY);\n    hot.columnIndexMapper.setIndexesSequence(DEFAULT_COL_ORDER);\n    const resizePlugin = hot.getPlugin('manualColumnResize');\n\n    DEFAULT_COL_WIDTHS.forEach((width, visualIndex) => {\n      resizePlugin.setManualSize(visualIndex, width);\n    });\n    hot.render();\n  }, []);\n\n  return (\n    <div>\n      <div className=\"example-controls-container\">\n        <div className=\"controls\">\n          <button type=\"button\" onClick={handleReset}>Reset layout</button>\n        </div>\n      </div>\n      <HotTable\n        ref={hotRef}\n        data={data}\n        colHeaders={['SKU', 'Name', 'Category', 'Price ($)', 'Stock', 'Status']}\n        columns={COLUMNS}\n        colWidths={initialWidths}\n        manualColumnResize={true}\n        manualColumnMove={initialOrder || true}\n        rowHeaders={true}\n        height={320}\n        width=\"100%\"\n        autoWrapRow={true}\n        licenseKey=\"non-commercial-and-evaluation\"\n        afterColumnResize={handleAfterColumnResize}\n        afterColumnMove={handleAfterColumnMove}\n      />\n    </div>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/performance/persist-column-layout/react/example1.tsx","breadcrumb":["Recipes","Performance","Persist and restore column widths and order"],"guide":"recipes/performance/persist-column-layout/persist-column-layout.md","guideTitle":"Persist and restore column widths and order","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/performance/persist-column-layout","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__angular__example1.ts.json
index 3fbbbadcc..b10115a91 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-chartjs-sync></example1-chartjs-sync></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-chartjs-sync',\n  styles: [`\n    #chart-canvas {\n      max-height: 300px;\n      margin-top: 16px;\n    }\n  `],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <canvas #chartCanvas id=\"chart-canvas\"></canvas>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('chartCanvas') readonly canvasRef!: ElementRef<HTMLCanvasElement>;\n\n  readonly data = data;\n\n  private chart: Chart<'bar'> | null = null;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n    columns: [\n      { data: 'campaign', type: 'text', width: 200 },\n      { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    ],\n    rowHeaders: true,\n    selectionMode: 'range',\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    afterSelectionEnd: () => {\n      this.updateChart();\n    },\n    afterDeselect: () => {\n      this.updateChart();\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n  };\n\n  ngAfterViewInit(): void {\n    const config: ChartConfiguration<'bar'> = {\n      type: 'bar',\n      data: {\n        labels: ['Select rows above to compare campaigns'],\n        datasets: [\n          {\n            label: 'Q1 Revenue ($)',\n            data: [0],\n            backgroundColor: 'rgba(54, 162, 235, 0.7)',\n            borderColor: 'rgba(54, 162, 235, 1)',\n            borderWidth: 1,\n          },\n          {\n            label: 'Q2 Revenue ($)',\n            data: [0],\n            backgroundColor: 'rgba(255, 99, 132, 0.7)',\n            borderColor: 'rgba(255, 99, 132, 1)',\n            borderWidth: 1,\n          },\n        ],\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: { position: 'top' },\n          title: { display: true, text: 'Campaign Revenue Comparison' },\n        },\n        scales: {\n          y: {\n            beginAtZero: true,\n            ticks: {\n              callback: (value) => `$${Number(value).toLocaleString()}`,\n            },\n          },\n        },\n      },\n    };\n\n    this.chart = new Chart(this.canvasRef.nativeElement, config);\n  }\n\n  ngOnDestroy(): void {\n    this.chart?.destroy();\n  }\n\n  private updateChart(): void {\n    const hot = this.hotTable?.hotInstance;\n    const chart = this.chart;\n\n    if (!hot || !chart) {\n      return;\n    }\n\n    const selected = hot.getSelected();\n\n    if (!selected || selected.length === 0) {\n      chart.data.labels = ['Select rows above to compare campaigns'];\n      chart.data.datasets[0].data = [0];\n      chart.data.datasets[1].data = [0];\n      chart.update();\n\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    for (const [r1, , r2] of selected) {\n      const minRow = Math.min(r1, r2);\n      const maxRow = Math.max(r1, r2);\n\n      for (let row = minRow; row <= maxRow; row++) {\n        rowSet.add(row);\n      }\n    }\n\n    const rows = [...rowSet].sort((a, b) => a - b);\n    const labels: string[] = [];\n    const q1Values: number[] = [];\n    const q2Values: number[] = [];\n\n    for (const row of rows) {\n      const rowData = hot.getDataAtRow(row);\n\n      labels.push(rowData[0] as string);\n      q1Values.push(rowData[2] as number);\n      q2Values.push(rowData[4] as number);\n    }\n\n    chart.data.labels = labels;\n    chart.data.datasets[0].data = q1Values;\n    chart.data.datasets[1].data = q2Values;\n    chart.update();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/real-time/chartjs-sync/angular/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div><example1-chartjs-sync></example1-chartjs-sync></div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-chartjs-sync',\n  styles: [`\n    #chart-canvas {\n      max-height: 300px;\n      margin-top: 16px;\n    }\n  `],\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    <canvas #chartCanvas id=\"chart-canvas\"></canvas>\n  `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n  @ViewChild('chartCanvas') readonly canvasRef!: ElementRef<HTMLCanvasElement>;\n\n  readonly data = data;\n\n  private chart: Chart<'bar'> | null = null;\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n    columns: [\n      { data: 'campaign', type: 'text', width: 200 },\n      { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n      { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    ],\n    rowHeaders: true,\n    selectionMode: 'range',\n    height: 'auto',\n    width: '100%',\n    autoWrapRow: true,\n    afterSelectionEnd: () => {\n      this.updateChart();\n    },\n    afterDeselect: () => {\n      this.updateChart();\n    },\n    licenseKey: 'non-commercial-and-evaluation',\n  };\n\n  ngAfterViewInit(): void {\n    const config: ChartConfiguration<'bar'> = {\n      type: 'bar',\n      data: {\n        labels: ['Select rows above to compare campaigns'],\n        datasets: [\n          {\n            label: 'Q1 Revenue ($)',\n            data: [0],\n            backgroundColor: 'rgba(54, 162, 235, 0.7)',\n            borderColor: 'rgba(54, 162, 235, 1)',\n            borderWidth: 1,\n          },\n          {\n            label: 'Q2 Revenue ($)',\n            data: [0],\n            backgroundColor: 'rgba(255, 99, 132, 0.7)',\n            borderColor: 'rgba(255, 99, 132, 1)',\n            borderWidth: 1,\n          },\n        ],\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: { position: 'top' },\n          title: { display: true, text: 'Campaign Revenue Comparison' },\n        },\n        scales: {\n          y: {\n            beginAtZero: true,\n            ticks: {\n              callback: (value) => `$${Number(value).toLocaleString()}`,\n            },\n          },\n        },\n      },\n    };\n\n    this.chart = new Chart(this.canvasRef.nativeElement, config);\n  }\n\n  ngOnDestroy(): void {\n    this.chart?.destroy();\n  }\n\n  private updateChart(): void {\n    const hot = this.hotTable?.hotInstance;\n    const chart = this.chart;\n\n    if (!hot || !chart) {\n      return;\n    }\n\n    const selected = hot.getSelected();\n\n    if (!selected || selected.length === 0) {\n      chart.data.labels = ['Select rows above to compare campaigns'];\n      chart.data.datasets[0].data = [0];\n      chart.data.datasets[1].data = [0];\n      chart.update();\n\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    for (const [r1, , r2] of selected) {\n      const minRow = Math.min(r1, r2);\n      const maxRow = Math.max(r1, r2);\n\n      for (let row = minRow; row <= maxRow; row++) {\n        rowSet.add(row);\n      }\n    }\n\n    const rows = [...rowSet].sort((a, b) => a - b);\n    const labels: string[] = [];\n    const q1Values: number[] = [];\n    const q2Values: number[] = [];\n\n    for (const row of rows) {\n      const rowData = hot.getDataAtRow(row);\n\n      labels.push(rowData[0] as string);\n      q1Values.push(rowData[2] as number);\n      q2Values.push(rowData[4] as number);\n    }\n\n    chart.data.labels = labels;\n    chart.data.datasets[0].data = q1Values;\n    chart.data.datasets[1].data = q2Values;\n    chart.update();\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"recipes/real-time/chartjs-sync/angular/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.js.json
index be6747df6..7c5bad7ef 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <canvas id=\"chart-canvas\"></canvas>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\nconst canvas = document.querySelector('#chart-canvas');\n\nconst chart = new Chart(canvas, {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${value.toLocaleString()}`,\n        },\n      },\n    },\n  },\n});\n\nfunction updateChart(hot) {\n  const selected = hot.getSelected();\n\n  if (!selected || selected.length === 0) {\n    chart.data.labels = ['Select rows above to compare campaigns'];\n    chart.data.datasets[0].data = [0];\n    chart.data.datasets[1].data = [0];\n    chart.update();\n\n    return;\n  }\n\n  const rowSet = new Set();\n\n  for (const [r1, , r2] of selected) {\n    const minRow = Math.min(r1, r2);\n    const maxRow = Math.max(r1, r2);\n\n    for (let row = minRow; row <= maxRow; row++) {\n      rowSet.add(row);\n    }\n  }\n\n  const rows = [...rowSet].sort((a, b) => a - b);\n  const labels = [];\n  const q1Values = [];\n  const q2Values = [];\n\n  for (const row of rows) {\n    const rowData = hot.getDataAtRow(row);\n\n    labels.push(rowData[0]);\n    q1Values.push(rowData[2]);\n    q2Values.push(rowData[4]);\n  }\n\n  chart.data.labels = labels;\n  chart.data.datasets[0].data = q1Values;\n  chart.data.datasets[1].data = q2Values;\n  chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n  columns: [\n    { data: 'campaign', type: 'text', width: 200 },\n    { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n  ],\n  rowHeaders: true,\n  selectionMode: 'range',\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  afterSelectionEnd() {\n    updateChart(this);\n  },\n  afterDeselect() {\n    updateChart(this);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.js","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <canvas id=\"chart-canvas\"></canvas>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\nconst canvas = document.querySelector('#chart-canvas');\n\nconst chart = new Chart(canvas, {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${value.toLocaleString()}`,\n        },\n      },\n    },\n  },\n});\n\nfunction updateChart(hot) {\n  const selected = hot.getSelected();\n\n  if (!selected || selected.length === 0) {\n    chart.data.labels = ['Select rows above to compare campaigns'];\n    chart.data.datasets[0].data = [0];\n    chart.data.datasets[1].data = [0];\n    chart.update();\n\n    return;\n  }\n\n  const rowSet = new Set();\n\n  for (const [r1, , r2] of selected) {\n    const minRow = Math.min(r1, r2);\n    const maxRow = Math.max(r1, r2);\n\n    for (let row = minRow; row <= maxRow; row++) {\n      rowSet.add(row);\n    }\n  }\n\n  const rows = [...rowSet].sort((a, b) => a - b);\n  const labels = [];\n  const q1Values = [];\n  const q2Values = [];\n\n  for (const row of rows) {\n    const rowData = hot.getDataAtRow(row);\n\n    labels.push(rowData[0]);\n    q1Values.push(rowData[2]);\n    q2Values.push(rowData[4]);\n  }\n\n  chart.data.labels = labels;\n  chart.data.datasets[0].data = q1Values;\n  chart.data.datasets[1].data = q2Values;\n  chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n  columns: [\n    { data: 'campaign', type: 'text', width: 200 },\n    { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n  ],\n  rowHeaders: true,\n  selectionMode: 'range',\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  afterSelectionEnd() {\n    updateChart(this);\n  },\n  afterDeselect() {\n    updateChart(this);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.js","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.ts.json
index c0b241380..35fac5fa7 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <canvas id=\"chart-canvas\"></canvas>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n  campaign: string;\n  q1Budget: number;\n  q1Revenue: number;\n  q2Budget: number;\n  q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\nconst canvas = document.querySelector<HTMLCanvasElement>('#chart-canvas')!;\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${Number(value).toLocaleString()}`,\n        },\n      },\n    },\n  },\n};\n\nconst chart = new Chart(canvas, chartConfig);\n\nfunction updateChart(hot: Handsontable): void {\n  const selected = hot.getSelected();\n\n  if (!selected || selected.length === 0) {\n    chart.data.labels = ['Select rows above to compare campaigns'];\n    chart.data.datasets[0].data = [0];\n    chart.data.datasets[1].data = [0];\n    chart.update();\n\n    return;\n  }\n\n  const rowSet = new Set<number>();\n\n  for (const [r1, , r2] of selected) {\n    const minRow = Math.min(r1, r2);\n    const maxRow = Math.max(r1, r2);\n\n    for (let row = minRow; row <= maxRow; row++) {\n      rowSet.add(row);\n    }\n  }\n\n  const rows = [...rowSet].sort((a, b) => a - b);\n  const labels: string[] = [];\n  const q1Values: number[] = [];\n  const q2Values: number[] = [];\n\n  for (const row of rows) {\n    const rowData = hot.getDataAtRow(row);\n\n    labels.push(rowData[0] as string);\n    q1Values.push(rowData[2] as number);\n    q2Values.push(rowData[4] as number);\n  }\n\n  chart.data.labels = labels;\n  chart.data.datasets[0].data = q1Values;\n  chart.data.datasets[1].data = q2Values;\n  chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n  columns: [\n    { data: 'campaign', type: 'text', width: 200 },\n    { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n  ],\n  rowHeaders: true,\n  selectionMode: 'range',\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  afterSelectionEnd() {\n    updateChart(this);\n  },\n  afterDeselect() {\n    updateChart(this);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <canvas id=\"chart-canvas\"></canvas>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n  campaign: string;\n  q1Budget: number;\n  q1Revenue: number;\n  q2Budget: number;\n  q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\nconst canvas = document.querySelector<HTMLCanvasElement>('#chart-canvas')!;\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${Number(value).toLocaleString()}`,\n        },\n      },\n    },\n  },\n};\n\nconst chart = new Chart(canvas, chartConfig);\n\nfunction updateChart(hot: Handsontable): void {\n  const selected = hot.getSelected();\n\n  if (!selected || selected.length === 0) {\n    chart.data.labels = ['Select rows above to compare campaigns'];\n    chart.data.datasets[0].data = [0];\n    chart.data.datasets[1].data = [0];\n    chart.update();\n\n    return;\n  }\n\n  const rowSet = new Set<number>();\n\n  for (const [r1, , r2] of selected) {\n    const minRow = Math.min(r1, r2);\n    const maxRow = Math.max(r1, r2);\n\n    for (let row = minRow; row <= maxRow; row++) {\n      rowSet.add(row);\n    }\n  }\n\n  const rows = [...rowSet].sort((a, b) => a - b);\n  const labels: string[] = [];\n  const q1Values: number[] = [];\n  const q2Values: number[] = [];\n\n  for (const row of rows) {\n    const rowData = hot.getDataAtRow(row);\n\n    labels.push(rowData[0] as string);\n    q1Values.push(rowData[2] as number);\n    q2Values.push(rowData[4] as number);\n  }\n\n  chart.data.labels = labels;\n  chart.data.datasets[0].data = q1Values;\n  chart.data.datasets[1].data = q2Values;\n  chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n  data,\n  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n  columns: [\n    { data: 'campaign', type: 'text', width: 200 },\n    { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n    { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n  ],\n  rowHeaders: true,\n  selectionMode: 'range',\n  height: 'auto',\n  width: '100%',\n  autoWrapRow: true,\n  afterSelectionEnd() {\n    updateChart(this);\n  },\n  afterDeselect() {\n    updateChart(this);\n  },\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__react__example1.tsx.json
index 87509941b..228f514d3 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__chartjs-sync__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect, useCallback } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\nimport './example1.css';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n  campaign: string;\n  q1Budget: number;\n  q1Revenue: number;\n  q2Budget: number;\n  q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${Number(value).toLocaleString()}`,\n        },\n      },\n    },\n  },\n};\n\nconst ExampleComponent = () => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const chartRef = useRef<Chart<'bar'> | null>(null);\n\n  useEffect(() => {\n    const chart = new Chart(canvasRef.current!, chartConfig);\n\n    chartRef.current = chart;\n\n    return () => chart.destroy();\n  }, []);\n\n  const updateChart = useCallback(function (this: Handsontable) {\n    const chart = chartRef.current;\n\n    if (!chart) {\n      return;\n    }\n\n    const selected = this.getSelected();\n\n    if (!selected || selected.length === 0) {\n      chart.data.labels = ['Select rows above to compare campaigns'];\n      chart.data.datasets[0].data = [0];\n      chart.data.datasets[1].data = [0];\n      chart.update();\n\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    for (const [r1, , r2] of selected) {\n      const minRow = Math.min(r1, r2);\n      const maxRow = Math.max(r1, r2);\n\n      for (let row = minRow; row <= maxRow; row++) {\n        rowSet.add(row);\n      }\n    }\n\n    const rows = [...rowSet].sort((a, b) => a - b);\n    const labels: string[] = [];\n    const q1Values: number[] = [];\n    const q2Values: number[] = [];\n\n    for (const row of rows) {\n      const rowData = this.getDataAtRow(row);\n\n      labels.push(rowData[0] as string);\n      q1Values.push(rowData[2] as number);\n      q2Values.push(rowData[4] as number);\n    }\n\n    chart.data.labels = labels;\n    chart.data.datasets[0].data = q1Values;\n    chart.data.datasets[1].data = q2Values;\n    chart.update();\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        id=\"example1\"\n        data={data}\n        colHeaders={['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)']}\n        columns={[\n          { data: 'campaign', type: 'text', width: 200 },\n          { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n        ]}\n        rowHeaders={true}\n        selectionMode=\"range\"\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        afterSelectionEnd={updateChart}\n        afterDeselect={updateChart}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <canvas ref={canvasRef} id=\"chart-canvas\" />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/react/example1.tsx","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"chart.js\": \"4.5.1\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect, useCallback } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\nimport './example1.css';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n  campaign: string;\n  q1Budget: number;\n  q1Revenue: number;\n  q2Budget: number;\n  q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n  type: 'bar',\n  data: {\n    labels: ['Select rows above to compare campaigns'],\n    datasets: [\n      {\n        label: 'Q1 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(54, 162, 235, 0.7)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n      },\n      {\n        label: 'Q2 Revenue ($)',\n        data: [0],\n        backgroundColor: 'rgba(255, 99, 132, 0.7)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Campaign Revenue Comparison' },\n    },\n    scales: {\n      y: {\n        beginAtZero: true,\n        ticks: {\n          callback: (value) => `$${Number(value).toLocaleString()}`,\n        },\n      },\n    },\n  },\n};\n\nconst ExampleComponent = () => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const chartRef = useRef<Chart<'bar'> | null>(null);\n\n  useEffect(() => {\n    const chart = new Chart(canvasRef.current!, chartConfig);\n\n    chartRef.current = chart;\n\n    return () => chart.destroy();\n  }, []);\n\n  const updateChart = useCallback(function (this: Handsontable) {\n    const chart = chartRef.current;\n\n    if (!chart) {\n      return;\n    }\n\n    const selected = this.getSelected();\n\n    if (!selected || selected.length === 0) {\n      chart.data.labels = ['Select rows above to compare campaigns'];\n      chart.data.datasets[0].data = [0];\n      chart.data.datasets[1].data = [0];\n      chart.update();\n\n      return;\n    }\n\n    const rowSet = new Set<number>();\n\n    for (const [r1, , r2] of selected) {\n      const minRow = Math.min(r1, r2);\n      const maxRow = Math.max(r1, r2);\n\n      for (let row = minRow; row <= maxRow; row++) {\n        rowSet.add(row);\n      }\n    }\n\n    const rows = [...rowSet].sort((a, b) => a - b);\n    const labels: string[] = [];\n    const q1Values: number[] = [];\n    const q2Values: number[] = [];\n\n    for (const row of rows) {\n      const rowData = this.getDataAtRow(row);\n\n      labels.push(rowData[0] as string);\n      q1Values.push(rowData[2] as number);\n      q2Values.push(rowData[4] as number);\n    }\n\n    chart.data.labels = labels;\n    chart.data.datasets[0].data = q1Values;\n    chart.data.datasets[1].data = q2Values;\n    chart.update();\n  }, []);\n\n  return (\n    <>\n      <HotTable\n        id=\"example1\"\n        data={data}\n        colHeaders={['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)']}\n        columns={[\n          { data: 'campaign', type: 'text', width: 200 },\n          { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n          { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n        ]}\n        rowHeaders={true}\n        selectionMode=\"range\"\n        height=\"auto\"\n        width=\"100%\"\n        autoWrapRow={true}\n        afterSelectionEnd={updateChart}\n        afterDeselect={updateChart}\n        licenseKey=\"non-commercial-and-evaluation\"\n      />\n      <canvas ref={canvasRef} id=\"chart-canvas\" />\n    </>\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"#chart-canvas {\n  max-height: 300px;\n  margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/react/example1.tsx","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__angular__example1.ts.json
index 26321c61d..ce10676d0 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-websocket-updates></example1-websocket-updates>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ntype StockRow = {\n  symbol: string;\n  company: string;\n  price: number;\n  change: number;\n  volume: number;\n  marketCap: string;\n};\n\nconst STOCK_DATA: StockRow[] = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-websocket-updates',\n  template: `<hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>`,\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData: StockRow[] = STOCK_DATA;\n\n  private intervalId: ReturnType<typeof setInterval> | null = null;\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap'],\n    columns: [\n      { data: 'symbol', readOnly: true },\n      { data: 'company', readOnly: true, width: 180 },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'marketCap', readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    stretchH: 'all',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if ((source as string) !== 'external' || !changes) {\n        return;\n      }\n\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      changes.forEach(([row]) => {\n        [2, 3].forEach((col) => {\n          const td = hot.getCell(row as number, col);\n\n          if (td) {\n            td.classList.remove('ht-cell-flash');\n            void td.offsetWidth;\n            td.classList.add('ht-cell-flash');\n            td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n          }\n        });\n      });\n    },\n  };\n\n  ngOnInit(): void {\n    this.intervalId = setInterval(() => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const row = Math.floor(Math.random() * STOCK_DATA.length);\n      const basePrice = STOCK_DATA[row].price;\n      const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n      const newChange = parseFloat((newPrice - basePrice + STOCK_DATA[row].change).toFixed(2));\n\n      hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n      hot.setDataAtRowProp(row, 'change', newChange, 'external');\n    }, 1500);\n  }\n\n  ngOnDestroy(): void {\n    if (this.intervalId !== null) {\n      clearInterval(this.intervalId);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/angular/example1.ts","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-websocket-updates></example1-websocket-updates>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ntype StockRow = {\n  symbol: string;\n  company: string;\n  price: number;\n  change: number;\n  volume: number;\n  marketCap: string;\n};\n\nconst STOCK_DATA: StockRow[] = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-websocket-updates',\n  template: `<hot-table [data]=\"hotData\" [settings]=\"hotSettings\"></hot-table>`,\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly hotData: StockRow[] = STOCK_DATA;\n\n  private intervalId: ReturnType<typeof setInterval> | null = null;\n\n  readonly hotSettings: GridSettings = {\n    colHeaders: ['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap'],\n    columns: [\n      { data: 'symbol', readOnly: true },\n      { data: 'company', readOnly: true, width: 180 },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n      { data: 'marketCap', readOnly: true },\n    ],\n    rowHeaders: true,\n    height: 'auto',\n    width: '100%',\n    stretchH: 'all',\n    afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n      if ((source as string) !== 'external' || !changes) {\n        return;\n      }\n\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      changes.forEach(([row]) => {\n        [2, 3].forEach((col) => {\n          const td = hot.getCell(row as number, col);\n\n          if (td) {\n            td.classList.remove('ht-cell-flash');\n            void td.offsetWidth;\n            td.classList.add('ht-cell-flash');\n            td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n          }\n        });\n      });\n    },\n  };\n\n  ngOnInit(): void {\n    this.intervalId = setInterval(() => {\n      const hot = this.hotTable?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const row = Math.floor(Math.random() * STOCK_DATA.length);\n      const basePrice = STOCK_DATA[row].price;\n      const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n      const newChange = parseFloat((newPrice - basePrice + STOCK_DATA[row].change).toFixed(2));\n\n      hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n      hot.setDataAtRowProp(row, 'change', newChange, 'external');\n    }, 1500);\n  }\n\n  ngOnDestroy(): void {\n    if (this.intervalId !== null) {\n      clearInterval(this.intervalId);\n    }\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/angular/example1.ts","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__javascript__example1.js.json
index e35af6f4b..750288771 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst stockData = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data: stockData,\n  colHeaders: ['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap'],\n  columns: [\n    { data: 'symbol', readOnly: true },\n    { data: 'company', readOnly: true, width: 180 },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'marketCap', readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Flash a cell to draw attention when its value changes.\nhot.addHook('afterChange', (changes, source) => {\n  if (source !== 'external' || !changes) {\n    return;\n  }\n\n  changes.forEach(([row]) => {\n    // Columns 2 (price) and 3 (change) are the ones updated by the simulation.\n    [2, 3].forEach((col) => {\n      const td = hot.getCell(row, col);\n\n      if (td) {\n        td.classList.remove('ht-cell-flash');\n        // Trigger reflow so removing then adding the class restarts the animation.\n        void td.offsetWidth;\n        td.classList.add('ht-cell-flash');\n        td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n      }\n    });\n  });\n});\n\n// Simulate a WebSocket feed with setInterval.\n// In production, replace this with a real WebSocket connection:\n//   const ws = new WebSocket('wss://your-feed.example.com');\n//   ws.onmessage = (event) => { const msg = JSON.parse(event.data); applyUpdate(msg); };\nconst intervalId = setInterval(() => {\n  const row = Math.floor(Math.random() * stockData.length);\n  const basePrice = stockData[row].price;\n  const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n  const newChange = parseFloat((newPrice - basePrice + stockData[row].change).toFixed(2));\n\n  // Pass 'external' as the source so afterChange can distinguish this update\n  // from direct user edits. This avoids triggering undo history for feed data.\n  hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n  hot.setDataAtRowProp(row, 'change', newChange, 'external');\n}, 1500);\n\n// Clean up the interval when the user leaves the page to prevent stale updates.\nwindow.addEventListener('beforeunload', () => {\n  clearInterval(intervalId);\n  // If using a real WebSocket, close it here:\n  // ws.close();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/javascript/example1.js","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst stockData = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nconst hot = new Handsontable(container, {\n  data: stockData,\n  colHeaders: ['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap'],\n  columns: [\n    { data: 'symbol', readOnly: true },\n    { data: 'company', readOnly: true, width: 180 },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n    { data: 'marketCap', readOnly: true },\n  ],\n  rowHeaders: true,\n  height: 'auto',\n  width: '100%',\n  stretchH: 'all',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Flash a cell to draw attention when its value changes.\nhot.addHook('afterChange', (changes, source) => {\n  if (source !== 'external' || !changes) {\n    return;\n  }\n\n  changes.forEach(([row]) => {\n    // Columns 2 (price) and 3 (change) are the ones updated by the simulation.\n    [2, 3].forEach((col) => {\n      const td = hot.getCell(row, col);\n\n      if (td) {\n        td.classList.remove('ht-cell-flash');\n        // Trigger reflow so removing then adding the class restarts the animation.\n        void td.offsetWidth;\n        td.classList.add('ht-cell-flash');\n        td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n      }\n    });\n  });\n});\n\n// Simulate a WebSocket feed with setInterval.\n// In production, replace this with a real WebSocket connection:\n//   const ws = new WebSocket('wss://your-feed.example.com');\n//   ws.onmessage = (event) => { const msg = JSON.parse(event.data); applyUpdate(msg); };\nconst intervalId = setInterval(() => {\n  const row = Math.floor(Math.random() * stockData.length);\n  const basePrice = stockData[row].price;\n  const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n  const newChange = parseFloat((newPrice - basePrice + stockData[row].change).toFixed(2));\n\n  // Pass 'external' as the source so afterChange can distinguish this update\n  // from direct user edits. This avoids triggering undo history for feed data.\n  hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n  hot.setDataAtRowProp(row, 'change', newChange, 'external');\n}, 1500);\n\n// Clean up the interval when the user leaves the page to prevent stale updates.\nwindow.addEventListener('beforeunload', () => {\n  clearInterval(intervalId);\n  // If using a real WebSocket, close it here:\n  // ws.close();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/javascript/example1.js","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__react__example1.tsx.json
index 7d3be431b..2a9c72ca9 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__real-time__websocket-updates__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype StockRow = {\n  symbol: string;\n  company: string;\n  price: number;\n  change: number;\n  volume: number;\n  marketCap: string;\n};\n\n/* start:skip-in-preview */\nconst stockData: StockRow[] = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n/* end:skip-in-preview */\n\nconst flashCell = (hot: Handsontable, row: number, col: number): void => {\n  const td = hot.getCell(row, col);\n\n  if (td) {\n    td.classList.remove('ht-cell-flash');\n    void td.offsetWidth;\n    td.classList.add('ht-cell-flash');\n    td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n  }\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const handleAfterChange = (\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void => {\n    if (source !== 'external' || !changes) {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    changes.forEach(([row]) => {\n      [2, 3].forEach((col) => flashCell(hot, row as number, col));\n    });\n  };\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      const hot = hotRef.current?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const row = Math.floor(Math.random() * stockData.length);\n      const basePrice = stockData[row].price;\n      const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n      const newChange = parseFloat((newPrice - basePrice + stockData[row].change).toFixed(2));\n\n      hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n      hot.setDataAtRowProp(row, 'change', newChange, 'external');\n    }, 1500);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={stockData}\n      colHeaders={['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap']}\n      columns={[\n        { data: 'symbol', readOnly: true },\n        { data: 'company', readOnly: true, width: 180 },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n        { data: 'marketCap', readOnly: true },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      stretchH=\"all\"\n      afterChange={handleAfterChange}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/react/example1.tsx","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Real Time ▸ Real-time cell updates via WebSocket · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype StockRow = {\n  symbol: string;\n  company: string;\n  price: number;\n  change: number;\n  volume: number;\n  marketCap: string;\n};\n\n/* start:skip-in-preview */\nconst stockData: StockRow[] = [\n  { symbol: 'AAPL', company: 'Apple Inc.', price: 189.25, change: 1.45, volume: 52341200, marketCap: '2.94T' },\n  { symbol: 'MSFT', company: 'Microsoft Corp.', price: 415.80, change: -0.72, volume: 18920400, marketCap: '3.08T' },\n  { symbol: 'GOOG', company: 'Alphabet Inc.', price: 175.40, change: 2.13, volume: 21780000, marketCap: '2.19T' },\n  { symbol: 'AMZN', company: 'Amazon.com Inc.', price: 198.60, change: -1.30, volume: 34560000, marketCap: '2.09T' },\n  { symbol: 'NVDA', company: 'NVIDIA Corp.', price: 875.35, change: 14.20, volume: 41230000, marketCap: '2.15T' },\n  { symbol: 'META', company: 'Meta Platforms Inc.', price: 512.90, change: 3.55, volume: 15670000, marketCap: '1.30T' },\n  { symbol: 'TSLA', company: 'Tesla Inc.', price: 248.75, change: -5.60, volume: 98120000, marketCap: '793B' },\n  { symbol: 'BRK', company: 'Berkshire Hathaway', price: 3890.00, change: 12.00, volume: 3450000, marketCap: '876B' },\n];\n/* end:skip-in-preview */\n\nconst flashCell = (hot: Handsontable, row: number, col: number): void => {\n  const td = hot.getCell(row, col);\n\n  if (td) {\n    td.classList.remove('ht-cell-flash');\n    void td.offsetWidth;\n    td.classList.add('ht-cell-flash');\n    td.addEventListener('animationend', () => td.classList.remove('ht-cell-flash'), { once: true });\n  }\n};\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  const handleAfterChange = (\n    changes: Handsontable.CellChange[] | null,\n    source: Handsontable.ChangeSource\n  ): void => {\n    if (source !== 'external' || !changes) {\n      return;\n    }\n\n    const hot = hotRef.current?.hotInstance;\n\n    if (!hot) {\n      return;\n    }\n\n    changes.forEach(([row]) => {\n      [2, 3].forEach((col) => flashCell(hot, row as number, col));\n    });\n  };\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      const hot = hotRef.current?.hotInstance;\n\n      if (!hot) {\n        return;\n      }\n\n      const row = Math.floor(Math.random() * stockData.length);\n      const basePrice = stockData[row].price;\n      const newPrice = parseFloat((basePrice + (Math.random() - 0.5) * 4).toFixed(2));\n      const newChange = parseFloat((newPrice - basePrice + stockData[row].change).toFixed(2));\n\n      hot.setDataAtRowProp(row, 'price', newPrice, 'external');\n      hot.setDataAtRowProp(row, 'change', newChange, 'external');\n    }, 1500);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={stockData}\n      colHeaders={['Symbol', 'Company', 'Price ($)', 'Change ($)', 'Volume', 'Market Cap']}\n      columns={[\n        { data: 'symbol', readOnly: true },\n        { data: 'company', readOnly: true, width: 180 },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'change', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'volume', type: 'numeric', numericFormat: { useGrouping: true, maximumFractionDigits: 0 } },\n        { data: 'marketCap', readOnly: true },\n      ]}\n      rowHeaders={true}\n      height=\"auto\"\n      width=\"100%\"\n      stretchH=\"all\"\n      afterChange={handleAfterChange}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Flash animation applied to cells updated by an external data source (e.g., a WebSocket feed). */\n@keyframes cellFlash {\n  0% {\n    background-color: rgba(255, 220, 0, 0.75);\n  }\n\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ht-cell-flash {\n  animation: cellFlash 0.8s ease-out;\n}"},"docsPath":"recipes/real-time/websocket-updates/react/example1.tsx","breadcrumb":["Recipes","Real Time","Real-time cell updates via WebSocket"],"guide":"recipes/real-time/websocket-updates/websocket-updates.md","guideTitle":"Real-time cell updates via WebSocket","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/websocket-updates","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json
index 2c816d1c0..cdf7b0c82 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-conditional-row-coloring></example1-conditional-row-coloring>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { CellMeta, CellProperties } from 'handsontable/settings';\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: 'ht-demo-row-status-active',\n  pending: 'ht-demo-row-status-pending',\n  inactive: 'ht-demo-row-status-inactive',\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== 'string') {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-conditional-row-coloring',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { task: 'Invoice export', owner: 'A. Lee', status: 'active' },\n    { task: 'SSO rollout', owner: 'M. Costa', status: 'pending' },\n    { task: 'Legacy reports', owner: 'J. Park', status: 'inactive' },\n    { task: 'API docs', owner: 'R. Singh', status: 'active' },\n    { task: 'Mobile parity', owner: 'T. Nguyen', status: 'pending' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Task', 'Owner', 'Status'],\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'owner', type: 'text', width: 120 },\n      {\n        data: 'status',\n        type: 'dropdown',\n        width: 120,\n        source: ['active', 'pending', 'inactive'],\n        strict: true,\n        allowInvalid: false,\n      },\n    ],\n    cells(\n      this: CellProperties,\n      row: number,\n      _column: number,\n      _prop: string | number,\n    ): CellMeta {\n      const hot = this.instance;\n      const visualRow = hot.toVisualRow(row);\n\n      if (visualRow === null || visualRow < 0) {\n        return {};\n      }\n\n      const status = hot.getDataAtRowProp(visualRow, 'status');\n      const rowClass = statusToRowClass(status);\n\n      if (!rowClass) {\n        return {};\n      }\n\n      return { className: rowClass };\n    },\n    afterValidate(\n      this: Handsontable,\n      isValid: boolean,\n      _value: Handsontable.CellValue,\n      row: number,\n      prop: string | number,\n    ): void {\n      if (isValid) {\n        return;\n      }\n\n      const col = this.propToCol(prop);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        return;\n      }\n\n      const td = this.getCell(row, col);\n\n      if (!td) {\n        return;\n      }\n\n      td.classList.add('ht-demo-invalid-flash');\n      setTimeout(() => td.classList.remove('ht-demo-invalid-flash'), 800);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".handsontable td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n.handsontable td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n.handsontable td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n.handsontable td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-conditional-row-coloring></example1-conditional-row-coloring>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { CellMeta, CellProperties } from 'handsontable/settings';\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: 'ht-demo-row-status-active',\n  pending: 'ht-demo-row-status-pending',\n  inactive: 'ht-demo-row-status-inactive',\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== 'string') {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-conditional-row-coloring',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { task: 'Invoice export', owner: 'A. Lee', status: 'active' },\n    { task: 'SSO rollout', owner: 'M. Costa', status: 'pending' },\n    { task: 'Legacy reports', owner: 'J. Park', status: 'inactive' },\n    { task: 'API docs', owner: 'R. Singh', status: 'active' },\n    { task: 'Mobile parity', owner: 'T. Nguyen', status: 'pending' },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Task', 'Owner', 'Status'],\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'task', type: 'text', width: 220 },\n      { data: 'owner', type: 'text', width: 120 },\n      {\n        data: 'status',\n        type: 'dropdown',\n        width: 120,\n        source: ['active', 'pending', 'inactive'],\n        strict: true,\n        allowInvalid: false,\n      },\n    ],\n    cells(\n      this: CellProperties,\n      row: number,\n      _column: number,\n      _prop: string | number,\n    ): CellMeta {\n      const hot = this.instance;\n      const visualRow = hot.toVisualRow(row);\n\n      if (visualRow === null || visualRow < 0) {\n        return {};\n      }\n\n      const status = hot.getDataAtRowProp(visualRow, 'status');\n      const rowClass = statusToRowClass(status);\n\n      if (!rowClass) {\n        return {};\n      }\n\n      return { className: rowClass };\n    },\n    afterValidate(\n      this: Handsontable,\n      isValid: boolean,\n      _value: Handsontable.CellValue,\n      row: number,\n      prop: string | number,\n    ): void {\n      if (isValid) {\n        return;\n      }\n\n      const col = this.propToCol(prop);\n\n      // Skip a property that names no column.\n      if (col === null) {\n        return;\n      }\n\n      const td = this.getCell(row, col);\n\n      if (!td) {\n        return;\n      }\n\n      td.classList.add('ht-demo-invalid-flash');\n      setTimeout(() => td.classList.remove('ht-demo-invalid-flash'), 800);\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".handsontable td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n.handsontable td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n.handsontable td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n.handsontable td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json
index 947991e07..8ed51854c 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst STATUS_ROW_CLASSES = {\n    active: \"ht-demo-row-status-active\",\n    pending: \"ht-demo-row-status-pending\",\n    inactive: \"ht-demo-row-status-inactive\",\n};\nfunction statusToRowClass(status) {\n    if (typeof status !== \"string\") {\n        return undefined;\n    }\n    return STATUS_ROW_CLASSES[status];\n}\n/* start:skip-in-preview */\nconst data = [\n    { task: \"Invoice export\", owner: \"A. Lee\", status: \"active\" },\n    { task: \"SSO rollout\", owner: \"M. Costa\", status: \"pending\" },\n    { task: \"Legacy reports\", owner: \"J. Park\", status: \"inactive\" },\n    { task: \"API docs\", owner: \"R. Singh\", status: \"active\" },\n    { task: \"Mobile parity\", owner: \"T. Nguyen\", status: \"pending\" },\n];\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\nconst hotOptions = {\n    data,\n    licenseKey: \"non-commercial-and-evaluation\",\n    rowHeaders: true,\n    colHeaders: [\"Task\", \"Owner\", \"Status\"],\n    height: \"auto\",\n    width: \"100%\",\n    columns: [\n        { data: \"task\", type: \"text\", width: 220 },\n        { data: \"owner\", type: \"text\", width: 120 },\n        {\n            data: \"status\",\n            type: \"dropdown\",\n            width: 120,\n            source: [\"active\", \"pending\", \"inactive\"],\n            strict: true,\n            allowInvalid: false,\n        },\n    ],\n    cells(row, _column, _prop) {\n        const hot = this.instance;\n        const visualRow = hot.toVisualRow(row);\n        if (visualRow === null || visualRow < 0) {\n            return {};\n        }\n        const status = hot.getDataAtRowProp(visualRow, \"status\");\n        const rowClass = statusToRowClass(status);\n        if (!rowClass) {\n            return {};\n        }\n        return { className: rowClass };\n    },\n    afterValidate(isValid, _value, row, prop) {\n        if (isValid) {\n            return;\n        }\n        const col = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (col === null) {\n            return;\n        }\n        const td = this.getCell(row, col);\n        if (!td) {\n            return;\n        }\n        td.classList.add(\"ht-demo-invalid-flash\");\n        setTimeout(() => td.classList.remove(\"ht-demo-invalid-flash\"), 800);\n    },\n};\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nregisterAllModules();\nconst STATUS_ROW_CLASSES = {\n    active: \"ht-demo-row-status-active\",\n    pending: \"ht-demo-row-status-pending\",\n    inactive: \"ht-demo-row-status-inactive\",\n};\nfunction statusToRowClass(status) {\n    if (typeof status !== \"string\") {\n        return undefined;\n    }\n    return STATUS_ROW_CLASSES[status];\n}\n/* start:skip-in-preview */\nconst data = [\n    { task: \"Invoice export\", owner: \"A. Lee\", status: \"active\" },\n    { task: \"SSO rollout\", owner: \"M. Costa\", status: \"pending\" },\n    { task: \"Legacy reports\", owner: \"J. Park\", status: \"inactive\" },\n    { task: \"API docs\", owner: \"R. Singh\", status: \"active\" },\n    { task: \"Mobile parity\", owner: \"T. Nguyen\", status: \"pending\" },\n];\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\nconst hotOptions = {\n    data,\n    licenseKey: \"non-commercial-and-evaluation\",\n    rowHeaders: true,\n    colHeaders: [\"Task\", \"Owner\", \"Status\"],\n    height: \"auto\",\n    width: \"100%\",\n    columns: [\n        { data: \"task\", type: \"text\", width: 220 },\n        { data: \"owner\", type: \"text\", width: 120 },\n        {\n            data: \"status\",\n            type: \"dropdown\",\n            width: 120,\n            source: [\"active\", \"pending\", \"inactive\"],\n            strict: true,\n            allowInvalid: false,\n        },\n    ],\n    cells(row, _column, _prop) {\n        const hot = this.instance;\n        const visualRow = hot.toVisualRow(row);\n        if (visualRow === null || visualRow < 0) {\n            return {};\n        }\n        const status = hot.getDataAtRowProp(visualRow, \"status\");\n        const rowClass = statusToRowClass(status);\n        if (!rowClass) {\n            return {};\n        }\n        return { className: rowClass };\n    },\n    afterValidate(isValid, _value, row, prop) {\n        if (isValid) {\n            return;\n        }\n        const col = this.propToCol(prop);\n        // Skip a property that names no column.\n        if (col === null) {\n            return;\n        }\n        const td = this.getCell(row, col);\n        if (!td) {\n            return;\n        }\n        td.classList.add(\"ht-demo-invalid-flash\");\n        setTimeout(() => td.classList.remove(\"ht-demo-invalid-flash\"), 800);\n    },\n};\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json
index 7d5efdd00..47a222dd5 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport type { CellMeta, CellProperties } from \"handsontable/settings\";\n\nregisterAllModules();\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: \"ht-demo-row-status-active\",\n  pending: \"ht-demo-row-status-pending\",\n  inactive: \"ht-demo-row-status-inactive\",\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== \"string\") {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  { task: \"Invoice export\", owner: \"A. Lee\", status: \"active\" },\n  { task: \"SSO rollout\", owner: \"M. Costa\", status: \"pending\" },\n  { task: \"Legacy reports\", owner: \"J. Park\", status: \"inactive\" },\n  { task: \"API docs\", owner: \"R. Singh\", status: \"active\" },\n  { task: \"Mobile parity\", owner: \"T. Nguyen\", status: \"pending\" },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  licenseKey: \"non-commercial-and-evaluation\",\n  rowHeaders: true,\n  colHeaders: [\"Task\", \"Owner\", \"Status\"],\n  height: \"auto\",\n  width: \"100%\",\n  columns: [\n    { data: \"task\", type: \"text\", width: 220 },\n    { data: \"owner\", type: \"text\", width: 120 },\n    {\n      data: \"status\",\n      type: \"dropdown\",\n      width: 120,\n      source: [\"active\", \"pending\", \"inactive\"],\n      strict: true,\n      allowInvalid: false,\n    },\n  ],\n  cells(\n    this: CellProperties,\n    row: number,\n    _column: number,\n    _prop: string | number,\n  ): CellMeta {\n    const hot = this.instance;\n    const visualRow = hot.toVisualRow(row);\n\n    if (visualRow === null || visualRow < 0) {\n      return {};\n    }\n\n    const status = hot.getDataAtRowProp(visualRow, \"status\");\n    const rowClass = statusToRowClass(status);\n\n    if (!rowClass) {\n      return {};\n    }\n\n    return { className: rowClass };\n  },\n  afterValidate(\n    this: Handsontable,\n    isValid: boolean,\n    _value: Handsontable.CellValue,\n    row: number,\n    prop: string | number,\n  ): void {\n    if (isValid) {\n      return;\n    }\n\n    const col = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (col === null) {\n      return;\n    }\n\n    const td = this.getCell(row, col);\n\n    if (!td) {\n      return;\n    }\n\n    td.classList.add(\"ht-demo-invalid-flash\");\n    setTimeout(() => td.classList.remove(\"ht-demo-invalid-flash\"), 800);\n  },\n};\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport type { CellMeta, CellProperties } from \"handsontable/settings\";\n\nregisterAllModules();\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: \"ht-demo-row-status-active\",\n  pending: \"ht-demo-row-status-pending\",\n  inactive: \"ht-demo-row-status-inactive\",\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== \"string\") {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  { task: \"Invoice export\", owner: \"A. Lee\", status: \"active\" },\n  { task: \"SSO rollout\", owner: \"M. Costa\", status: \"pending\" },\n  { task: \"Legacy reports\", owner: \"J. Park\", status: \"inactive\" },\n  { task: \"API docs\", owner: \"R. Singh\", status: \"active\" },\n  { task: \"Mobile parity\", owner: \"T. Nguyen\", status: \"pending\" },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst hotOptions: Handsontable.GridSettings = {\n  data,\n  licenseKey: \"non-commercial-and-evaluation\",\n  rowHeaders: true,\n  colHeaders: [\"Task\", \"Owner\", \"Status\"],\n  height: \"auto\",\n  width: \"100%\",\n  columns: [\n    { data: \"task\", type: \"text\", width: 220 },\n    { data: \"owner\", type: \"text\", width: 120 },\n    {\n      data: \"status\",\n      type: \"dropdown\",\n      width: 120,\n      source: [\"active\", \"pending\", \"inactive\"],\n      strict: true,\n      allowInvalid: false,\n    },\n  ],\n  cells(\n    this: CellProperties,\n    row: number,\n    _column: number,\n    _prop: string | number,\n  ): CellMeta {\n    const hot = this.instance;\n    const visualRow = hot.toVisualRow(row);\n\n    if (visualRow === null || visualRow < 0) {\n      return {};\n    }\n\n    const status = hot.getDataAtRowProp(visualRow, \"status\");\n    const rowClass = statusToRowClass(status);\n\n    if (!rowClass) {\n      return {};\n    }\n\n    return { className: rowClass };\n  },\n  afterValidate(\n    this: Handsontable,\n    isValid: boolean,\n    _value: Handsontable.CellValue,\n    row: number,\n    prop: string | number,\n  ): void {\n    if (isValid) {\n      return;\n    }\n\n    const col = this.propToCol(prop);\n\n    // Skip a property that names no column.\n    if (col === null) {\n      return;\n    }\n\n    const td = this.getCell(row, col);\n\n    if (!td) {\n      return;\n    }\n\n    td.classList.add(\"ht-demo-invalid-flash\");\n    setTimeout(() => td.classList.remove(\"ht-demo-invalid-flash\"), 800);\n  },\n};\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json
index b8cf220e3..9394fd459 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta, CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: 'ht-demo-row-status-active',\n  pending: 'ht-demo-row-status-pending',\n  inactive: 'ht-demo-row-status-inactive',\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== 'string') {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Invoice export', owner: 'A. Lee', status: 'active' },\n  { task: 'SSO rollout', owner: 'M. Costa', status: 'pending' },\n  { task: 'Legacy reports', owner: 'J. Park', status: 'inactive' },\n  { task: 'API docs', owner: 'R. Singh', status: 'active' },\n  { task: 'Mobile parity', owner: 'T. Nguyen', status: 'pending' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"example1\"\n      data={data}\n      licenseKey=\"non-commercial-and-evaluation\"\n      rowHeaders={true}\n      colHeaders={['Task', 'Owner', 'Status']}\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'task', type: 'text', width: 220 },\n        { data: 'owner', type: 'text', width: 120 },\n        {\n          data: 'status',\n          type: 'dropdown',\n          width: 120,\n          source: ['active', 'pending', 'inactive'],\n          strict: true,\n          allowInvalid: false,\n        },\n      ]}\n      cells={function (\n        this: CellProperties,\n        row: number,\n        _column: number,\n        _prop: string | number,\n      ): CellMeta {\n        const hot = this.instance;\n        const visualRow = hot.toVisualRow(row);\n\n        if (visualRow === null || visualRow < 0) {\n          return {};\n        }\n\n        const status = hot.getDataAtRowProp(visualRow, 'status');\n        const rowClass = statusToRowClass(status);\n\n        if (!rowClass) {\n          return {};\n        }\n\n        return { className: rowClass };\n      }}\n      afterValidate={function (\n        this: Handsontable,\n        isValid: boolean,\n        _value: Handsontable.CellValue,\n        row: number,\n        prop: string | number,\n      ): void {\n        if (isValid) {\n          return;\n        }\n\n        const col = this.propToCol(prop);\n\n        // Skip a property that names no column.\n        if (col === null) {\n          return;\n        }\n\n        const td = this.getCell(row, col);\n\n        if (!td) {\n          return;\n        }\n\n        td.classList.add('ht-demo-invalid-flash');\n        setTimeout(() => td.classList.remove('ht-demo-invalid-flash'), 800);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Conditional row coloring · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta, CellProperties } from 'handsontable/settings';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\nconst STATUS_ROW_CLASSES: Record<string, string> = {\n  active: 'ht-demo-row-status-active',\n  pending: 'ht-demo-row-status-pending',\n  inactive: 'ht-demo-row-status-inactive',\n};\n\nfunction statusToRowClass(status: unknown): string | undefined {\n  if (typeof status !== 'string') {\n    return undefined;\n  }\n\n  return STATUS_ROW_CLASSES[status];\n}\n\n/* start:skip-in-preview */\nconst data = [\n  { task: 'Invoice export', owner: 'A. Lee', status: 'active' },\n  { task: 'SSO rollout', owner: 'M. Costa', status: 'pending' },\n  { task: 'Legacy reports', owner: 'J. Park', status: 'inactive' },\n  { task: 'API docs', owner: 'R. Singh', status: 'active' },\n  { task: 'Mobile parity', owner: 'T. Nguyen', status: 'pending' },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"example1\"\n      data={data}\n      licenseKey=\"non-commercial-and-evaluation\"\n      rowHeaders={true}\n      colHeaders={['Task', 'Owner', 'Status']}\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'task', type: 'text', width: 220 },\n        { data: 'owner', type: 'text', width: 120 },\n        {\n          data: 'status',\n          type: 'dropdown',\n          width: 120,\n          source: ['active', 'pending', 'inactive'],\n          strict: true,\n          allowInvalid: false,\n        },\n      ]}\n      cells={function (\n        this: CellProperties,\n        row: number,\n        _column: number,\n        _prop: string | number,\n      ): CellMeta {\n        const hot = this.instance;\n        const visualRow = hot.toVisualRow(row);\n\n        if (visualRow === null || visualRow < 0) {\n          return {};\n        }\n\n        const status = hot.getDataAtRowProp(visualRow, 'status');\n        const rowClass = statusToRowClass(status);\n\n        if (!rowClass) {\n          return {};\n        }\n\n        return { className: rowClass };\n      }}\n      afterValidate={function (\n        this: Handsontable,\n        isValid: boolean,\n        _value: Handsontable.CellValue,\n        row: number,\n        prop: string | number,\n      ): void {\n        if (isValid) {\n          return;\n        }\n\n        const col = this.propToCol(prop);\n\n        // Skip a property that names no column.\n        if (col === null) {\n          return;\n        }\n\n        const td = this.getCell(row, col);\n\n        if (!td) {\n          return;\n        }\n\n        td.classList.add('ht-demo-invalid-flash');\n        setTimeout(() => td.classList.remove('ht-demo-invalid-flash'), 800);\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Scoped to the recipe preview container */\n#example1 td.ht-demo-row-status-active {\n  background-color: rgba(26, 66, 232, 0.12);\n  background-color: color-mix(in srgb, var(--ht-accent-color, #1a42e8) 12%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-pending {\n  background-color: rgba(202, 138, 4, 0.14);\n  background-color: color-mix(in srgb, var(--ht-warn-color, #ca8a04) 14%, var(--ht-background-color, #ffffff));\n}\n\n#example1 td.ht-demo-row-status-inactive {\n  background-color: var(--ht-background-secondary-color, #f3f4f6);\n  color: var(--ht-foreground-secondary-color, #6b7280);\n}\n\n/* Flash feedback for rejected edits (allowInvalid: false) */\n#example1 td.ht-demo-invalid-flash {\n  background-color: var(--ht-cell-error-background-color, rgba(250, 77, 50, 0.2)) !important;\n  color: inherit;\n}"},"docsPath":"recipes/rendering-styling/conditional-row-coloring/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Conditional row coloring"],"guide":"recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md","guideTitle":"Conditional row coloring","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/conditional-row-coloring","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json
index 315014573..c20bd806d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-frozen-summary-row></example1-frozen-summary-row>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst tableData: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = tableData.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(tableData[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-frozen-summary-row',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = tableData;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n    fixedRowsBottom: 1,\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'item', type: 'text', readOnly: false },\n      { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    cells(row: number, _col: number, prop: string | number): Handsontable.CellMeta {\n      if (row !== summaryRowIndex) {\n        return {};\n      }\n\n      const meta: Handsontable.CellMeta = {\n        readOnly: true,\n        className: 'htSummaryRow',\n      };\n\n      if (prop !== 'item') {\n        meta['type'] = 'text';\n        meta['validator'] = undefined;\n        meta['className'] = 'htSummaryRow htRight';\n      }\n\n      return meta;\n    },\n    afterInit(this: Handsontable): void {\n      refreshSummary(this);\n    },\n    afterChange(\n      this: Handsontable,\n      changes: Handsontable.CellChange[] | null,\n      source: Handsontable.ChangeSource,\n    ): void {\n      if (!changes || (source as string) === SUMMARY_SOURCE) {\n        return;\n      }\n\n      if (changes.every(([row]) => row === summaryRowIndex)) {\n        return;\n      }\n\n      refreshSummary(this);\n    },\n    beforeUndoStackChange(\n      _doneActions: unknown[],\n      source: string | undefined,\n    ): boolean | void {\n      if (source === SUMMARY_SOURCE) {\n        return false;\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-frozen-summary-row></example1-frozen-summary-row>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst tableData: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = tableData.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(tableData[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-frozen-summary-row',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = tableData;\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n    fixedRowsBottom: 1,\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'item', type: 'text', readOnly: false },\n      { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n      { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    cells(row: number, _col: number, prop: string | number): Handsontable.CellMeta {\n      if (row !== summaryRowIndex) {\n        return {};\n      }\n\n      const meta: Handsontable.CellMeta = {\n        readOnly: true,\n        className: 'htSummaryRow',\n      };\n\n      if (prop !== 'item') {\n        meta['type'] = 'text';\n        meta['validator'] = undefined;\n        meta['className'] = 'htSummaryRow htRight';\n      }\n\n      return meta;\n    },\n    afterInit(this: Handsontable): void {\n      refreshSummary(this);\n    },\n    afterChange(\n      this: Handsontable,\n      changes: Handsontable.CellChange[] | null,\n      source: Handsontable.ChangeSource,\n    ): void {\n      if (!changes || (source as string) === SUMMARY_SOURCE) {\n        return;\n      }\n\n      if (changes.every(([row]) => row === summaryRowIndex)) {\n        return;\n      }\n\n      refreshSummary(this);\n    },\n    beforeUndoStackChange(\n      _doneActions: unknown[],\n      source: string | undefined,\n    ): boolean | void {\n      if (source === SUMMARY_SOURCE) {\n        return false;\n      }\n    },\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json
index 15feef71b..e5cdf310a 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst SUMMARY_SOURCE = 'updateSummary';\nfunction parseNumeric(value) {\n    if (typeof value === 'number' && Number.isFinite(value)) {\n        return value;\n    }\n    if (typeof value === 'string' && value.trim() !== '') {\n        const n = Number(value);\n        if (Number.isFinite(n)) {\n            return n;\n        }\n    }\n    return null;\n}\nconst data = [\n    { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n    { item: 'Module B', units: 8, price: 120, tax: 8 },\n    { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n    { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n    { item: 'Module E', units: 0, price: 75, tax: 6 },\n    { item: '', units: '', price: '', tax: '' },\n];\nconst numericProps = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\nfunction formatSummary(prop) {\n    const numbers = [];\n    for (let row = 0; row < summaryRowIndex; row += 1) {\n        const n = parseNumeric(data[row][prop]);\n        if (n !== null) {\n            numbers.push(n);\n        }\n    }\n    if (numbers.length === 0) {\n        return '\\u2014';\n    }\n    const sum = numbers.reduce((acc, n) => acc + n, 0);\n    const avg = sum / numbers.length;\n    return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\nfunction refreshSummary(hot) {\n    hot.batch(() => {\n        hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n        numericProps.forEach((prop) => {\n            hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n        });\n    });\n}\nconst container = document.querySelector('#example1');\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n    data,\n    licenseKey: 'non-commercial-and-evaluation',\n    rowHeaders: true,\n    colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n    fixedRowsBottom: 1,\n    height: 'auto',\n    width: '100%',\n    columns: [\n        { data: 'item', type: 'text', readOnly: false },\n        { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    cells(row, _col, prop) {\n        if (row !== summaryRowIndex) {\n            return {};\n        }\n        const meta = {\n            readOnly: true,\n            className: 'htSummaryRow',\n        };\n        if (prop !== 'item') {\n            meta.type = 'text';\n            meta.validator = undefined;\n            meta.className = 'htSummaryRow htRight';\n        }\n        return meta;\n    },\n    afterInit() {\n        refreshSummary(this);\n    },\n    afterChange(changes, source) {\n        if (!changes || source === SUMMARY_SOURCE) {\n            return;\n        }\n        if (changes.every(([row]) => row === summaryRowIndex)) {\n            return;\n        }\n        refreshSummary(this);\n    },\n    beforeUndoStackChange(_doneActions, source) {\n        if (source === SUMMARY_SOURCE) {\n            return false;\n        }\n    },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst SUMMARY_SOURCE = 'updateSummary';\nfunction parseNumeric(value) {\n    if (typeof value === 'number' && Number.isFinite(value)) {\n        return value;\n    }\n    if (typeof value === 'string' && value.trim() !== '') {\n        const n = Number(value);\n        if (Number.isFinite(n)) {\n            return n;\n        }\n    }\n    return null;\n}\nconst data = [\n    { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n    { item: 'Module B', units: 8, price: 120, tax: 8 },\n    { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n    { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n    { item: 'Module E', units: 0, price: 75, tax: 6 },\n    { item: '', units: '', price: '', tax: '' },\n];\nconst numericProps = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\nfunction formatSummary(prop) {\n    const numbers = [];\n    for (let row = 0; row < summaryRowIndex; row += 1) {\n        const n = parseNumeric(data[row][prop]);\n        if (n !== null) {\n            numbers.push(n);\n        }\n    }\n    if (numbers.length === 0) {\n        return '\\u2014';\n    }\n    const sum = numbers.reduce((acc, n) => acc + n, 0);\n    const avg = sum / numbers.length;\n    return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\nfunction refreshSummary(hot) {\n    hot.batch(() => {\n        hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n        numericProps.forEach((prop) => {\n            hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n        });\n    });\n}\nconst container = document.querySelector('#example1');\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n    data,\n    licenseKey: 'non-commercial-and-evaluation',\n    rowHeaders: true,\n    colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n    fixedRowsBottom: 1,\n    height: 'auto',\n    width: '100%',\n    columns: [\n        { data: 'item', type: 'text', readOnly: false },\n        { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    ],\n    cells(row, _col, prop) {\n        if (row !== summaryRowIndex) {\n            return {};\n        }\n        const meta = {\n            readOnly: true,\n            className: 'htSummaryRow',\n        };\n        if (prop !== 'item') {\n            meta.type = 'text';\n            meta.validator = undefined;\n            meta.className = 'htSummaryRow htRight';\n        }\n        return meta;\n    },\n    afterInit() {\n        refreshSummary(this);\n    },\n    afterChange(changes, source) {\n        if (!changes || source === SUMMARY_SOURCE) {\n            return;\n        }\n        if (changes.every(([row]) => row === summaryRowIndex)) {\n            return;\n        }\n        refreshSummary(this);\n    },\n    beforeUndoStackChange(_doneActions, source) {\n        if (source === SUMMARY_SOURCE) {\n            return false;\n        }\n    },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json
index 5f566956a..66b1a35fb 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst data: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(data[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable) {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\nconst container = document.querySelector('#example1')!;\n\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n  data,\n  licenseKey: 'non-commercial-and-evaluation',\n  rowHeaders: true,\n  colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n  fixedRowsBottom: 1,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'item', type: 'text', readOnly: false },\n    { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  ],\n  cells(row, _col, prop) {\n    if (row !== summaryRowIndex) {\n      return {};\n    }\n\n    const meta: Handsontable.CellProperties = {\n      readOnly: true,\n      className: 'htSummaryRow',\n    };\n\n    if (prop !== 'item') {\n      meta.type = 'text';\n      meta.validator = undefined;\n      meta.className = 'htSummaryRow htRight';\n    }\n\n    return meta;\n  },\n  afterInit() {\n    refreshSummary(this);\n  },\n  afterChange(changes, source) {\n    if (!changes || source === SUMMARY_SOURCE) {\n      return;\n    }\n\n    if (changes.every(([row]) => row === summaryRowIndex)) {\n      return;\n    }\n\n    refreshSummary(this);\n  },\n  beforeUndoStackChange(_doneActions, source) {\n    if (source === SUMMARY_SOURCE) {\n      return false;\n    }\n  },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst data: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(data[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable) {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\nconst container = document.querySelector('#example1')!;\n\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n  data,\n  licenseKey: 'non-commercial-and-evaluation',\n  rowHeaders: true,\n  colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n  fixedRowsBottom: 1,\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'item', type: 'text', readOnly: false },\n    { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n    { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n    { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n  ],\n  cells(row, _col, prop) {\n    if (row !== summaryRowIndex) {\n      return {};\n    }\n\n    const meta: Handsontable.CellProperties = {\n      readOnly: true,\n      className: 'htSummaryRow',\n    };\n\n    if (prop !== 'item') {\n      meta.type = 'text';\n      meta.validator = undefined;\n      meta.className = 'htSummaryRow htRight';\n    }\n\n    return meta;\n  },\n  afterInit() {\n    refreshSummary(this);\n  },\n  afterChange(changes, source) {\n    if (!changes || source === SUMMARY_SOURCE) {\n      return;\n    }\n\n    if (changes.every(([row]) => row === summaryRowIndex)) {\n      return;\n    }\n\n    refreshSummary(this);\n  },\n  beforeUndoStackChange(_doneActions, source) {\n    if (source === SUMMARY_SOURCE) {\n      return false;\n    }\n  },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json
index 027efd705..3930c365f 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst data: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(data[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      licenseKey=\"non-commercial-and-evaluation\"\n      rowHeaders={true}\n      colHeaders={['Item', 'Units', 'Price', 'Tax']}\n      fixedRowsBottom={1}\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'item', type: 'text', readOnly: false },\n        { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      ]}\n      cells={function (\n        this: Handsontable.CellProperties,\n        row: number,\n        _col: number,\n        prop: string | number,\n      ): Handsontable.CellMeta {\n        if (row !== summaryRowIndex) {\n          return {};\n        }\n\n        const meta: Handsontable.CellProperties = {\n          readOnly: true,\n          className: 'htSummaryRow',\n        };\n\n        if (prop !== 'item') {\n          meta.type = 'text';\n          meta.validator = undefined;\n          meta.className = 'htSummaryRow htRight';\n        }\n\n        return meta;\n      }}\n      afterInit={function (this: Handsontable): void {\n        refreshSummary(this);\n      }}\n      afterChange={function (\n        this: Handsontable,\n        changes: Handsontable.CellChange[] | null,\n        source: Handsontable.ChangeSource,\n      ): void {\n        if (!changes || source === SUMMARY_SOURCE) {\n          return;\n        }\n\n        if (changes.every(([row]) => row === summaryRowIndex)) {\n          return;\n        }\n\n        refreshSummary(this);\n      }}\n      beforeUndoStackChange={function (\n        _doneActions: Handsontable.UndoRedoAction[],\n        source: string | undefined,\n      ): boolean | void {\n        if (source === SUMMARY_SOURCE) {\n          return false;\n        }\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype Row = {\n  item: string;\n  units: number | string;\n  price: number | string;\n  tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const n = Number(value);\n\n    if (Number.isFinite(n)) {\n      return n;\n    }\n  }\n\n  return null;\n}\n\nconst data: Row[] = [\n  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n  { item: 'Module B', units: 8, price: 120, tax: 8 },\n  { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n  { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n  { item: 'Module E', units: 0, price: 75, tax: 6 },\n  { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n  const numbers: number[] = [];\n\n  for (let row = 0; row < summaryRowIndex; row += 1) {\n    const n = parseNumeric(data[row][prop]);\n\n    if (n !== null) {\n      numbers.push(n);\n    }\n  }\n\n  if (numbers.length === 0) {\n    return '\\u2014';\n  }\n\n  const sum = numbers.reduce((acc, n) => acc + n, 0);\n  const avg = sum / numbers.length;\n\n  return `Sum: ${sum.toFixed(2)}\\nAvg: ${avg.toFixed(2)}\\nCount: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n  hot.batch(() => {\n    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n    numericProps.forEach((prop) => {\n      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n    });\n  });\n}\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      licenseKey=\"non-commercial-and-evaluation\"\n      rowHeaders={true}\n      colHeaders={['Item', 'Units', 'Price', 'Tax']}\n      fixedRowsBottom={1}\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'item', type: 'text', readOnly: false },\n        { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n        { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n        { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n      ]}\n      cells={function (\n        this: Handsontable.CellProperties,\n        row: number,\n        _col: number,\n        prop: string | number,\n      ): Handsontable.CellMeta {\n        if (row !== summaryRowIndex) {\n          return {};\n        }\n\n        const meta: Handsontable.CellProperties = {\n          readOnly: true,\n          className: 'htSummaryRow',\n        };\n\n        if (prop !== 'item') {\n          meta.type = 'text';\n          meta.validator = undefined;\n          meta.className = 'htSummaryRow htRight';\n        }\n\n        return meta;\n      }}\n      afterInit={function (this: Handsontable): void {\n        refreshSummary(this);\n      }}\n      afterChange={function (\n        this: Handsontable,\n        changes: Handsontable.CellChange[] | null,\n        source: Handsontable.ChangeSource,\n      ): void {\n        if (!changes || source === SUMMARY_SOURCE) {\n          return;\n        }\n\n        if (changes.every(([row]) => row === summaryRowIndex)) {\n          return;\n        }\n\n        refreshSummary(this);\n      }}\n      beforeUndoStackChange={function (\n        _doneActions: Handsontable.UndoRedoAction[],\n        source: string | undefined,\n      ): boolean | void {\n        if (source === SUMMARY_SOURCE) {\n          return false;\n        }\n      }}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":".htSummaryRow {\n  font-weight: 600;\n}\n\n/* The summary row is always read-only, so Handsontable applies its built-in .htDimmed\n   background with `!important`. Match that specificity and add `!important` here too,\n   so this rule - not the default read-only style - decides the summary row's background. */\n.handsontable .htSummaryRow.htDimmed {\n  background-color: var(--ht-background-secondary-color, #f2f3f5) !important;\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json
index c1e15e042..2f6573e7d 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-sparkline-cell-renderer></example1-sparkline-cell-renderer>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (\n  instance,\n  td,\n  row,\n  col,\n  prop,\n  value,\n  cellProperties,\n) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { CELL_TYPE: 'sparklineBar', renderer: sparklineRenderer });\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-sparkline-cell-renderer',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n    { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n    { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n    { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n    { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n    { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    rowHeights: 44,\n    colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'product', type: 'text', width: 100, readOnly: true },\n      { data: 'w1', type: 'numeric', width: 48 },\n      { data: 'w2', type: 'numeric', width: 48 },\n      { data: 'w3', type: 'numeric', width: 48 },\n      { data: 'w4', type: 'numeric', width: 48 },\n      { data: 'w5', type: 'numeric', width: 48 },\n      {\n        data: undefined,\n        width: 160,\n        type: 'sparklineBar',\n        className: 'htMiddle sparkline-cell',\n        readOnly: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n.handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-sparkline-cell-renderer></example1-sparkline-cell-renderer>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (\n  instance,\n  td,\n  row,\n  col,\n  prop,\n  value,\n  cellProperties,\n) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { CELL_TYPE: 'sparklineBar', renderer: sparklineRenderer });\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'example1-sparkline-cell-renderer',\n  template: `\n    <div>\n      <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>\n  `,\n})\nexport class AppComponent {\n  readonly data = [\n    { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n    { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n    { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n    { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n    { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n    { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    rowHeights: 44,\n    colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n    height: 'auto',\n    width: '100%',\n    columns: [\n      { data: 'product', type: 'text', width: 100, readOnly: true },\n      { data: 'w1', type: 'numeric', width: 48 },\n      { data: 'w2', type: 'numeric', width: 48 },\n      { data: 'w3', type: 'numeric', width: 48 },\n      { data: 'w4', type: 'numeric', width: 48 },\n      { data: 'w5', type: 'numeric', width: 48 },\n      {\n        data: undefined,\n        width: 160,\n        type: 'sparklineBar',\n        className: 'htMiddle sparkline-cell',\n        readOnly: true,\n      },\n    ],\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};","/src/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n.handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json
index fd77add68..d96233ff4 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'];\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData) {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row);\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n) => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  rowHeights: 44,\n  colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'product', type: 'text', width: 100, readOnly: true },\n    { data: 'w1', type: 'numeric', width: 48 },\n    { data: 'w2', type: 'numeric', width: 48 },\n    { data: 'w3', type: 'numeric', width: 48 },\n    { data: 'w4', type: 'numeric', width: 48 },\n    { data: 'w5', type: 'numeric', width: 48 },\n    {\n      data: null,\n      width: 160,\n      type: 'sparklineBar',\n      className: 'htMiddle sparkline-cell',\n      readOnly: true,\n    },\n  ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'];\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData) {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row);\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n) => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  rowHeights: 44,\n  colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'product', type: 'text', width: 100, readOnly: true },\n    { data: 'w1', type: 'numeric', width: 48 },\n    { data: 'w2', type: 'numeric', width: 48 },\n    { data: 'w3', type: 'numeric', width: 48 },\n    { data: 'w4', type: 'numeric', width: 48 },\n    { data: 'w5', type: 'numeric', width: 48 },\n    {\n      data: null,\n      width: 160,\n      type: 'sparklineBar',\n      className: 'htMiddle sparkline-cell',\n      readOnly: true,\n    },\n  ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json
index f628b7385..dd0153ea0 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (\n  instance,\n  td,\n  row,\n  col,\n  prop,\n  value,\n  cellProperties\n) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(\n    row\n  ) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average =\n    validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  rowHeights: 44,\n  colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'product', type: 'text', width: 100, readOnly: true },\n    { data: 'w1', type: 'numeric', width: 48 },\n    { data: 'w2', type: 'numeric', width: 48 },\n    { data: 'w3', type: 'numeric', width: 48 },\n    { data: 'w4', type: 'numeric', width: 48 },\n    { data: 'w5', type: 'numeric', width: 48 },\n    {\n      data: null,\n      width: 160,\n      type: 'sparklineBar',\n      className: 'htMiddle sparkline-cell',\n      readOnly: true,\n    },\n  ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (\n  instance,\n  td,\n  row,\n  col,\n  prop,\n  value,\n  cellProperties\n) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(\n    row\n  ) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average =\n    validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  rowHeights: 44,\n  colHeaders: ['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline'],\n  licenseKey: 'non-commercial-and-evaluation',\n  height: 'auto',\n  width: '100%',\n  columns: [\n    { data: 'product', type: 'text', width: 100, readOnly: true },\n    { data: 'w1', type: 'numeric', width: 48 },\n    { data: 'w2', type: 'numeric', width: 48 },\n    { data: 'w3', type: 'numeric', width: 48 },\n    { data: 'w4', type: 'numeric', width: 48 },\n    { data: 'w5', type: 'numeric', width: 48 },\n    {\n      data: null,\n      width: 160,\n      type: 'sparklineBar',\n      className: 'htMiddle sparkline-cell',\n      readOnly: true,\n    },\n  ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json
index af4b17d5b..2bc63a373 100644
--- a/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-770903c-20261001","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-770903c-20261001\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-770903c-20261001\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport './example1.css';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      rowHeights={44}\n      colHeaders={['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'product', type: 'text', width: 100, readOnly: true },\n        { data: 'w1', type: 'numeric', width: 48 },\n        { data: 'w2', type: 'numeric', width: 48 },\n        { data: 'w3', type: 'numeric', width: 48 },\n        { data: 'w4', type: 'numeric', width: 48 },\n        { data: 'w5', type: 'numeric', width: 48 },\n        {\n          data: null,\n          width: 160,\n          type: 'sparklineBar',\n          className: 'htMiddle sparkline-cell',\n          readOnly: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"React (TS)"}
+{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Sparkline cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer, baseRenderer } from 'handsontable/renderers';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport './example1.css';\n\nregisterAllModules();\n\nconst SLOT = 10;\nconst GAP = 2;\nconst VIEW_HEIGHT = 100;\nconst WEEK_KEYS = ['w1', 'w2', 'w3', 'w4', 'w5'] as const;\nconst VIEW_WIDTH = WEEK_KEYS.length * SLOT - GAP;\n\n// Returns null for invalid/non-numeric values, preserving each slot's position.\nfunction toSlots(rowData: Record<string, unknown> | null): (number | null)[] {\n  return WEEK_KEYS.map((key) => {\n    const value = rowData?.[key];\n    const n = typeof value === 'number' ? value : Number(value);\n    return Number.isFinite(n) ? n : null;\n  });\n}\n\n// Inline SVG bar chart generated from the row's w1-w5 values.\nconst sparklineRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n  baseRenderer(instance, td, row, col, prop, value, cellProperties);\n\n  const sourceRow = instance.getSourceDataAtRow(row) as Record<string, unknown> | null;\n  const slots = toSlots(sourceRow);\n  const validNumbers = slots.filter((n): n is number => n !== null);\n\n  if (validNumbers.length === 0) {\n    td.textContent = '—';\n    td.title = 'No data';\n    return;\n  }\n\n  const rowMax = validNumbers.reduce((m, n) => Math.max(m, Math.abs(n)), 0);\n\n  if (rowMax === 0) {\n    td.textContent = '—';\n    td.title = 'All values are zero';\n    return;\n  }\n\n  const average = validNumbers.reduce((sum, n) => sum + n, 0) / validNumbers.length;\n  const rects = slots\n    .map((n, i) => {\n      if (n === null) return '';\n      const barHeight = (Math.abs(n) / rowMax) * VIEW_HEIGHT;\n      const x = i * SLOT;\n      const y = VIEW_HEIGHT - barHeight;\n      const w = SLOT - GAP;\n      const fill = n >= average ? '#16a34a' : '#dc2626';\n\n      return `<rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${barHeight}\" fill=\"${fill}\"/>`;\n    })\n    .join('');\n\n  td.innerHTML = `<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}\" preserveAspectRatio=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">${rects}</svg>`;\n  td.removeAttribute('title');\n};\n\nregisterRenderer('sparklineBar', sparklineRenderer);\nregisterCellType('sparklineBar', { renderer: sparklineRenderer });\n\n/* start:skip-in-preview */\nconst data = [\n  { product: 'Desk lamp', w1: 4, w2: 8, w3: 2, w4: 9, w5: 5 },\n  { product: 'Monitor arm', w1: 1, w2: 1, w3: 0, w4: 0, w5: 0 },\n  { product: 'USB hub', w1: null, w2: null, w3: null, w4: null, w5: null },\n  { product: 'Mouse', w1: undefined, w2: undefined, w3: 3, w4: 5, w5: 2 },\n  { product: 'Keyboard', w1: 3, w2: 6, w3: 7, w4: 4, w5: 8 },\n  { product: 'Webcam', w1: 0, w2: 0, w3: 0, w4: 0, w5: 0 },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      id=\"example1\"\n      data={data}\n      rowHeaders={true}\n      rowHeights={44}\n      colHeaders={['Product', 'W1', 'W2', 'W3', 'W4', 'W5', 'Sparkline']}\n      licenseKey=\"non-commercial-and-evaluation\"\n      height=\"auto\"\n      width=\"100%\"\n      columns={[\n        { data: 'product', type: 'text', width: 100, readOnly: true },\n        { data: 'w1', type: 'numeric', width: 48 },\n        { data: 'w2', type: 'numeric', width: 48 },\n        { data: 'w3', type: 'numeric', width: 48 },\n        { data: 'w4', type: 'numeric', width: 48 },\n        { data: 'w5', type: 'numeric', width: 48 },\n        {\n          data: null,\n          width: 160,\n          type: 'sparklineBar',\n          className: 'htMiddle sparkline-cell',\n          readOnly: true,\n        },\n      ]}\n    />\n  );\n};\n\nexport default ExampleComponent;","/src/example1.css":"/* Keep sparkline cells vertically centered and tall enough for the SVG */\n#example1 .handsontable td.sparkline-cell {\n  vertical-align: middle;\n}"},"docsPath":"recipes/rendering-styling/sparkline-cell-renderer/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Sparkline cell renderer"],"guide":"recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md","guideTitle":"Sparkline cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/sparkline-cell-renderer","lang":"React (TS)"}
diff --git a/runner/workers/api/src/docs-taxonomy.generated.ts b/runner/workers/api/src/docs-taxonomy.generated.ts
index 0753098ba..4ce5844e0 100644
--- a/runner/workers/api/src/docs-taxonomy.generated.ts
+++ b/runner/workers/api/src/docs-taxonomy.generated.ts
@@ -708,6 +708,7 @@ export const DOCS_PATH_GUIDE: Readonly<Record<string, number>> = {
  "guides/cell-features/clipboard/angular/example3.ts": 8,
  "guides/cell-features/clipboard/angular/example4.ts": 8,
  "guides/cell-features/clipboard/angular/example5.ts": 8,
+ "guides/cell-features/clipboard/angular/example6.ts": 8,
  "guides/cell-features/clipboard/javascript/example1.js": 8,
  "guides/cell-features/clipboard/javascript/example1.ts": 8,
  "guides/cell-features/clipboard/javascript/example2.js": 8,
@@ -718,16 +719,20 @@ export const DOCS_PATH_GUIDE: Readonly<Record<string, number>> = {
  "guides/cell-features/clipboard/javascript/example4.ts": 8,
  "guides/cell-features/clipboard/javascript/example5.js": 8,
  "guides/cell-features/clipboard/javascript/example5.ts": 8,
+ "guides/cell-features/clipboard/javascript/example6.js": 8,
+ "guides/cell-features/clipboard/javascript/example6.ts": 8,
  "guides/cell-features/clipboard/react/example1.tsx": 8,
  "guides/cell-features/clipboard/react/example2.tsx": 8,
  "guides/cell-features/clipboard/react/example3.tsx": 8,
  "guides/cell-features/clipboard/react/example4.tsx": 8,
  "guides/cell-features/clipboard/react/example5.tsx": 8,
+ "guides/cell-features/clipboard/react/example6.tsx": 8,
  "guides/cell-features/clipboard/vue/example1.vue": 8,
  "guides/cell-features/clipboard/vue/example2.vue": 8,
  "guides/cell-features/clipboard/vue/example3.vue": 8,
  "guides/cell-features/clipboard/vue/example4.vue": 8,
  "guides/cell-features/clipboard/vue/example5.vue": 8,
+ "guides/cell-features/clipboard/vue/example6.vue": 8,
  "guides/cell-features/comments/angular/example1.ts": 9,
  "guides/cell-features/comments/angular/example2.ts": 9,
  "guides/cell-features/comments/angular/example3.ts": 9,
@@ -1812,6 +1817,7 @@ export const DOCS_PATH_GUIDE: Readonly<Record<string, number>> = {
  "guides/rows/row-height/angular/example2.ts": 111,
  "guides/rows/row-height/angular/example3.ts": 111,
  "guides/rows/row-height/angular/example4.ts": 111,
+ "guides/rows/row-height/angular/example5.ts": 111,
  "guides/rows/row-height/javascript/example1.js": 111,
  "guides/rows/row-height/javascript/example1.ts": 111,
  "guides/rows/row-height/javascript/example2.js": 111,
@@ -1820,14 +1826,18 @@ export const DOCS_PATH_GUIDE: Readonly<Record<string, number>> = {
  "guides/rows/row-height/javascript/example3.ts": 111,
  "guides/rows/row-height/javascript/example4.js": 111,
  "guides/rows/row-height/javascript/example4.ts": 111,
+ "guides/rows/row-height/javascript/example5.js": 111,
+ "guides/rows/row-height/javascript/example5.ts": 111,
  "guides/rows/row-height/react/example1.tsx": 111,
  "guides/rows/row-height/react/example2.tsx": 111,
  "guides/rows/row-height/react/example3.tsx": 111,
  "guides/rows/row-height/react/example4.tsx": 111,
+ "guides/rows/row-height/react/example5.tsx": 111,
  "guides/rows/row-height/vue/example1.vue": 111,
  "guides/rows/row-height/vue/example2.vue": 111,
  "guides/rows/row-height/vue/example3.vue": 111,
  "guides/rows/row-height/vue/example4.vue": 111,
+ "guides/rows/row-height/vue/example5.vue": 111,
  "guides/rows/row-hiding/angular/example1.ts": 112,
  "guides/rows/row-hiding/angular/example2.ts": 112,
  "guides/rows/row-hiding/angular/example3.ts": 112,